How to Create Custom CardView in Android Studio
By: Golap Gunjan Barman
Tags: Android App Development, Android Custom Cardview, Android, AndroidDev, Cardview

In this tutorial, we’re going to create a custom card view in android. Before that, if you do not know what CardView is then go through my previous tutorial on that, click here.

Also, you can go through how to implement recyclerView using CardView by clicking here, click here.

Why customized CardView?

CardView was announced by Google during its yearly I/O conference in 2014 as a part of Material Design components. The main purpose CardView serves in the Material Design universe is to provide a unified look to all of the card-based UIs making it easier for developers to create seamless interfaces.

In CardView, we can use as many elements as we want at different positions on the card. Which is not possible in any other widgets.

Make sure don’t use more element which create noise in the cardView. Make it simple and look elegant.

Customized CardView

First, add the CardView dependency in the app-level build.gradle file.

implementation ‘androidx.cardview:cardview:1.0.0’

After that create the drawable background for the cards. For that, create New Drawable Resource File inside the drawable folder. res > drawable > New > Drawable Resource File.

bg1.xml

<?xml version=”1.0" encoding=”utf-8"?> <shape xmlns:android=”http://schemas.android.com/apk/res/android"> <gradient android:startColor=”#673AB7" android:endColor=”#512DA8"/> </shape>

The output of the above code:

bg2.xml

<?xml version=”1.0" encoding=”utf-8"?> <shape xmlns:android=”http://schemas.android.com/apk/res/android"> <gradient android:startColor=”#00B4DB” android:endColor=”#0083B0"/> </shape>

The output of the above code:

bg3.xml

<?xml version=”1.0" encoding=”utf-8"?> <shape xmlns:android=”http://schemas.android.com/apk/res/android"> <gradient android:startColor=”#a8e063" android:endColor=”#56ab2f”/> </shape>

The output of the above code:

Also, import the required images into the drawable folder.

Now in the main XML file creates the card views. Here I used LinearLayout as the root widget, after that card view is used. Below codes that give you an idea of how to customize a card.

you can change it according to your requirements.

activity_main.xml

<?xml version=”1.0" encoding=”utf-8"?> <LinearLayout 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=”match_parent” android:orientation=”vertical” tools:context=”.MainActivity”> <androidx.cardview.widget.CardView android:layout_width=”match_parent” android:layout_height=”173dp” android:layout_marginTop=”20dp” android:layout_marginEnd=”20dp” android:layout_marginStart=”20dp” app:cardCornerRadius=”8dp”> <LinearLayout android:id=”@+id/linearLayout1" android:orientation=”vertical” android:layout_width=”match_parent” android:layout_height=”match_parent” android:background=”@drawable/bg1"> <LinearLayout android:orientation=”horizontal” android:layout_width=”match_parent” android:layout_height=”wrap_content” android:layout_marginStart=”30dp” android:layout_marginTop=”20dp” android:layout_marginEnd=”30dp”> <LinearLayout android:orientation=”vertical” android:layout_width=”wrap_content” android:layout_height=”wrap_content”> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”Assam” android:textSize=”22sp” android:textColor=”@color/white” /> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”Current Location” android:textSize=”14sp” android:textColor=”@color/white” /> </LinearLayout> <RelativeLayout android:layout_width=”match_parent” android:layout_height=”match_parent”> <ImageView android:layout_width=”40dp” android:layout_height=”wrap_content” android:src=”@drawable/cloud” android:layout_alignParentEnd=”true” android:layout_marginEnd=”8dp”/> </RelativeLayout> </LinearLayout> <LinearLayout android:orientation=”horizontal” android:layout_width=”match_parent” android:layout_height=”match_parent” android:layout_marginStart=”30dp” android:layout_marginTop=”20dp” android:layout_marginEnd=”30dp”> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”25" android:textSize=”28sp” android:textColor=”@color/white”/> <LinearLayout android:orientation=”vertical” android:layout_width=”wrap_content” android:layout_height=”wrap_content”> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:textColor=”@color/white” android:text=”o” android:textSize=”13sp” android:layout_marginStart=”6dp”/> <ImageView android:layout_width=”24dp” android:layout_height=”14dp” android:src=”@drawable/next”/> </LinearLayout> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”18 %” android:textColor=”@color/white” android:textSize=”14sp”/> <RelativeLayout android:layout_width=”match_parent” android:layout_height=”match_parent”> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”11.25 AM” android:layout_alignParentEnd=”true” android:textColor=”#D6D6D6" android:textSize=”14sp” android:layout_marginStart=”6dp”/> </RelativeLayout> </LinearLayout> </LinearLayout> </androidx.cardview.widget.CardView> <androidx.cardview.widget.CardView android:layout_width=”match_parent” android:layout_height=”173dp” android:layout_marginTop=”20dp” android:layout_marginEnd=”20dp” android:layout_marginStart=”20dp” app:cardCornerRadius=”8dp”> <LinearLayout android:orientation=”vertical” android:layout_width=”match_parent” android:layout_height=”match_parent” android:background=”@drawable/bg2"> <LinearLayout android:orientation=”horizontal” android:layout_width=”match_parent” android:layout_height=”wrap_content” android:layout_marginStart=”30dp” android:layout_marginTop=”20dp” android:layout_marginEnd=”30dp”> <LinearLayout android:orientation=”vertical” android:layout_width=”wrap_content” android:layout_height=”wrap_content”> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”Delhi” android:textSize=”22sp” android:textColor=”@color/white” /> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”2 days ago” android:textSize=”14sp” android:textColor=”@color/white” /> </LinearLayout> <RelativeLayout android:layout_width=”match_parent” android:layout_height=”match_parent”> <ImageView android:layout_width=”40dp” android:layout_height=”wrap_content” android:src=”@drawable/sunn” android:layout_alignParentEnd=”true” android:layout_marginEnd=”8dp”/> </RelativeLayout> </LinearLayout> <LinearLayout android:orientation=”horizontal” android:layout_width=”match_parent” android:layout_height=”match_parent” android:layout_marginStart=”30dp” android:layout_marginTop=”20dp” android:layout_marginEnd=”30dp”> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”39" android:textSize=”28sp” android:textColor=”@color/white”/> <LinearLayout android:orientation=”vertical” android:layout_width=”wrap_content” android:layout_height=”wrap_content”> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:textColor=”@color/white” android:text=”o” android:textSize=”13sp” android:layout_marginStart=”6dp”/> <ImageView android:layout_width=”24dp” android:layout_height=”14dp” android:src=”@drawable/next”/> </LinearLayout> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”35 %” android:textColor=”@color/white” android:textSize=”14sp”/> <RelativeLayout android:layout_width=”match_parent” android:layout_height=”match_parent”> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”01.05 PM” android:layout_alignParentEnd=”true” android:textColor=”#D6D6D6" android:textSize=”14sp” android:layout_marginStart=”6dp”/> </RelativeLayout> </LinearLayout> </LinearLayout> </androidx.cardview.widget.CardView> <androidx.cardview.widget.CardView android:layout_width=”match_parent” android:layout_height=”173dp” android:layout_marginTop=”20dp” android:layout_marginEnd=”20dp” android:layout_marginStart=”20dp” app:cardCornerRadius=”8dp”> <LinearLayout android:orientation=”vertical” android:layout_width=”match_parent” android:layout_height=”match_parent” android:background=”@drawable/bg3"> <LinearLayout android:orientation=”horizontal” android:layout_width=”match_parent” android:layout_height=”wrap_content” android:layout_marginStart=”30dp” android:layout_marginTop=”20dp” android:layout_marginEnd=”30dp”> <LinearLayout android:orientation=”vertical” android:layout_width=”wrap_content” android:layout_height=”wrap_content”> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”Darjeeling” android:textSize=”22sp” android:textColor=”@color/white” /> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”2 weeks ago” android:textSize=”14sp” android:textColor=”@color/white” /> </LinearLayout> <RelativeLayout android:layout_width=”match_parent” android:layout_height=”match_parent”> <ImageView android:layout_width=”40dp” android:layout_height=”wrap_content” android:src=”@drawable/rain” android:layout_alignParentEnd=”true” android:layout_marginEnd=”8dp”/> </RelativeLayout> </LinearLayout> <LinearLayout android:orientation=”horizontal” android:layout_width=”match_parent” android:layout_height=”match_parent” android:layout_marginStart=”30dp” android:layout_marginTop=”20dp” android:layout_marginEnd=”30dp”> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”12" android:textSize=”28sp” android:textColor=”@color/white”/> <LinearLayout android:orientation=”vertical” android:layout_width=”wrap_content” android:layout_height=”wrap_content”> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:textColor=”@color/white” android:text=”o” android:textSize=”13sp” android:layout_marginStart=”6dp”/> <ImageView android:layout_width=”24dp” android:layout_height=”14dp” android:src=”@drawable/next”/> </LinearLayout> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”9 %” android:textColor=”@color/white” android:textSize=”14sp”/> <RelativeLayout android:layout_width=”match_parent” android:layout_height=”match_parent”> <TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”05.00 AM” android:layout_alignParentEnd=”true” android:textColor=”#D6D6D6" android:textSize=”14sp” android:layout_marginStart=”6dp”/> </RelativeLayout> </LinearLayout> </LinearLayout> </androidx.cardview.widget.CardView> </LinearLayout>

Output

for more android related tutorials please visit www.gbandroidblogs.com

HAPPY CODING!!