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:
