How to Make CardView Checkable In Android? - GeeksforGeeks

28 Jan, 2021
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 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.Bundleimport androidx.appcompat.app.AppCompatActivityimport com.google.android.material.snackbar.Snackbarimport 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()        }    }}
android
Technical Scripter 2020
Android
Kotlin
Technical Scripter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to Read Data from SQLite Database in Android?
How to Delete Data in SQLite Database in Android?
MVP (Model View Presenter) Architecture Pattern in Android with Example
How to Change the Background Color After Clicking the Button in Android?
Android | How to Create/Start a New Project in Android Studio?
Android Menus
Android UI Layouts
Kotlin Array
Kotlin Setters and Getters
Notifications in Android with Example