Android RecyclerView Tutorial

Last Updated on March 2, 2019 by Aram

A RecyclerView is a great a way to show a large list of UI elements in an efficient way. You can combine TextViews, Buttons, ImageViews or any other UI elements and display them

To make a RecyclerView work and display properly, you have to define 2 main components:

RecyclerView Adapter

The adapter’s main role is to populate the RecyclerView with the data through the needed layout. The RecyclerView Adapter forces the use of the ViewHolder Design Pattern, which means that there will be 3 methods to override and a class to extend from RecyclerView.ViewHolder :

  • onCreateViewHolder, which will be used to inflate the layout and create the holder)
  • onBindViewHolder, which will be used to bind the data with the RecyclerView’s item through the ViewHolder )
  • getItemCount, which is used to determine the number of items in the RecyclerView

The RecyclerView.ViewHolder class will provide the needed access to all the views within each row of the RecyclerView

Layout Manager

You have to provide a Layout Manager for the RecyclerView to be displayed on the screen.

The Layout Manager’s role is to organize the display of the item views and decide when to reuse views that are not being displayed (user has scrolled away from them).

You can use a LinearLayout Manager to have either a vertical or horizontal list of items, a GridLayout Manager to display your list in a grid view or a StaggeredGridLayout Manager, which will display the list in a grid view but the items won’t be organized evenly.

In this tutorial you will learn how to populate a RecycleView with in-memory collection. The same can apply for data from any source.

Note: This tutorial assumes you have a basic knowledge of RESTful APIs and how to consume them via Android through Retrofit library. Otherwise, you can check my tutorials about Retrofit in Android

Let’s get started

Open Android Studio and create a new Project, choose Empty Activity, then fill all the details with regards the app name, package name…etc. next hit finish and wait until Gradle finishes syncing and building the project.

Make sure the below exist in your app module’s build.gradle dependencies node

The first thing to start with when building a RecyclerView, is to prepare the layout that will represent each item in the RecyclerView.

Right click on layouts folder, and choose new then layout resource file and name it person_item and change the root element to LinearLayout (You can use whatever Layout element you prefer).

Below is the code for the person_item.xml layout. Important Note: the parent layout height should always remain wrap_content, if you set it as match_parent, then at runtime, only the first item of the data collection within the RecyclerView will appear because it will fill the whole screen and no other items will be visible.

Now that we have created our layout (View), let’s go ahead and create our model , which will hold the data that will be bound to our layout through the adapter.

Create a new package and name it models. Keeping your project structured within packages is quite important, it will help keep it well-organized and easy for future modifications.

Then inside the models package, create a new class and name it Person. It should look like the below:

After we have prepared both of the model and the view, now we are ready to build our adapter. This adapter will be used to connect the collection of persons with the person_item layout through the ViewHolder Design Pattern.

Let’s also create a package that will hold the adapters and inside it let’s create a class with name PersonsAdapter. Usually, in a real app, you will have to prepare multiple adapter, each would be used to serve a specific RecyclerView. Moreover, It is also great to group all your adapters inside a dedicated package.

Below is the code that you will need for the Adapter.

For the purpose of this tutorial and to stay focused on the RecyclerView topic I prepared a small class with name PersonsFactory, which would create an in-memory collection of persons so that we can use it within our RecyclerView. Usually, in the real scenarios you will be getting your data collection from API sources.

Note: If you would like to learn about retrieving data from API in Android, you can check my tutorial series

Now let’s add the RecyclerView UI Element inside the activity_main.xml layout file

Now let’s go to our MainActivity and match the puzzle pieces all together.

We want to display a list of persons on the screen upon the creation of MainActivity, see the code below:

The last statement adds a horizontal line seperater between each item in the recycler view.

Now your RecyclerView is ready to be displayed. Press the Run button from your Android Studio and get impressed with your amazing scrollable RecyclerView.

See the screen below:

Well done! With this tutorial you have learned about a very important UI component which is the RecyclerView in Android.

If you liked my article please share it with your network, and if you are having trouble understanding or even problems with code with regards setting up your RecyclerView, please feel free to share your comments with me.

You can also check this guide from android developer site, it also explains pretty well the RecyclerView with example. Check it out.

Bonus

For my wonderful readers, allow me to share with you this beautiful masterpiece by J.S.Bach, English Suite No 1 BWV 806 A Major played by András Schiff

Leave a Reply