Android RecyclerView & CardView Tutorial — Modern List UI in Android

RecyclerView is one of the most important UI components in Android development.

It is used to efficiently display:

• Large lists
• Dynamic data
• Grid layouts
• Chats
• Feeds
• E-commerce product lists

RecyclerView provides much better performance and flexibility compared to the old ListView component.

---

What Is RecyclerView?

RecyclerView is a flexible and advanced version of ListView introduced by Android Jetpack libraries.

RecyclerView:

• Reuses item views efficiently
• Improves scrolling performance
• Supports animations
• Supports multiple layouts
• Works with adapters

---

What Is CardView?

CardView is a UI component that displays content inside material design cards.

CardView provides:

• Rounded corners
• Elevation shadows
• Material design feel
• Beautiful list presentation

---

RecyclerView vs ListView

ListView	RecyclerView
Older component	Modern component
Limited optimization	Highly optimized
Less flexible	Highly customizable
No ViewHolder by default	Uses ViewHolder pattern

---

Modern AndroidX Dependencies

Inside:

build.gradle

Add:

implementation
'androidx.recyclerview:recyclerview:1.3.2'

implementation
'androidx.cardview:cardview:1.0.0'

implementation
'com.github.bumptech.glide:glide:4.16.0'

---

Important Modernization

Older tutorials use:

android.support.v7.widget.RecyclerView

which is deprecated.

Modern Android applications should use:

androidx.recyclerview.widget.RecyclerView

---

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

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView

        android:id="@+id/recyclerView"

        android:layout_width="0dp"

        android:layout_height="0dp"

        android:padding="8dp"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

---

Create Item Layout

Create:

item_example.xml

---

Modern CardView Item Layout

<?xml version="1.0" encoding="utf-8"?>

<androidx.cardview.widget.CardView

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

    xmlns:app=
    "http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:layout_margin="8dp"

    app:cardCornerRadius="12dp"

    app:cardElevation="6dp">

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal"

        android:padding="12dp">

        <ImageView

            android:id="@+id/imageView"

            android:layout_width="60dp"

            android:layout_height="60dp"

            android:scaleType="centerCrop"/>

        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:orientation="vertical"

            android:layout_marginStart="12dp">

            <TextView

                android:id="@+id/textView"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Android"

                android:textStyle="bold"

                android:textSize="20sp"/>

            <TextView

                android:id="@+id/textView2"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="RecyclerView Example"

                android:textSize="15sp"/>

        </LinearLayout>

    </LinearLayout>

</androidx.cardview.widget.CardView>

---

Create Model Class

Create:

ExampleItem.java

---

ExampleItem.java

public class ExampleItem {

    private int imageResource;

    private String text1;

    private String text2;

    public ExampleItem(
            int imageResource,
            String text1,
            String text2
    ) {

        this.imageResource = imageResource;

        this.text1 = text1;

        this.text2 = text2;
    }

    public int getImageResource() {
        return imageResource;
    }

    public String getText1() {
        return text1;
    }

    public String getText2() {
        return text2;
    }
}

---

Create RecyclerView Adapter

RecyclerView requires:

• Adapter
• ViewHolder
• LayoutManager

---

Modern RecyclerView Adapter

public class RecyclerViewAdapter extends
RecyclerView.Adapter<
RecyclerViewAdapter.ViewHolder> {

    private ArrayList<ExampleItem>
            exampleList;

    private Context context;

    public RecyclerViewAdapter(
            ArrayList<ExampleItem>
                    exampleList,
            Context context
    ) {

        this.exampleList = exampleList;

        this.context = context;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(
            @NonNull ViewGroup parent,
            int viewType
    ) {

        View view =
                LayoutInflater.from(
                        parent.getContext()
                ).inflate(
                        R.layout.item_example,
                        parent,
                        false
                );

        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(
            @NonNull ViewHolder holder,
            int position
    ) {

        ExampleItem currentItem =
                exampleList.get(position);

        holder.textView.setText(
                currentItem.getText1()
        );

        holder.textView2.setText(
                currentItem.getText2()
        );

        Glide.with(context)
                .load(
                        currentItem
                                .getImageResource()
                )
                .into(holder.imageView);
    }

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

    public static class ViewHolder
            extends RecyclerView.ViewHolder {

        ImageView imageView;

        TextView textView;

        TextView textView2;

        public ViewHolder(
                @NonNull View itemView
        ) {

            super(itemView);

            imageView =
                    itemView.findViewById(
                            R.id.imageView
                    );

            textView =
                    itemView.findViewById(
                            R.id.textView
                    );

            textView2 =
                    itemView.findViewById(
                            R.id.textView2
                    );
        }
    }
}

---

Setup RecyclerView in MainActivity

RecyclerView recyclerView;

RecyclerViewAdapter adapter;

ArrayList<ExampleItem>
        exampleList;

---

MainActivity.java

public class MainActivity
        extends AppCompatActivity {

    RecyclerView recyclerView;

    RecyclerViewAdapter adapter;

    ArrayList<ExampleItem>
            exampleList;

    @Override
    protected void onCreate(
            Bundle savedInstanceState
    ) {

        super.onCreate(
                savedInstanceState
        );

        setContentView(
                R.layout.activity_main
        );

        recyclerView =
                findViewById(
                        R.id.recyclerView
                );

        exampleList =
                new ArrayList<>();

        exampleList.add(
                new ExampleItem(
                        R.drawable.ic_android,
                        "Android",
                        "RecyclerView"
                )
        );

        exampleList.add(
                new ExampleItem(
                        R.drawable.ic_music,
                        "Music",
                        "Top Songs"
                )
        );

        exampleList.add(
                new ExampleItem(
                        R.drawable.ic_work,
                        "Tasks",
                        "Workout"
                )
        );

        adapter =
                new RecyclerViewAdapter(
                        exampleList,
                        this
                );

        recyclerView.setHasFixedSize(
                true
        );

        recyclerView.setLayoutManager(
                new LinearLayoutManager(
                        this
                )
        );

        recyclerView.setAdapter(
                adapter
        );
    }
}

---

What Is ViewHolder?

ViewHolder improves performance by:

• Reusing item views
• Reducing findViewById calls
• Optimizing scrolling

---

What Is LayoutManager?

LayoutManager controls item arrangement.

---

Types of LayoutManagers

• LinearLayoutManager
• GridLayoutManager
• StaggeredGridLayoutManager

---

LinearLayoutManager

Displays items vertically or horizontally.

---

GridLayoutManager

Displays items in grid format.

---

StaggeredGridLayoutManager

Displays Pinterest-style staggered layouts.

---

Why RecyclerView Is Fast

RecyclerView improves performance using:

• View recycling
• ViewHolder pattern
• Optimized rendering
• Efficient animations

---

Modern Android Recommendations

Modern Android applications commonly use:

• RecyclerView
• ViewBinding
• DiffUtil
• ListAdapter
• Paging 3
• Jetpack Compose LazyColumn

---

RecyclerView + DiffUtil

DiffUtil improves RecyclerView performance by updating only changed items.

---

What Is ListAdapter?

ListAdapter is a modern RecyclerView adapter with built-in DiffUtil support.

---

Jetpack Compose Alternative

Modern Android apps can also use:

LazyColumn

inside Jetpack Compose.

---

Common Beginner Mistakes

1. Forgetting LayoutManager

RecyclerView requires a LayoutManager.

---

2. Using notifyDataSetChanged Excessively

Use DiffUtil for efficient updates.

---

3. Loading Large Images Incorrectly

Use Glide or Coil for image optimization.

---

Best Practices

• Use ViewBinding
• Use DiffUtil
• Use ListAdapter
• Optimize images
• Keep layouts lightweight

---

FAQ

Why use RecyclerView?

RecyclerView provides high-performance scrolling and flexible list UI.

---

Is ListView deprecated?

ListView still works but RecyclerView is recommended.

---

What replaces RecyclerView in Compose?

Jetpack Compose uses LazyColumn and LazyRow.

---

Conclusion

RecyclerView and CardView are essential Android UI components for building scalable, responsive, and modern list interfaces.

Modern Android applications should combine RecyclerView, DiffUtil, ViewBinding, Material Design, and optimized adapters for production-grade performance.

---

About the Author

Salil Jha is a Full Stack and Mobile Developer specializing in Android, React Native, fintech systems, scalable SaaS platforms, and developer tooling products.

CodeChain Dev — Build Modern Products. Solve Real Problems.