Android CardView Example – Setup, Customization, and Usage

CardView is a Material-design component in Android that provides a consistent layout container with rounded corners, elevation, shadows, and customizable styling. It’s ideal for lists, cards, and panel UIs that group related content.

This article walks you through how to integrate CardView into your project, design card layouts, and use it effectively with RecyclerView and other UI patterns.

What Is CardView?

CardView is a UI widget provided by the AndroidX CardView library. It wraps content inside a card with elevation, rounded corners, and shadow effects that align with Material Design principles.

It excels in:

• Creating visually distinct content cards
• Highlighting grouped information
• Pairing with lists like RecyclerView

Add CardView Dependency

To use CardView in your project, add the following dependency in your app module’s build.gradle:

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

Sync your project after adding this.

Basic CardView in XML

Below is the simplest CardView usage:

<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    card_view:cardCornerRadius="8dp"
    card_view:cardElevation="4dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <TextView
            android:id="@+id/tvTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Card Title"
            android:textSize="18sp"
            android:textStyle="bold"/>

        <TextView
            android:id="@+id/tvDescription"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="This is a description inside a CardView."/>
    </LinearLayout>
</androidx.cardview.widget.CardView>

Explanation:

• cardCornerRadius defines rounded corner radius
• cardElevation adds shadow depth
• Content goes inside a nested layout such as LinearLayout

CardView Attributes You Should Know

Example:

card_view:cardUseCompatPadding="true"
card_view:cardBackgroundColor="@color/cardBackground"

Using CardView With RecyclerView

CardView shines when paired with RecyclerView for list UIs such as feeds, profiles, or item lists.

Create Item Layout (card_item.xml)

<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    card_view:cardCornerRadius="8dp"
    card_view:cardElevation="6dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="12dp">

        <TextView
            android:id="@+id/tvCardTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:textSize="16sp"/>

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

Adapter Implementation

public class CardAdapter extends RecyclerView.Adapter<CardAdapter.CardViewHolder> {

    private final List<String> items;

    public CardAdapter(List<String> items) {
        this.items = items;
    }

    @Override
    public CardViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
            .inflate(R.layout.card_item, parent, false);
        return new CardViewHolder(view);
    }

    @Override
    public void onBindViewHolder(CardViewHolder holder, int position) {
        holder.tvTitle.setText(items.get(position));
    }

    @Override
    public int getItemCount() {
        return items.size();
    }

    static class CardViewHolder extends RecyclerView.ViewHolder {
        TextView tvTitle, tvSubtitle;

        CardViewHolder(View itemView) {
            super(itemView);
            tvTitle = itemView.findViewById(R.id.tvCardTitle);
            tvSubtitle = itemView.findViewById(R.id.tvCardSubtitle);
        }
    }
}

Initialize RecyclerView With CardAdapter

RecyclerView recyclerView = findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
CardAdapter adapter = new CardAdapter(Arrays.asList("Item 1", "Item 2", "Item 3"));
recyclerView.setAdapter(adapter);

This renders card items in a vertical list.

Customizing CardView Appearance

You can style cards with colors, margins, background shapes, and padding:

Custom Shape (optional) in res/drawable/card_shape.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white"/>
    <corners android:radius="12dp"/>
</shape>

Apply it:

card_view:cardBackgroundColor="@color/white"
android:foreground="@drawable/card_shape"

This gives better visual polish.

Performance Considerations

From real production engineering experience:

• Avoid deep nested layouts inside CardView — keep hierarchy flat
• Use cardUseCompatPadding="true" for consistent elevation on older devices
• Use DiffUtil with RecyclerView for dynamic list updates
• For large image cards, use optimized image loaders (Glide/Coil) outside of CardView logic

These practices keep rendering smooth and memory efficient.

Best Practices

• Use ConstraintLayout inside CardView for complex UIs
• Use styles/themes for consistent card appearance
• Avoid updating UI directly inside Adapter — use ViewModel/LiveData patterns for cleaner architecture

Common Issues and Fixes

Shadows not visible on older devices
✔ Enable cardUseCompatPadding="true"

Content overlaps rounded corners
✔ Use cardPreventCornerOverlap="true"

Card elevation inconsistent
✔ Test on different API levels — elevation rendering varies by device

Summary

CardView is a versatile UI component for grouping related content with Material-style visuals. Whether used standalone or inside a RecyclerView, it helps create reusable, consistent, and aesthetically pleasing content panels. With proper elevation, styling, and flat view hierarchies, CardView can be a central part of modern Android UI.