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?
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.
Why should you use
ViewHolderpattern which improves performance by allowing access to item views without frequent calls to
LayoutManagerswhich support lists that can scroll vertically and horizontally, staggered lists, and grids. Custom
LayoutManagersare also possible to create.
RecyclerViewprovides default item animations and a way to customize them.
RecyclerView is a powerful tool because it allows for flexibility and customization.
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
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.
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.
MainActivity.onCreate(), create a val called
flowerList and set it equal to
Next, replace the default
TextView in the
activity_main layout resource file with a
RecyclerView and set the
LinearLayoutManager means that the data is presented in a vertical or horizontal list (it is vertical by default).
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
Breaking down the adapter class
Next up is the real meat of
Adapter class. A
ViewHolder stores information about a single item view in 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
ViewHolder and data all work together.
Creating an Adapter
Create a class called
FlowerAdapter that takes two arguments in its constructor: a list of data to display and the context for the activity in which it is displayed.
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
FlowerAdapter class signature to extend the
RecyclerView.Adapter class and pass the
Classes that override
RecyclerView.Adapter need to override three methods:
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.
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.
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
FlowerAdapter as your
Now run the app and see it in action:
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 will investigate in future articles and samples. Until then check out these 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!
By Meghan Mehta