Android CardView with Example

Contents

22nd March, 2023

Hi developer, Today we are going to learn about a view container which is used to style the app design. It has inbuild rounded corners which creates an attractive user interface. Let’s Start.

1. What is CardView?

Android CardView is a rectangle container with rounded corners with a shadow effect at the borders. CardView enhances the visual appeal of the app. CardView is also used as an item of ListView, GridView and RecyclerView.

CardView is a subclass of FrameLayout. We will use CardView when we need a card based user interface.

2. Create/add CardView in Android Studio

First, make sure that your project has the CardView dependency in your app’s build.gradle file.

Groovy

content_copy light_mode remove

   ...
   ...
   ...

dependencies {
    ...
    ...
    ...
    implementation 'com.google.android.material:material:1.8.0'
}

2.1 Create/add CardView in XML layout file

Open the layout file where you want to add the CardView. Select CardView from the palette and add it to the layout UI design.

XML

content_copy light_mode remove

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Androidchunk!" />

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!--Add content here-->
    </androidx.cardview.widget.CardView>

</RelativeLayout>

2.2 Create/add CardView Programmatically in Android

You can also add a CardView programmatically using Java or Kotlin code.

Kotlin Java

content_copy light_mode remove

package com.androidchunk.hellocardview

import android.os.Bundle
import android.widget.LinearLayout
import androidx.appcompat.app.AppCompatActivity
import androidx.cardview.widget.CardView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //a layout
        val parent = findViewById<LinearLayout>(R.id.parent)
        
        val cardView = CardView(this)
        //set carView attributes here
        //add content here

        //add carView to parent container
        parent.addView(cardView)
    }
}

package com.androidchunk.hellocardview;

import android.os.Bundle;
import android.widget.LinearLayout;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.cardview.widget.CardView;

class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //a layout
        LinearLayout parent = findViewById(R.id.parent);

        CardView cardView = new CardView(this);
        //set carView attributes here
        //add content here

        //add carView to parent container
        parent.addView(cardView);
    }
}

3. CardView Attributes

Attribute	Description
app:cardElevation	Sets the elevation (z-axis) of the card
app:cardMaxElevation	It is used to set the maximum elevation (z-axis) of the card
app:cardCornerRadius	Sets the radius of the corners of the card
app:cardBackgroundColor	Used to Set the background color of the card
app:cardPreventCornerOverlap	Indicates whether to prevent corner overlapping of the card
app:cardUseCompatPadding	Indicates whether to use the compatibility padding for the card
app:contentPadding	Sets the padding for the content inside the card
app:contentPaddingTop	Sets the padding for the Top of the content inside the card
app:contentPaddingBottom	Sets the padding for the bottom of the content inside the card
app:contentPaddingLeft	Sets the padding for the left side of the content inside the card
app:contentPaddingRight	Sets the padding for the right side of the content inside the card

4. Android CardView Example

This is a simple example made with Android CardView.

Step 4.1: Create New Project

Create a new project in Android Studio from File ⇒ New Project and select Empty Activity from the templates.

Step 4.2: Add CardView to the XML Layout (UI)

First, make sure that your project has the CardView dependency in your app’s build.gradle file.

Groovy

content_copy light_mode remove

   ...
   ...
   ...

dependencies {
    ...
    ...
    ...
    implementation 'com.google.android.material:material:1.8.0'
}

We have used some icons for this example, You can download it from the link given below.

Dashboard-Icons Download

Background resource file for decorating the Dashboard menu icons.

XML

content_copy light_mode remove

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="@color/color_1" />
</shape>

Colors Resources

XML

content_copy light_mode remove

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="color_1">#AD1457</color>
</resources>

Strings Resources

XML

content_copy light_mode remove

<resources>
    <string name="app_name">Hello CardView</string>
    <string name="report">Report</string>
    <string name="product">Product</string>
    <string name="sell">Sell</string>
    <string name="purchase">Purchase</string>
    <string name="customer">Customer</string>
    <string name="payment">Payment</string>
</resources>

Activity Layout File

Ok, now let’s add the CardView from the palette to the layout design. We have designed a simple dashboard for the admin.

XML

content_copy light_mode remove

<?xml version="1.0" encoding="utf-8"?>
<GridLayout 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:background="#E8E8E8"
    android:columnCount="2"
    android:padding="15dp"
    android:rowCount="3"
    tools:context=".MainActivity">

    <androidx.cardview.widget.CardView
        android:id="@+id/reportCardView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="center"
        android:onClick="onCardClicked"
        app:cardBackgroundColor="#FFFFFF"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="?attr/selectableItemBackground"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@drawable/bg_1"
                android:padding="10dp"
                android:src="@drawable/ic_report"
                tools:ignore="ContentDescription" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/report"
                android:textAlignment="center"
                android:textAllCaps="true"
                android:textColor="@color/color_1"
                android:textSize="18sp" />
        </LinearLayout>

    </androidx.cardview.widget.CardView>


    <androidx.cardview.widget.CardView
        android:id="@+id/productCardView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="center"
        android:onClick="onCardClicked"
        app:cardBackgroundColor="#FFFFFF"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="?attr/selectableItemBackground"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@drawable/bg_1"
                android:padding="10dp"
                android:src="@drawable/ic_product"
                tools:ignore="ContentDescription" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/product"
                android:textAlignment="center"
                android:textAllCaps="true"
                android:textColor="@color/color_1"
                android:textSize="18sp" />
        </LinearLayout>

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/sellCardView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="center"
        android:onClick="onCardClicked"
        app:cardBackgroundColor="#FFFFFF"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="?attr/selectableItemBackground"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@drawable/bg_1"
                android:padding="10dp"
                android:src="@drawable/ic_sell"
                tools:ignore="ContentDescription" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/sell"
                android:textAlignment="center"
                android:textAllCaps="true"
                android:textColor="@color/color_1"
                android:textSize="18sp" />
        </LinearLayout>

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/purchaseCardView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="center"
        android:onClick="onCardClicked"
        app:cardBackgroundColor="#FFFFFF"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="?attr/selectableItemBackground"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@drawable/bg_1"
                android:padding="10dp"
                android:src="@drawable/ic_purchase"
                tools:ignore="ContentDescription" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/purchase"
                android:textAlignment="center"
                android:textAllCaps="true"
                android:textColor="@color/color_1"
                android:textSize="18sp" />
        </LinearLayout>

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/customerCardView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="center"
        android:onClick="onCardClicked"
        app:cardBackgroundColor="#FFFFFF"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp"
        app:cardMaxElevation="50dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="?attr/selectableItemBackground"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@drawable/bg_1"
                android:padding="10dp"
                android:src="@drawable/ic_customer"
                tools:ignore="ContentDescription" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/customer"
                android:textAlignment="center"
                android:textAllCaps="true"
                android:textColor="@color/color_1"
                android:textSize="18sp" />
        </LinearLayout>

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/paymentCardView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="center"
        android:onClick="onCardClicked"
        app:cardBackgroundColor="#FFFFFF"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="?attr/selectableItemBackground"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@drawable/bg_1"
                android:padding="10dp"
                android:src="@drawable/ic_payment"
                tools:ignore="ContentDescription" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/payment"
                android:textAlignment="center"
                android:textAllCaps="true"
                android:textColor="@color/color_1"
                android:textSize="18sp" />
        </LinearLayout>

    </androidx.cardview.widget.CardView>
</GridLayout>

Step 4.4: Update Activity File

Finally, open the Activity file and create a method that is invoked when the user clicks on the card.

Kotlin Java

content_copy light_mode remove

package com.androidchunk.hellocardview

import android.os.Bundle
import android.view.View
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.cardview.widget.CardView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    //This method will be invoked on clicking the card view
    fun onCardClicked(view: View) {
        if (view.id != View.NO_ID && view is CardView) {
            val id = view.getId()
            if (id == R.id.reportCardView) {
                Toast.makeText(this, "Report Card clicked", Toast.LENGTH_SHORT).show()
            } else if (id == R.id.productCardView) {
                Toast.makeText(this, "Report Card clicked", Toast.LENGTH_SHORT).show()
            } else if (id == R.id.sellCardView) {
                Toast.makeText(this, "Sell Card clicked", Toast.LENGTH_SHORT).show()
            } else if (id == R.id.purchaseCardView) {
                Toast.makeText(this, "Purchase Card clicked", Toast.LENGTH_SHORT).show()
            } else if (id == R.id.customerCardView) {
                Toast.makeText(this, "Customer Card clicked", Toast.LENGTH_SHORT).show()
            } else if (id == R.id.paymentCardView) {
                Toast.makeText(this, "Payment Card clicked", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

package com.androidchunk.hellocardview;

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

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.cardview.widget.CardView;

class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    //This method will be invoked on clicking the card view
    public void onCardClicked(View view) {
        if (view.getId() != View.NO_ID && view instanceof CardView) {
            int id = view.getId();
            if (id == R.id.reportCardView) {
                Toast.makeText(this, "Report Card clicked", Toast.LENGTH_SHORT).show();
            } else if (id == R.id.productCardView) {
                Toast.makeText(this, "Report Card clicked", Toast.LENGTH_SHORT).show();
            } else if (id == R.id.sellCardView) {
                Toast.makeText(this, "Sell Card clicked", Toast.LENGTH_SHORT).show();
            } else if (id == R.id.purchaseCardView) {
                Toast.makeText(this, "Purchase Card clicked", Toast.LENGTH_SHORT).show();
            } else if (id == R.id.customerCardView) {
                Toast.makeText(this, "Customer Card clicked", Toast.LENGTH_SHORT).show();
            } else if (id == R.id.paymentCardView) {
                Toast.makeText(this, "Payment Card clicked", Toast.LENGTH_SHORT).show();
            }
        }
    }
}

Run the application and check the output.

Step 4.5: Output

Happy coding!

Android CardView with Example

1. What is CardView?

2. Create/add CardView in Android Studio

2.1 Create/add CardView in XML layout file

2.2 Create/add CardView Programmatically in Android

3. CardView Attributes

4. Android CardView Example

Step 4.1: Create New Project

Step 4.2: Add CardView to the XML Layout (UI)

Step 4.4: Update Activity File

Step 4.5: Output

Leave a Reply Cancel reply

Related Posts