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 version = "1.0" encoding = "utf-8" ?>
<!--Constraint Layout as the parent layout--> < androidx.constraintlayout.widget.ConstraintLayout 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.
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()
}
}
} |