How to Create Custom CardView in Android Studio
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
