How to Make CardView design in an Android Studio with source code

 How to use card view in an android studio

card view is a widget in an android studio that used to display any data with a rounded corner.

In this post, we used cardView and make a different simple design.

Given a simple example of card view with shadow.

Used this card view you can customize it and make a different design.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Card View Demo"
        android:textSize="30dp"
        android:textStyle="bold" />

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/title"
        android:layout_margin="20sp"
        android:background="@color/cardview_shadow_start_color"
        android:columnCount="2"
        android:rowCount="3">

        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_rowWeight="1"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            app:cardCornerRadius="8dp"
            app:cardElevation="8dp"
            app:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:background="@color/purple_200"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/img1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher_background" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/app_name" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_rowWeight="1"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            app:cardCornerRadius="8dp"
            app:cardElevation="8dp"
            app:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:background="@color/purple_200"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/img2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher_background" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/app_name" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_rowWeight="1"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            app:cardCornerRadius="8dp"
            app:cardElevation="8dp"
            app:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:background="@color/purple_200"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/img3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher_background" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/app_name" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_rowWeight="1"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            app:cardCornerRadius="8dp"
            app:cardElevation="8dp"
            app:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:background="@color/purple_200"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/img4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher_background" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/app_name" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_rowWeight="1"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            app:cardCornerRadius="8dp"
            app:cardElevation="8dp"
            app:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:background="@color/purple_200"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/img5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher_background" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/app_name" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="2"
            android:layout_rowWeight="1"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            app:cardCornerRadius="8dp"
            app:cardElevation="8dp"
            app:cardUseCompatPadding="true">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|center_horizontal"
                android:background="@color/purple_200"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/img6"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher_background" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/app_name" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

    </GridLayout>
</RelativeLayout>

MainActivity.java

package com.pd.cardview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    ImageView imageView1, imageView2, imageView3, imageView4, imageView5, imageView6;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView1 = findViewById(R.id.img1);
        imageView2 = findViewById(R.id.img2);
        imageView3 = findViewById(R.id.img3);
        imageView4 = findViewById(R.id.img4);
        imageView5 = findViewById(R.id.img5);
        imageView6 = findViewById(R.id.img6);

        imageView1.setOnClickListener(this);
        imageView2.setOnClickListener(this);
        imageView3.setOnClickListener(this);
        imageView4.setOnClickListener(this);
        imageView5.setOnClickListener(this);
        imageView6.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.img1:
                Toast.makeText(this, "You are click on Image 1", Toast.LENGTH_SHORT).show();
                break;
            case R.id.img2:
                Toast.makeText(this, "Your are click on Image 2", Toast.LENGTH_SHORT).show();
                break;
            case R.id.img3:
                Toast.makeText(this, "You are click on Image 3", Toast.LENGTH_SHORT).show();
                break;
            case R.id.img4:
                Toast.makeText(this, "You are click on Image 4", Toast.LENGTH_LONG).show();
                break;
            case R.id.img5:
                Toast.makeText(this, "You are click on Image 5", Toast.LENGTH_SHORT).show();
                break;
            case R.id.img6:
                Toast.makeText(this, "You are click on Image 6", Toast.LENGTH_SHORT).show();
                break;
        }

    }
}

watch a video to live Demo

https://youtu.be/Apc-D9jvalw 

SUBSCRIBE to download

Download Source code