How to Change CardView Color When Selected in Android?
Last Updated :
08 Apr, 2023
CardView is a UI component in Android Studio that provides a simple way to display content with a raised or elevated appearance. It’s part of the Android Support Library, which means it’s compatible with Android devices running Android 5.0 (API level 21) or higher. A sample video is given below to get an idea about what we are going to do in this article.
Step-by-Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Working with the purple_bg.xml file
Navigate to the app > res > drawable > purple_bg.xml and add the below code to that file. Below is the code for the purple_bg.xml file.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< item
android:state_pressed = "true" >
< shape
android:shape = "rectangle" >
< corners
android:radius = "15dp" >
</ corners >
< gradient
android:startColor = "#615EE8"
android:endColor = "#7F6CEF" />
</ shape >
</ item >
</ selector >
|
Step 3: Working with the silver_bg.xml file
Navigate to the app > res > drawable > silver_bg.xml and add the below code to that file. Below is the code for the silver_bg.xml file.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< item >
< shape
android:shape = "rectangle" >
< corners
android:radius = "15dp" >
</ corners >
< gradient
android:startColor = "#F2F1F8"
android:endColor = "#E7E7FC" />
</ shape >
</ item >
</ selector >
|
Step 4: 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" ?>
< RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity" >
< androidx.cardview.widget.CardView
android:id = "@+id/cardView"
android:layout_width = "match_parent"
android:layout_height = "190dp"
android:layout_centerInParent = "true"
app:cardCornerRadius = "22dp"
app:cardUseCompatPadding = "true"
app:cardElevation = "4dp"
android:foreground = "@drawable/purple_bg"
android:clickable = "true" >
< LinearLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:background = "@drawable/silver_bg" >
</ LinearLayout >
</ androidx.cardview.widget.CardView >
< TextView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_below = "@+id/cardView"
android:gravity = "center"
android:text = "Changing Card Color on Click"
android:textStyle = "bold|italic"
android:textColor = "#2F8C46"
android:textSize = "20sp" />
</ RelativeLayout >
|
Step 5: Working with the MainActivity.java file
Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file.
Java
package com.anas.gfghover;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
|
Output:
Share your thoughts in the comments
Please Login to comment...