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

implementation ‘androidx.cardview:cardview:1.0.0’

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.

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.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store