How to Make CardView Checkable In Android? (original) (raw)
Last Updated : 23 Jul, 2025
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. But, Kotlin Android Extensions is deprecated, so there is no need to add this now.
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 `
<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"
android:theme="@style/Theme.MaterialComponents.DayNight"
>
<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:textColor="#000000"
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:textColor="#000000"
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"
android:theme="@style/Theme.MaterialComponents.DayNight">
<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:textColor="#000000"
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:textColor="#000000"
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"
android:theme="@style/Theme.MaterialComponents.DayNight">
<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:textColor="#000000"
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"
android:textColor="#000000"/>
</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="@string/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 android.widget.Button import androidx.appcompat.app.AppCompatActivity import com.google.android.material.card.MaterialCardView import com.google.android.material.snackbar.Snackbar
class MainActivity : AppCompatActivity() {
lateinit var cardTajMahal: MaterialCardView
lateinit var cardStatueOfUnity: MaterialCardView
lateinit var cardLotusTemple: MaterialCardView
lateinit var btnWhatsSelected: Button
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
cardTajMahal = findViewById(R.id.cardTajMahal)
cardStatueOfUnity = findViewById(R.id.cardStatueOfUnity)
cardLotusTemple = findViewById(R.id.cardLotusTemple)
btnWhatsSelected = findViewById(R.id.btnWhatsSelected)
// 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()
}
}}
`