What is CardView in Android? Everything you should know

CardView was announced by Google in 2014 as a part of Material Design components in android. The main goal of CardView in the Material Design is to provide a united look to all of the card-based UIs making it easier for developers to create seamless interfaces.

The CardView is a FrameLayout with a rounded corner background and shadow.

In this blog, we will discuss what possibilities CardView provides on Android and how to use it properly in the application.

Let’s discuss it with an example. In the below image, you will notice a white card like view container containing an ImageView, two TextViews, and an ImageButton. This is our CardView. As I already mentioned, a CardView is a view container or ViewGroup that inherits its nature from FrameLayout which further inherits from ViewGroup itself.

The basic customization that a CardView provides includes CornerRadius, Elevation, MaxElevation, ContentPadding, CompatPadding, PreventCornerOverlap, and a dedicated CardBackgroundColor.

Below XML code will give you an idea of CardView and its customizations.

<?xml version=”1.0" encoding=”utf-8"?>
<androidx.cardview.widget.CardView xmlns:android=”http://schemas.android.com/apk/res/android"
xmlns:app=”http://schemas.android.com/apk/res-auto"
xmlns:tools=”http://schemas.android.com/tools"
android:layout_width=”match_parent”
android:layout_height=”250dp”
app:cardBackgroundColor=”@android:color/white”
app:cardCornerRadius=”5dp”
app:cardMaxElevation=”1.5dp”
app:cardElevation=”1dp”
app:contentPadding=”10dp”
app:contentPaddingBottom=”0dp”
app:cardPreventCornerOverlap=”true”
app:cardUseCompatPadding=”true”
android:id=”@+id/cardView”
tools:context=”.CardActivity”>

<RelativeLayout
android:layout_width=”match_parent”
android:layout_height=”match_parent”>

<ImageView
android:layout_width=”match_parent”
android:layout_height=”180dp”
android:scaleType=”centerCrop”
android:id=”@+id/img”
android:src=”@drawable/cardview”
android:contentDescription=”CardImageViewDesc” />

<TextView
android:id=”@+id/textView”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_below=”@id/img”
android:layout_marginLeft=”5dp”
android:layout_marginStart=”5dp”
android:fontFamily=”sans-serif”
android:gravity=”center_vertical”
android:text=”@string/gbandroid_blogs”
android:textSize=”17sp”
android:textStyle=”bold”
android:textColor=”@android:color/black”/>

<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_below=”@id/textView”
android:layout_marginLeft=”5dp”
android:layout_marginStart=”5dp”
android:layout_marginTop=”2dp”
android:fontFamily=”sans-serif”
android:gravity=”center_vertical”
android:text=”@string/www_gbandroidblogs_com”
android:textStyle=”italic”
android:textSize=”15sp” />

<ImageButton
android:layout_width=”wrap_content”
android:layout_height=”match_parent”
android:layout_alignParentEnd=”true”
android:layout_alignParentRight=”true”
android:background=”?attr/selectableItemBackgroundBorderless”
android:src=”@drawable/favourite”
android:layout_below=”@id/img”
android:layout_marginRight=”5dp”
android:layout_marginEnd=”5dp”
android:contentDescription=”FavButtonDesc” />

</RelativeLayout>

</androidx.cardview.widget.CardView>

Let’s discuss the above XML code and CardView attributes

1. Adding CardView dependency to project

CardView library can be added to a project by adding the following dependency to dependencies in build.gradle (module: app),

2. Why RelativeLayout inside CardView?

As we already know that a CardView is a ViewGroup but it inherits from FrameLayout, which is the most simplistic form of ViewGroup created to handle a single frame at a time. That’s why we need to use a RelativeLayout to hold all of our views together while acting as a single frame to the CardView.

3. CardView Background Color

By default, a CardView comes with a white card background color which can be changed as per our requirement by using this property.

Sample declaration of cardBackgroundColor (white) in XML and Java looks like this,

app:cardBackgroundColor=”@android:color/white”

cardView.setCardBackgroundColor(Color.WHITE);

4. CardView Elevation

CardView Elevation property simply elevates the cardview on the z-axis to a height equal to the passed value. Since elevation came with Android Lollipop, CardView Elevation on previous versions uses shadows to create a related effect. It adds padding on its content’s sides using

maxCardElevation + (1 — cos45) * cornerRadius

and on top and bottom using

maxCardElevation * 1.5 + (1 — cos45) * cornerRadius

and then applies shadows to that space.

In our example, we have set the elevation to 1dp and maxElevation to 1.5dp. Now, if you look at the Java part, you’ll see the values passed to the methods are different than the values to the XML properties. This is because we can define the nature of value with XML but not with java methods which expect the value to be in pixels (px) only and thus we have to pass the number of pixels that make up the same dp as XML values.

app:cardElevation=”1dp”

app:cardMaxElevation=”1.5dp”

cardView.setCardElevation(3f); // or cardView.setCardElevation(dpToPx(1f));

cardView.setMaxCardElevation(4.5f); // or cardView.setMaxCardElevation(dpToPx(1.5f));

****on Nexus 5 where the pixel density is 3. (dpTopx, 1dp=1*3=3px)

5. CardView Corner Radius

The CardView Corner Radius gives the CardView a rounded corner of radius equal to the value provided to it.

Sample code for 5dp corner radius:

app:cardCornerRadius=”5dp”

cardView.setRadius(15);

6. CardView Content Padding

The CardView padding is used to create a space for drawing shadows and thus we use ContentPadding to add padding between the edges and child views. In our example, we have used content padding to set padding on all the edges to 10dp and then content padding-bottom to 0dp to make sure there is no padding at the bottom.

app:contentPadding=”10dp”

app:contentPaddingBottom=”0dp”

cardView.setContentPadding(30, 30, 30, 0);

7. CardView Use Compat Padding

Since CardViews use padding for drawing shadows on platforms before Lollipop, the content area will change on platforms before and after Lollipop. To make sure the content area remains the same on all the platforms, Compat Padding is used which simply adds inner padding on platforms Lollipop and after.

app:cardUseCompatPadding=”true”

cardView.setUseCompatPadding(true);

8. CardView Prevent Corner Overlap

The CardView avoids clipping the child views on platforms before Lollipop due to the rare nature of clipping and rather gives an option to distance content from rounded corners with Prevent Corner Overlap. The definition in XML and Java looks like this,

app:cardPreventCornerOverlap=”true”

cardView.setPreventCornerOverlap(true);

That’s it for what is CardView and basic attributes of cardview. In the next blog, we will see how to implement RecyclerView and CardView at the same time.