HomeTutorialsCardView in Android With Example

CardView in Android With Example

CardView, a UI framework introduced in Material Design, is becoming a popular choice for Android developers. As a UI tool that presents information in a consistent card-like format, it greatly enhances the visual appeal of Android applications. In this tutorial, we will explore in detail how to use CardView in Android with examples, covering its features, implementation process, and customization options.

Overview of CardView

CardView, a part of the AndroidX library, is a UI toolkit recommended for Android applications. It consistently provides a rounded corner layout and specific elevation, giving your app’s UI a rich and professional look.

The CardView widget serves as a ViewGroup that can host different views, making it versatile enough to fit various design requirements. Moreover, CardView extends FrameLayout, allowing views to be displayed on top of each other.

The consistent look of CardView makes it suitable for displaying information inside similar styled containers, such as lists, where each item’s information is housed in a card-like format.

Setting Up Dependencies for CardView

Before you can begin working with CardView, you need to add the necessary dependencies to your project’s build.gradle file.

If you’re using Groovy, add the following dependency:

dependencies {
    implementation "androidx.cardview:cardview:1.0.0"

If you’re using Kotlin, the dependency would look like this:

dependencies {

After adding the dependency, make sure to sync your project to ensure the changes are properly integrated.

Creating a CardView

With the dependencies set up, you can now start using CardView. First, you need to add it to your layout file. Here, CardView serves as a ViewGroup containing other views.

A simple CardView with a single TextView might look like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ... >
    <!-- A CardView that contains a TextView -->

            android:layout_height="match_parent" />

In this example, the CardView contains a single TextView that displays some information to the user. The card_view:cardCornerRadius attribute gives the card rounded corners, and the android:layout_gravity attribute centers the card in the layout.

Must Read: Android Fragment Lifecycle

Customizing CardView

CardView offers several properties to customize its appearance, including:

  • card_view:cardCornerRadius: Sets the corner radius in your layouts.
  • CardView.setRadius: Sets the corner radius in your code.
  • card_view:cardBackgroundColor: Sets the background color of a card.

These properties allow you to tailor the look and feel of the CardView to match the overall design of your app. For instance, you can provide a custom elevation for a card with the card_view:cardElevation attribute. This could result in a more pronounced shadow with a larger elevation, and conversely, a lower elevation would result in a lighter shadow.

Implementing CardView: A Step-by-Step Guide

To illustrate how to implement CardView in Android, let’s take a look at a step-by-step guide.

Step 1: Create a New Android Studio Project

First, create a new Android Studio Project. Make sure to select Java as the language and choose Empty Activity.

Step 2: Add Material Dependency

Next, navigate to Gradle Scripts, then to build.gradle(app) and add the following dependency:

implementation 'com.google.android.material:material:1.2.1'

After adding the dependency, you’ll see a sync now popup option in the top right corner. Click on that to sync your project.

Step 3: Add Google Repository

If the Google repository isn’t already added to your build.gradle file, you’ll need to add it. All Jetpack components are available in the Google Maven repository.

Here’s how your build.gradle file should look:

buildscript {
    repositories {

allprojects {
    repositories {

Step 4: Create a Simple CardView

Navigate to app>res>layout>activity_main.xml and add a CardView widget.

Here’s an example of how to create a simple CardView with an ImageView and TextView:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"






In this example, the CardView contains an ImageView for displaying an image and a TextView for displaying some text. The various app:card attributes are used to customize the appearance of the CardView, such as its elevation, corner radius, and background color.

Step 5: Run Your App

Once you’ve set up your CardView, you can run your app on your emulator or device to see the result. If everything is correctly set up, you should see a CardView with an image and text.

Key Attributes of CardView

As you’ve seen in the above example, CardView offers several attributes that allow you to customize its appearance. Here are some of the key attributes:

  1. cardBackgroundColor: Sets the background color of the card.
  2. cardElevation: Defines the elevation of the card, which affects the shadow.
  3. cardCornerRadius: Sets the radius of the card corners.
  4. cardUseCompatPadding: If true, adds padding to the card so the UI looks good even when the gravity isn’t set to center.

These attributes give you the flexibility to design cards that perfectly fit your app’s design and provide a consistent look and feel across the platform.


CardView is a powerful UI toolkit that helps create visually appealing Android apps. By learning how to use CardView in Android with examples, you can greatly enhance your app’s user interface and provide a better user experience. Whether you’re displaying data in a list or creating a complex layout, CardView offers the flexibility and customization options to meet your needs.

Related Articles

Latest news

Unveiling the Darkest Elements in Hogwarts Legacy: Top 10 Elements

Hogwarts Legacy (Buy Now) is a jewel of a game for all the Harry Potter fanbase, inviting them to experience the magical universe of...

Dead Island 2 Cable Guy’s Van Keys location

As you embark on your journey in Dead Island 2, you'll stumble upon a mysterious vehicle known as the Cable Guy Van. This van...

iotty Smart Switch – Complete Review

The smart home industry is rapidly evolving with a plethora of innovative devices vying for consumers' attention. Among these, the iotty Smart Switch stands...

How To Fix Snapchat Support Code SS06

Every Snapchat user cherishes the joy of sharing moments, using filters, and connecting with friends. However, this joy can be interrupted by various glitches...

Can You Refund Fortnite Accounts?

Fortnite, the battle royale game developed by Epic Games, has taken the gaming world by storm since its inception. With its captivating gameplay, interactive...

Stay in the Loop

Get the weekly email from Android Hire that makes reading the news actually enjoyable. Join our mailing list to stay in the loop to stay informed, for free.