Getting to know RecyclerView

RecyclerView is a powerful UI widget that allows you to display a list of data in a flexible manner. When I was learning about RecyclerView, I found there were a lot of resources on how to create a complex one but not that many about creating a simple one. While the pieces that make up RecyclerView may seem confusing at first, they are fairly straightforward once you understand them.

This blog post goes through the steps of creating a simple RecyclerView that displays the names of different types of flowers. Along the way, I will also break down the different pieces that a RecyclerView needs so you can try it in your own apps.

RecyclerView? What? Why?

A RecyclerView is a container used to display a list or grid of data, like text or photos.

When a list scrolls, only a handful of views are actually displayed on the screen. When a view scrolls off screen, RecyclerView reuses it and fills it with new data. This makes your app more efficient both in time and space, because it recycles existing structures instead of constantly creating new ones.

The pink cells represent the cells displayed on screen and the yellow cell shows how a view that is scrolled off screen is recycled into a new view.

Why should you use RecyclerView?

• RecyclerView uses the ViewHolder pattern which improves performance by allowing access to item views without frequent calls to findViewById().
• RecyclerView, uses LayoutManagers which support lists that can scroll vertically and horizontally, staggered lists, and grids. Custom LayoutManagers are also possible to create.
• RecyclerView provides default item animations and a way to customize them.

Overall, RecyclerView is a powerful tool because it allows for flexibility and customization.

Implementing RecyclerView

This blog post will show how to implement a simple RecyclerView that displays the names of different types of flowers. The code below will be written in Kotlin but RecyclerView can also be used in Java.

To get started, create a project with the Empty Activity template in Android Studio. Give it a creative name and choose Kotlin as the project’s language.

Next, import the most current dependency for RecyclerView into the app level build.gradle file.

RecyclerView Data

One of the most important parts of RecyclerView is the data that is displayed. In a more complex app, data would be retrieved from a database or from the network, but for simplicity this app uses strings from a resource file in this app.

In the strings.xml file, create a string array with the flowers to be displayed.

Next, create a class called Datasource and have it take in context. Create a function called getFlowerList() that returns the array of flower names.

In MainActivity.onCreate(), create a val called flowerList and set it equal to getFlowerList().

RecyclerView Layout

Next, replace the default TextView in the activity_main layout resource file with a RecyclerView and set the layoutManager as LinearLayoutManager. Using LinearLayoutManager means that the data is presented in a vertical or horizontal list (it is vertical by default).

Item Layout

The diagram above shows a RecyclerView which is made up of items that display data. In this case, the items that make up the RecyclerView contain names of flowers.

Create a new layout file named flower_item, which describes how an item in the list should be displayed. This layout is responsible for displaying a single flower name, so all that is needed is a TextView.

Breaking down the adapter class

Next up is the real meat of RecyclerView, the ViewHolder and Adapter class. A ViewHolder stores information about a single item view in the RecyclerView. The RecyclerView creates only as many ViewHolders as are needed to display on screen plus a few extra in a cache. The ViewHolders are “recycled” (repopulated with new data) as the user scrolls; existing items disappear on one end and new items appear on the other end. The Adapter class gets data from the datasource and passes it into the ViewHolder which updates the views it is holding. The graphic below shows how the RecyclerView, Adapter, ViewHolder and data all work together.

Creating an Adapter

Create a class called FlowerAdapter that takes in a list of data to display.

Creating a ViewHolder

Create an inner class called FlowerViewHolder that takes in an itemView. In the ViewHolder, create a val to represent the TextView and connect it with the view in the cell layout.

Then create a bind() function which connects the data for the flower name (String) and the UI that holds that data (flowerTextView) that takes a string. The bind() function takes the string passed in and assigns it as the text of flowerTextView.

Extending RecyclerView.Adapter

Update the FlowerAdapter class signature to extend the RecyclerView.Adapter class and pass the FlowerViewHolder in.

Classes that override RecyclerView.Adapter need to override three methods: onCreateViewHolder(), onBindViewHolder(), and getItemCount().

Overriding onCreateViewHolder()

This method is called when the ViewHolder is created. It initializes and inflates the view for the item in the RecyclerView. This view uses the item layout created earlier which displays text.

Overriding onBindViewHolder()

onBindViewHolder() is called with the ViewHolder and a “position,” which denotes the item’s position in the flowerList that is being bound. This position can be used to extract the underlying data for the cell and pass that into the ViewHolder to bind the data to that holder’s UI.

Overriding getItemCount()

The RecyclerView displays a list, so it needs to know how many items are in the list. Since flowerList is the dataset, return its size.

Complete Adapter code

Connecting to the MainActivity

The layout, data list, and adapter are all created! Now, just add the RecyclerView to the MainActivity and assign the Adapter to it.

Define a val called recyclerView and set it equal to the RecyclerView container in activity_main. Assign FlowerAdapter as your recyclerView’s adapter.

Now run the app and see it in action:

Next Steps

The full code is posted here.

This example shows how to implement the basic pieces of RecyclerView to display simple text items. Of course, RecyclerView can handle more interesting and complex items as well, which I have written about in the RecyclerView Series. Here are some other resources:

• RecyclerView Sample — Kotlin
• RecyclerView Sample — Java
• RecyclerView Documentation
• Create a List with RecyclerView

Let me know in the comments what topics you would be interested in learning more about!