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?

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

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!!

Hi everyone, myself Golap an Android app developer with UI/UX designer.