Android RecyclerView Part 1 — Creating a Simple List
By: Hossein Amini
Tags: Android, Recyclerview, Scrolling

To use the RecyclerView we need:

1- The RecyclerView object: The overall container for your user interface is a RecylerView object that you add to your layout(You can add this object to your layout after adding its dependency to your build.gradle file).

2- Layout manager: The RecyclerView fills itself with views provided by a layout manager. There are 3 different types of layout managers that can be used:

LinearLayoutManager which lays out items vertically or horizontally

which lays out items vertically or horizontally GridLayoutManager that lays out items in a grid

that lays out items in a grid StaggeredGridLayoutManager which lays out items in a staggered grid formation

Also, we can implement our own layout manager

3- ViewHolder: The views in the list are represented by the view holder. Each view holder is in charge of displaying a single item with a view. We create a view holder object by extending our class from ReclerView.ViewHolder.

The RecyclerView creates only as many view holders as are needed to display the on-screen portion of the dynamic content, plus a few extra. As the user scrolls through the list, the RecyclerView takes the off-screen views and rebinds them to the data which is scrolling onto the screen.

4- Adapter: An adapter manages the ViewHolder objects. It creates not only ViewHolders as needed, but also binds the ViewHolders with their data. We create an adapter by extending our class from RecyclerView.Adapter.

5- List of datasets: A list of datasets that we want to show in our RecyclerView. In this tutorial, we use a list of Strings.

Adding the RecyclerView dependency

The first step to build our application is adding the RecyclerView dependency. So open the build.gradle file in your app module and add this dependency into the dependencies section.

dependencies {

implementation “androidx.recyclerview:recyclerview:1.1.0”

}

Adding the RecyclerView object to our layout

Now we add the RecyclerView to our layout file, also add an id for it(rclNames).

Creating ViewHolder and Adapter

Before creating our adapter, we should create a layout file. This layout will be used for each item in our RecyclerView. So, create a layout named name_item which contains a LinearLayout. And add a TextView and a View in it. Also, give the TextView an id. For example txtName.

We have to create an adapter class by extending our class from RecyclerView.Adapter which is a generic class that we have to give it our ViewHolder class.

For now, just create a class named NameAdapter and give it a constructor that takes a list of strings (we will extend it from the RecyclerView.Adapter class after creating our ViewHolder). In the NameAdapter class create a nested class named NameViewHolder and extend it from RecyclerView.ViewHolder class(Later we will complete this class).

After extending the NameAdapter class from the RecyclerView.Adapter, we have to override 3 functions which are:

onCreateViewHolder(parent: ViewGroup, viewType: Int): called every time the RecyclerView needs a new View. In this function, we have to create an instance of NameViewHolder which should be constructed with a new View. We create a new View by inflating the name_item.xml layout file.

As it’s mentioned earlier, the RecyclerView creates only as many as views are needed to fill up the display portion, plus a few additionals. For example, if the RecyclerView creates 10 views, this function will be called only 10 times and by scrolling the list won’t be called again anymore. onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int): Called by RecyclerView to show the data at the specific position. This function should update the contents of the RecyclerView’s item to reflect the data at the given position. For example, if the position is 10, this function gets the 10th item of the dataset(a list of names that the NameAdapter’s constructor takes) to update the 10th item in the RecyclerView. getItemCount(): returns the total number of items in the dataset, that’s held by the adapter. In this function, we will return the size of the names list.

Before completing the NameAdapter’s functions, in the NameViewHolder we have to get the reference of our TextView(txtName) which is inside name_item.xml.

Now we have all requirements to complete the NameAdapter

Connecting all pieces together

We’re almost done and it’s time to connect all pieces together. So In our Activity, we must get our RecyclerView and set its adapter, equal to an instance of the NameAdapter. Also, we have to create a list of names and pass them to our adapter. As I mentioned earlier, the RecyclerView fills itself with views provided by a LayoutManager, so we must create an instance of LinearLayoutManager and pass it to the RecyclerView.

Now you can run the app and see the result.

We can convert our vertical RecyclerView to a horizontal RecyclerView just by setting the LinearLayoutManager like this:

Practice: Try to use GridLayoutManager and see the result.

Updating an item

First, we must add a button to our activity_main.xml layout. By clicking on this button, the last item of our list will be updated.

So our activity_main.xml may look like something like this:

To update our ReclclerView, first we have to update our dataset (nameList in our example) then call our adapter’s notifyDataSetChanged() function. We do all these two steps when the user clicks on the btnUpdateList. So in our MainAvtivity, we add this code:

Also this way, we can add or remove items from our RecyclerView.

Practice: Try to add or remove an item from the RecyclerView.

You may wonder what the notifyDataSetChanged does? By calling the notifyDataSetChanged function the LayoutManager will rebind any affected ViewHolder, to allow their data to be updated.

Handling click-events

In this section, we want to handle click-events in our RecyclerView. So by clicking on each item, we’ll return its position and its name to our Activity and we’ll toast them from there.

To do this we do the following steps:

First, in our NameAdapter, we create a Unit function as a variable named itemClickListener that takes an Int and a String as parameters. Second, in the NamesAdapter’s onBindViewHolder, we add an OnClickListener to the holder.item and in this listener, we’ll invoke our itemClickListener and pass it the position and name of the corresponding item. Lastly in our Activity, we’ll grab NameAdapter’s itemClickListener variable and initialize it.

Summary

This tutorial wanted to teach us why and how to use the ReyclerView in our application. Also, it taught how to update items in our ReyclerView and handle click-events.

You can find the source code from this repo at Part1_Creating_a_simple_list branch:

In the next part, we’ll learn how to create a RecyclerView with multiple view-types.

I hope you enjoyed this tutorial and found it educational, thanks for the devoted time.