What is CardView and how to use it in Android?

Published on Sept. 14, 2021

In Android, CardView is an element that is used to represent design information in a card manner with a drop shadow called elevation and corner radius. It is used to beautify your app's UI.

 

CardView was introduced in Material Design in API level 21 (Android 5.0 i.e Lollypop). Since CardView is part of material design. It's such a view that has all material design properties, most importantly showing shadows according to elevation.

 

CardView Example:

​​​​​

How to create Cardview In XML

In order to use the CardView you need to add it to your layout file. Use it as a view group to contain other views. In this example, the CardView contains a single TextView to display some information to the user.

 <!-- A CardView that contains a TextView -->
    <androidx.cardview.widget.CardView 
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </androidx.cardview.widget.CardView>

 

Gradle dependencies to use CardView 

The CardView widget is a part of a separate library valid for API 7 level or higher. Add the following dependency in your Gradle build file to use CardView.

 

Add inside Gradle Scripts > build.gradle (Module: app) and inside dependencies: 

dependencies {
    implementation "androidx.cardview:cardview:1.0.0"
}

Attributes of CardView in Android

Use these properties to customize the appearance of the CardView Widgets

• card_view:cardBackgroundColor -  This attribute is used to set the background color for the CardView.
• card view:cardCornerRadius -  This attribute is used to set the corner radius for the CardView
• card_view:cardElevation -  This attribute is used to set the elevation for the CardView. The elevation is used to show the shadow of the CardView.
• card_view:contentPadding -  This attribute is used to set the inner padding between the edges of the Card and children of the CardView. This attribute is used to set the equally padding between all the edges of the card and children of the CardView. We can also set the padding from the bottom, top, left, and right edges.

 

Final Voice

In this article, we have discussed how to display CardView in Android using XML(Extensible Markup Language)? 

 

···