Android RecyclerView

I wrote a post a while back describing the View Holder pattern that should be used with the Android ListView in order to improve the performance of the ListView. That pattern is not difficult to implement, but it is a bit messy and mixes up the division of responsibility in your code.

Well the good news is that Google have recognised the shortcomings of ListView with the view holder pattern, and with Android 5.0 Lollipop have introduced a brand new view component – RecyclerView. As the name implies, the new view is used for recycling views when you have a long list of items that do not all fit on one screen. The concept of recycling views is not a new one – the old ListView and adapter did this – but the new model introduces much more flexibility and gets rid of the tightly coupled code of old.

The RecyclerView itself doesn’t handle any of the visuals, all it does it manage the recycling. Instead it has a number of nested classes that you use for the layout of the items, animation, etc. The main nested classes you will use are:

RecyclerView nested classes

Class Description
ViewHolderHolds the sub-views that are used to display an item's data
AdapterProvides the binding between the app data and the views that are displayed in the RecyclerView
LayoutManagerPositions item views within the item display area, and decides when views should be recycled
ItemAnimatorAnimates items when changes are made to the adapter

You can read up about these classes on Google’s Android Developer website. So I’m going to skip the discussion on what these classes do and just get stuck in with some code to demonstrate how you use them.

1. Import RecyclerView

The good news is that RecyclerView is included in the support library, so you can use it for projects that target older versions of Android, not just Lollipop. To import it into your project add the following dependency to your build.gradle:

2. Setup layouts

Your main layout for the activity (or fragment – I’m using activity here for simplicity) just needs a RecyclerView in exactly the same way as you used to have a ListView:

You then need a layout for the items, just like you used to for ListView. To make this post a bit more interesting and the app look a bit nicer, I’m going to use the new CardView component to layout the items in my list. CardView is used by a lot of the new Google material design apps like Google Now, it is used to show lists in a series of cards. To use CardView add the dependency in your build.gradle:

Then create the layout for your items. I’m going to display a list of hotels with a TextView for the hotel name and an ImageView for a picture of the hotel:

The CardView component is used as the base layout for the layout file, with a RelatvieLayout inside this. The views for each data item in the list items are then put inside this, laid out in any way you choose. You’ll notice there are some new attributes in the card_view namespace, such as corner radius and content padding, you can read up about these on the Android developer site.

3. Create the Adapter

Next we’ll write the adapter. This is what binds the┬álist of items (hotels in this case) with the UI list. As we saw with the CardView layout there is just a hotel name and an image in our hotel model:

To create an adapter for a list of these hotel items we extend RecyclerView.Adapter and RecyclerView.ViewHolder. We make the ViewHolder class a nested class in the Adapter class, and pass it to the Adapter class. You can see this in the example here:

The ViewHolder class holds the references to the view items in the layout, and in its constructor gets the reference to these items. The two main methods we override in the Adapter class are onCreateViewHolder and onBindViewHolder. The onCreate… inflates the view and passes it to the ViewHolder constructor to store the view references. Note that this will only be called when a new view is needed, the rest of the time it will recycle views. The onBind… method binds the values from the model for the current item to the corresponding view items.

The final effect of all this is very similar to the old ListView with ViewHolder pattern, but is more formalised and results in cleaner code with separation of responsibilities.

4. Tie it all together

Finally we tie it all together in our Activity by getting a reference to the main layout RecyclerView, instantiating a HotelAdapter with a list of hotel items, and assigning this adapter to the RecyclerView:

Notice here how we setup the RecyclerView with a LinearLayoutManager, this is the layout manager that positions the items in a linear list similar to the old ListView. There is also a layout manager for displaying items in a grid, and I guess more options will be added later by Google.

So that’s it, the new way of displaying lists in Android that has smooth, performant scrolling, and well structured code.

I’ll have to finish there as it’s my favourite night of the week – bin night! Yep, time to put the dustbin out for collection tomorrow morning.

Leave a Reply

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