CardView in Android With Example
Last Updated :
11 Feb, 2025
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 RecyclerView. 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.
Some Important XML attributes of CardView
Attribute | Description |
|---|
app:cardCornerRadius | Sets a corner radius for the card |
| app:cardBackgroundColor | Sets a background color for the card |
| app:cardElevation | Sets an elevation to the card. This is used to add a drop shadow to the card |
app:cardMaxElevation | Sets a max elevation for the card |
app:UseCompatPadding | Used to define a space around the view which prevents the view's elevation to get clipped by the parent view |
|
Implementation
Step 1: Create a new Android Studio Project.
For creating a new Android Studio Project. Click on File>New>New Project.
Note: Make sure to choose a preferred language as Java or Koltin and select Empty Activity.
Step 2: Add the necessary dependency in build.gradle file.
Navigate to Gradle Scripts then to build.gradle(module level) and then add below dependency to it.
implementation ("androidx.cardview:cardview:1.0.0")After adding this dependency you will get to see a popup option at top right corner which mentions "Sync now". Click on that option to sync your project.
Step 3: Add google repository in the settings.gradle.kts file of the application project if by default it is not there
buildscript {
repositories {
google()
mavenCentral()
}
}Step 4: Now let's create a simple CardView.
Navigate to app > res > layout > activity_main.xml then add the following code to create a new CardView widget.
activity_main.xml:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
tools:context=".MainActivity">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="24dp"
app:cardElevation="24dp"
app:cardCornerRadius="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/imageView2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginBottom="24dp"
android:src="@drawable/gfg_logo"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GeeksforGeeks"
android:textSize="24sp"
android:textColor="@color/black"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/imageView2"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Output: Now run your app on your emulator or device you will get to see the output.
For learning more about the topic refer to these articles: