RecyclerView and CardView Tutorial for Beginners With RecyclerView Example

Introduction

If you love to play with applications with Grids and Lists, Android Lollipop has launched two new views RecyclerView and CardView which are very easy to use and have an excellent look and feel. RecyclerView is the new version of ListView, which makes use of Adapter as other Views. It is more advanced with great performance; it can render massive datasets and scroll very efficiently. For consistency, you can design a card with the help of CardView in the RecyclerView. This tutorial will explain the use of RecyclerView and CardView with the help of RecyclerView example.

Support For RecyclerView

Android RecyclerView is a component of Android Lollipop, but it doesn’t mean that you can not use it with the older versions. With the help of V7 Support Library, older versions can also support RecyclerView. If you want to support older versions, you just need to add dependencies for RecyclerView and CardView to the build.gradle file

CardView and RecyclerView Example

Click Here to Download this Example

Before starting the RecyclerView example, set-up the environment for RecyclerView. Add dependencies to the gradle file.

In the dependencies of build.gradle(Module: app), add dependencies for CardView and RecyclerView.

Layout For CardView

Define the CardView in XML layout file will then be used inside RecyclerView as a single list item. Using CardLayout inside RecyclerView is setting up the design of a RecyclerView.

CardView Design layout
CardView Design layout

Add CardView widget inside the newly created contact_card.xml file. Adjust the Name and Contact TextViews to be used as RecyclerView’s item.

Layout for RecyclerView

In activity_main.xml create a recycler view. Add scroll bar to the RecyclerView example. You can have any other layout file to display RecyclerView.

Create DataModel to Populate RecyclerView

DataModel is the model for the data you want to place in the RecyclerView. This RecyclerView example needs username and contact information, so the DataModel contains only two fields i.e. username and contact.

Create a new class, DataModel.java with two private fields name and contact, also add getters along with a single setter as parameterised constructor.

Data to Initialize Data Model

You must have some data which is to be displayed in the RecyclerView. So to keep the data static and simple, here complete data is initialized in a class to use in RecyclerView.

Create Recycler Adapter

Create a Recycler Adapter class which extends RecyclerView.Adapter<adapter.MyViewHolder>.

Implement MyViewHolder subclass which extends RecyclerView.ViewHolder. Also, create a method MyViewHolder(View itemView) which is previously used as Adapter type i.e. RecyclerView.Adapter<Adapter.MyViewHolder> and create the instances of TextViews of the CardView.

Implement onCreateViewHolder(ViewGroup parent, int viewType), onBindViewHolder(final MyViewHolder holder, final int listPosition), and getItemCount() overridden methods.

In onCreateViewHolder(ViewGroup parent, int viewType) inflate CardView and declare onClickListener for MainActivity.

Complete Code for Adapter.java

Now the complete code for Adapter.java is

Populating RecyclerView

In MainActivity populate RecyclerView with the help of Adapter class.

To implement click listener, create a subclass MyOnClickListener which implements View.OnClickListener and implement the abstract methods of the interface. For understandability, this RecyclerView example only displays the name in the Toast.

Complete Code for MainActivity.java

RecyclerView Example Showing Toast on item click
RecyclerView Example Showing Toast on item click

 

Download RecyclerView Demo Project in Android Studio

Hope that you like this tutorial. Stay tuned for more upcoming tutorials. Stay Blessed!

 

Leave a Reply

Your email address will not be published. Required fields are marked *