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 {
    implementation("androidx.cardview:cardview:1.0.0")
}

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"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    ... >
    <!-- A CardView that contains a TextView -->
    <androidx.cardview.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </androidx.cardview.widget.CardView>
</LinearLayout>

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 {
        google()
        mavenCentral()
    }
}

allprojects {
    repositories {
        google()
        mavenCentral()
    }
}

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"
    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">

    <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>

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.

Conclusion

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.