How to Create Custom CardView in AndroidAndroid Development

Cardview is a widget provided by Android to create a new look and functional UI. You can build your app with the following examples to make it look more professional. Cardview is a wonderful concept that makes your user experience better than the Android UI. Cardview is an Android Lollipop released with Android 5.0.
Customized CardView
First, add a CardView dependency to the application-level build.gradle file.
dependencies { implementation ‘androidx.cardview:cardview:1.0.0’ }
Then create a drawable background for the cards. For that, create a new drawable resource file inside the drawable folder.
res > drawable > New > Drawable Resource File.
res > drawable > New > Drawable Resource File.
background1.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:startColor="#FFAB00" android:endColor="#FFAB00"> </gradient> </shape>
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:startColor="#0091EA" android:endColor="#00BFA5"> </gradient> </shape>
background3.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:startColor="#AEEA00" android:endColor="#FFD600"> </gradient> </shape>

You can change it according to your needs.
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"> <androidx.cardview.widget.CardView android:layout_width="match_parent" android:layout_height="173dp" android:layout_marginStart="20dp" android:layout_marginTop="20dp" android:layout_marginEnd="20dp" app:cardCornerRadius="8dp"> <LinearLayout android:id="@+id/linearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/bg1" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="30dp" android:layout_marginTop="20dp" android:layout_marginEnd="30dp" android:orientation="horizontal"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Assam" android:textColor="#000000" android:textSize="22sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Current Location" android:textColor="#000000" android:textSize="14sp" /> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginStart="30dp" android:layout_marginTop="20dp" android:layout_marginEnd="30dp" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="25" android:textColor="#000000" android:textSize="28sp" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="6dp" android:text="o" android:textColor="#000000" android:textSize="13sp" /> </LinearLayout> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="18 %" android:textColor="#000000" 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:layout_alignParentEnd="true" android:layout_marginStart="6dp" android:text="11.25 AM" android:textColor="#000000" android:textSize="14sp" /> </RelativeLayout> </LinearLayout> </LinearLayout> </androidx.cardview.widget.CardView> <androidx.cardview.widget.CardView android:layout_width="match_parent" android:layout_height="173dp" android:layout_marginStart="20dp" android:layout_marginTop="20dp" android:layout_marginEnd="20dp" app:cardCornerRadius="8dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/bg2" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="30dp" android:layout_marginTop="20dp" android:layout_marginEnd="30dp" android:orientation="horizontal"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Delhi" android:textColor="@color/white" android:textSize="22sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="2 days ago" android:textColor="@color/white" android:textSize="14sp" /> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginStart="30dp" android:layout_marginTop="20dp" android:layout_marginEnd="30dp" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="39" android:textColor="@color/white" android:textSize="28sp" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="6dp" android:text="o" android:textColor="@color/white" android:textSize="13sp" /> </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:layout_alignParentEnd="true" android:layout_marginStart="6dp" android:text="01.05 PM" android:textColor="#D6D6D6" android:textSize="14sp" /> </RelativeLayout> </LinearLayout> </LinearLayout> </androidx.cardview.widget.CardView> <androidx.cardview.widget.CardView android:layout_width="match_parent" android:layout_height="173dp" android:layout_marginStart="20dp" android:layout_marginTop="20dp" android:layout_marginEnd="20dp" app:cardCornerRadius="8dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/bg3" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="30dp" android:layout_marginTop="20dp" android:layout_marginEnd="30dp" android:orientation="horizontal"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Darjeeling" android:textColor="#000000" android:textSize="22sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="2 weeks ago" android:textColor="#000000" android:textSize="14sp" /> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginStart="30dp" android:layout_marginTop="20dp" android:layout_marginEnd="30dp" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="12" android:textColor="#000000" android:textSize="28sp" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="6dp" android:text="o" android:textColor="#000000" android:textSize="13sp" /> </LinearLayout> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="9 %" android:textColor="#000000" 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:layout_alignParentEnd="true" android:layout_marginStart="6dp" android:text="05.00 AM" android:textColor="#000000" android:textSize="14sp" /> </RelativeLayout> </LinearLayout> </LinearLayout> </androidx.cardview.widget.CardView> </LinearLayout>
Output :-