How to Make CardView Checkable In Android?

In Android, We can make a CardView checkable, which can be really a useful feature. If we want the user to select some items and want to display the items that the user has chosen then this one is the most important feature for us. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Kotlin language. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Working with the Build.Gradle(App Level) File

Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section. 

implementation ‘com.google.android.material:material:1.1.0’

Add the kotlin android extensions inside the plugins { } tag.

plugins {

   ——–

   ——–

   id ‘kotlin-android-extensions’

}

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<?xml version="1.0" encoding="utf-8"?>
<!--Constraint Layout as the parent layout-->
<androidx.constraintlayout.widget.ConstraintLayout
    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="#CFCDCD"
    tools:context=".MainActivity">

    <!--Linear Layout as the child layout-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="15dp"
        tools:layout_editor_absoluteX="-16dp"
        tools:layout_editor_absoluteY="-287dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="Long Press to Check"
            android:textColor="#4CAF50"
            android:textSize="25sp"
            android:textStyle="bold" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="1">

            <!--CardView for Taj Mahal -->
            <com.google.android.material.card.MaterialCardView
                android:id="@+id/cardTajMahal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:layout_weight=".5"
                android:checkable="true"
                android:clickable="true"
                android:focusable="true"
                android:padding="4dp"
                app:cardBackgroundColor="@android:color/white"
                app:cardCornerRadius="7dp"
                app:cardElevation="3dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="5dp"
                        android:text="Taj Mahal"
                        android:textAppearance="@style/TextAppearance.AppCompat.Headline" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="5dp"
                        android:layout_marginTop="15dp"
                        android:text="It is Ivory White Marbel Statue on South Bank of Yamuna River"
                        android:textAppearance="@style/TextAppearance.AppCompat.Subhead" />

                </LinearLayout>

            </com.google.android.material.card.MaterialCardView>

            <!--CardView for Statue of Unity -->
            <com.google.android.material.card.MaterialCardView
                android:id="@+id/cardStatueOfUnity"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:layout_marginTop="20dp"
                android:layout_weight=".5"
                android:checkable="true"
                android:clickable="true"
                android:focusable="true"
                android:padding="4dp"
                app:cardBackgroundColor="@android:color/white"
                app:cardCornerRadius="7dp"
                app:cardElevation="3dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="5dp"
                        android:text="Statue Of Unity"
                        android:textAppearance="@style/TextAppearance.AppCompat.Headline" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="5dp"
                        android:layout_marginTop="15dp"
                        android:text="It is a statue of Indian Independence Activist
                                  Sardar Vallabh Bhai Patel"
                        android:textAppearance="@style/TextAppearance.AppCompat.Subhead" />
                </LinearLayout>

            </com.google.android.material.card.MaterialCardView>

        </LinearLayout>

        <!--Card View for Lotus Temple-->
        <com.google.android.material.card.MaterialCardView
            android:id="@+id/cardLotusTemple"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="25dp"
            android:layout_marginBottom="5dp"
            android:checkable="true"
            android:clickable="true"
            android:focusable="true"
            android:padding="4dp"
            app:cardBackgroundColor="@android:color/white"
            app:cardCornerRadius="7dp"
            app:cardElevation="3dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/txvLotusTemple"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="5dp"
                    android:text="Lotus Temple"
                    android:textAppearance="@style/TextAppearance.AppCompat.Headline" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="5dp"
                    android:layout_marginTop="15dp"
                    android:layout_marginBottom="15dp"
                    android:text="Notable for its flowerlike shape, located in Delhi, India, is a Baha'i House of worship that was dedicated in December 1986."
                    android:textAppearance="@style/TextAppearance.AppCompat.Subhead" />

            </LinearLayout>
        </com.google.android.material.card.MaterialCardView>

        <Button
            android:id="@+id/btnWhatsSelected"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:backgroundTint="#B13C3C"
            android:text="Show what's selected"
            android:textAllCaps="false"
            android:textSize="20sp" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.snackbar.Snackbar
import kotlinx.android.synthetic.main.activity_main.*

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

        // implementing the long click listener
        // for when pressed on card view
        cardTajMahal.setOnLongClickListener {
            // if the card view is checked,make
            // it unchecked and vice-versa
            cardTajMahal.isChecked = !cardTajMahal.isChecked
            true
        }

        // implementing the long click listener
        // for when pressed on card view
        cardStatueOfUnity.setOnLongClickListener {
            cardStatueOfUnity.isChecked = !cardStatueOfUnity.isChecked
            true
        }

        // implementing the long click listener
        // for when pressed on card view
        cardLotusTemple.setOnLongClickListener {
            cardLotusTemple.isChecked = !cardLotusTemple.isChecked
            true
        }

        btnWhatsSelected.setOnClickListener {
            // getting the info about which
            // card view has been selected
            var msg = ""
            if (cardTajMahal.isChecked) {
                msg += "'Taj Mahal' "
            }
            if (cardStatueOfUnity.isChecked) {
                msg += "'Statue Of Unity' "
            }
            if (cardTajMahal.isChecked) {
                msg += "'Lotus Temple' "
            }
            // snack bar is just like a toast msg
            Snackbar.make(it, " $msg Selected", Snackbar.LENGTH_LONG).show()
        }
    }
}

Output: