CardView In Android With Example

CardView in Android Is used to represent the data in a widget with rounded corners. It also provides a specification for making elevation which shows some shadow.

CardView is the view which can display the views on top of each other. It looks like a UI design. You can see this in many of the android applications.

Generally we can use it inside the Recyclerview in the android adapter’s class which shows the data in list format.

Androidx CardView

Following is the androidx CardView. The androidx Cardview is the also best widget.

Use the following code to create a CardView in your projects.


<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:elevation="5dp"
        app:cardCornerRadius="10dp">

        <androidx.appcompat.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:padding="10dp"
            android:weightSum="10">

            <androidx.appcompat.widget.LinearLayoutCompat
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="7"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Title"
                    android:textColor="@color/black"
                    android:textSize="18dp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Write The Description Here"
                    android:textColor="@color/black"
                    android:textSize="16dp"
                    android:textStyle="bold" />
            </androidx.appcompat.widget.LinearLayoutCompat>

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_weight="3"
                android:src="@drawable/cartphoto" />
        </androidx.appcompat.widget.LinearLayoutCompat>
    </androidx.cardview.widget.CardView>

</LinearLayout>

Android Material CardView

You can use the android material design CardView which have more features then the androidx cardview. Before use the material designs any library first add the following dependency and do sync. In the latest android studio, it automatically added in the build.gradle file.

Add the dependency into the build.gradle(Module: your_app_name) file:

implementation 'com.google.android.material:material:1.4.0'


<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        app:cardElevation="10dp"
        app:cardCornerRadius="10dp">

        <androidx.appcompat.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:padding="10dp"
            android:weightSum="10">

            <androidx.appcompat.widget.LinearLayoutCompat
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="7"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Title"
                    android:textColor="@color/black"
                    android:textSize="18dp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="This is material cardview"
                    android:textColor="@color/black"
                    android:textSize="16dp"
                    android:textStyle="bold" />
            </androidx.appcompat.widget.LinearLayoutCompat>

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_weight="3"
                android:src="@drawable/cartphoto" />
        </androidx.appcompat.widget.LinearLayoutCompat>
    </com.google.android.material.card.MaterialCardView>

</LinearLayout>

Thank you for visiting this tutorial on FlutterTpoint. Hope it helped you to create CardView.

Learn more Android Useful Tutorials which will improve your development skills. For any query and doubt you can comment in the comment section below.