CardView in Android With Example

08 Jun, 2022
CardView is a new widget in Android that can be used to display any sort of data by providing a rounded corner layout along with a specific elevation. CardView is the view that can display views on top of each other. The main usage of CardView is that it helps to give a rich feel and look to the UI design. This widget can be easily seen in many different Android Apps. CardView can be used for creating items in listview or inside Recycler View. The best part about CardView is that it extends Framelayout and it can be displayed on all platforms of Android. Now we will see the simple example of CardView implementation. 
Implementation: CardView
Step 1: Create a new Android Studio Project. 
For creating a new Android Studio Project. Click on File>New>New Project. Make sure to keep your language as JAVA and select Empty Activity.
Step 2: Add material dependency in build.gradle file.
Navigate to Gradle Scripts then to build.gradle(app) and then add below dependency to it. 
implementation 'com.google.android.material:material:1.2.1'
After adding this dependency you will get to see a popup option at top right corner which displays sync now. Click on that option to sync your project. 
Step 3: Add google repository in the build.gradle file of the application project if by default it is not there
buildscript {
repositories {
   google()
   mavenCentral()
}
All Jetpack components are available in the Google Maven repository, include them in the build.gradle file
allprojects {
repositories {
   google()
  mavenCentral()
}
}
Step 4: Now we will create a simple CardView. 
Navigate to app>res>layout>activity_main.xml then create new CardView widget to it. 
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:app="http://schemas.android.com/apk/res-auto"    tools:context=".MainActivity"> <androidx.cardview.widget.CardView    android:layout_width="match_parent"    android:layout_height="wrap_content"    app:cardElevation="10dp"    app:cardCornerRadius="20dp"    android:layout_margin="10dp"    app:cardBackgroundColor="@color/white"    app:cardMaxElevation="12dp"    app:cardPreventCornerOverlap="true"    app:cardUseCompatPadding="true"    >     <!--    In the above cardview widget    cardelevation property will give elevation to your card view    card corner radius will provide radius to your card view    card background color will give background color to your card view    card max elevation will give the cardview maximum elevation    card prevent corner overlap will add padding to CardView on v20 and before to prevent intersections between the Card content and rounded corners.    card use compact padding will add padding in API v21+ as well to have the same measurements with previous versions.    below are the two widgets imageview and text view we are displaying inside our card view.    -->    <ImageView        android:layout_width="200dp"        android:layout_height="200dp"        android:layout_gravity="center"        android:src="@drawable/gfgimage"        android:layout_margin="10dp"        android:id="@+id/img"        android:contentDescription="@string/app_name" />     <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/app_name"        android:layout_gravity="bottom|center_horizontal"        android:layout_marginTop="20dp"        android:layout_marginBottom="20dp"        android:textSize="20sp"        android:textStyle="bold"        />   </androidx.cardview.widget.CardView> </RelativeLayout>
Step 5: Now run your app on your emulator or device you will get to see the output. 
Output: 
hemantjain99
Android-View
Picked
Technical Scripter 2020
Android
Technical Scripter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Android SDK and it's Components
Android RecyclerView in Kotlin
Android Project folder Structure
Broadcast Receiver in Android With Example
Flutter - Custom Bottom Navigation Bar
How to Update Gradle in Android Studio?
Navigation Drawer in Android
Retrofit with Kotlin Coroutine in Android
Android Projects - From Basic to Advanced Level
How to Create and Add Data to SQLite Database in Android?