Android RecyclerView Tutorial


Photo Credit: James Wang - Android RecyclerView Tutorial

One of the latest widgets introduced in Android is RecyclerView. Many say its a replacement of existing ListView widget, also termed as ListView 2.0. I browsed though the entire world wide web, in search of a working Android RecyclerView example with explanation. Gotta say couldn’t find one. After a lot of struggle I finally made one and decided to write a tutorial for it my self. So here it goes, in this Android RecyclerView Tutorial I would demonstrate a working example of RecyclerView, with some basic functionality. Where I would show you how to include a RecyclerView into an Android app project with an onItemClick event.

Android RecyclerView falls under the material design of android. Hence to maintain backward compatibility, first I would suggest you to go through my article on maintaining backward compatibility of material design. I will try to keep this tutorial on Android RecyclerView short and simple as it consists a huge number of classes and each one of them is designed to be customized.

Android RecyclerView: A basic Introduction

Just like ListView, RecyclerView is used to display a large amount of similar items on screen. But since the Android team was building an enhancement, they added a bunch of new features to RecyclerView. Each one of these new features, give a platform to developers for implementing a highly custom made RecyclerView. One of the custom implementations of RecyclerView is the new Gmail app on Android. I took inspiration from it and tried to make a subset of it, in this Android RecyclerView Tutorial. Below I will discuss the 4 key classes of RecyclerView but first lets add its dependency in build.gradle(:app):-

RecyclerView with different layouts

One of the new concepts introduced in RecyclerView is the Layout managers. This class basically defines the type of layout which RecyclerView should use. In RecyclerView you can define three types of LayoutManager (s).

  1. LinearLayoutManager – This LayoutManager can be used to display linear lists, they could be vertical or horizontal.
  2. GridLayoutManager – Earlier in android GridView was the only widget to display grids, but now with RecyclerView, GridLayoutManager can be used to display grids.
  3. StaggeredGridLayoutManager – Another great customization is StaggeredGridLayoutManager, this is used to display a staggered grid.

In this Android RecyclerView Tutorial for simplicity I will be using a LinearLayoutManager for displaying a vertical list of items.

Android RecyclerView ViewHolder

The concept of RecyclerView.ViewHolder is same as it was in the ListView. Simply said: when a view goes out of visible area it is kept for recycling. Earlier this was done through the custom view holder pattern. But now with RecyclerView a ViewHolder class is included in the adapter by default. Therefore now its a compulsion for everyone to implement this class. There are many advantages to this approach, like it keeps references to the views in your items, which in turn decreases the overhead of creating new references every time an item is displayed.

Have a look at the object, that I will be using to supply data to ViewHolder:

Also have please have look at the layout where RecyclerView needs to be added:

Android RecyclerView Adapter

In general ListView implementations, the adapters were used to bind views with positions, usually in the getView() method. As developers we used to bind data into it. Here in RecyclerView the concept is same. But now the difference is, that new view holders are placed inside the adapter and the adapter now binds with ViewHolder, instead of views, as in previous adapters. In a way a direct binding between ViewHolder and position is made. To understand the concept mode deeply have a look at my custom implementation of RecyclerView.Adapter :

Android RecyclerView onItemClick Event

Sadly the standard implementation of RecyclerView does not have an onItemClick implementation. Instead they support touch events by adding an OnItemTouchListener through the addOnItemTouchListener method of RecyclerView class.

But I believe the suggested implementation is a little lengthy to implement. Also you may need to detect click events on the views in a RecyclerView item. Which may be a little difficult to implement through the standard OnItemTouchListener. Therefore I have implemented a custom recyclerview onitemclick event.

Here in the above code sample, I defined a custom interface MyClickListener with a method onItemClick, which is used for detecting clicks on the activity. The only drawback of this approach is, that I had to make a static reference to MyClickListener, inside the adapter. Although it may not create any problems, but still to avoid them I suggest you to initialize this interface in onResume() method of your activity.

The above code implementation will detect clicks on the item. If you need to detect clicks on particular views. It can be done simply by modifying the code in DataObjectHolder constructor. The layout for RecyclerView item:

To display visual responses like ripples on screen when a click event is detected add selectableItemBackground resource in the layout (highlighted above). Next have a look at the main activity where all of this code would come into play:

In the above code sample I have defined a basic Android RecyclerView. Where I have also shown, how to add and remove items at run time from the adapter. The good part here is, you need not to worry about animation. They are added and removed with default animation. But the most annoying thing is how to add dividers and spaces between items in RecyclerView?

Android RecyclerView Spacing Between Items

One of the biggest problems you might face while implementing Android RecyclerView is the spacing between items. Yes its true RecyclerView by default does not give any support for displaying dividers between items. Although you can add dividers by doing a custom implementation of RecyclerView.ItemDecoration class. Luckily I found a piece of of code in official samples. Link for the file:

DividerItemDecoration.java

After including divider decoration file and using it through the addItemDecoration method, your app would look something like this:

 

In the above tutorial, I tried to make a RecyclerView inspired from the Gmail app. Although its not a complete implantation, but it gives a basic idea on how to use RecyclerView in Android. Hope this Android RecyclerView Tutorial helped you. Connect with us through Facebook, Twitter and Google+ for more updates.

About Mohit Gupt

An android enthusiast, and an iPhone user with a keen interest in development of innovative applications.


Leave a comment

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

13 thoughts on “Android RecyclerView Tutorial