Android RecyclerView Tutorial (Part 1)

It’s common for an Android apps to display a list of data. In this tutorial, we’ll use Kotlin to create a RecyclerView that displays a list of your friends. This example will help solidify your understanding of RecyclerView and help you build your app. Along the way we’ll use ConstraintLayout and Kotlin’s data class.

Back in the day, Android created lists using something called ListView. Most developer used it to display lists of data. But ListView had a problem: it wasn’t very performant. So Android created RecyclerView, a new engine that can display hundreds or even thousands of records (perhaps by paging) by recycling each row as it leaves the screen.

This new architecture helps developers keep apps fast, reliable and scalable. In this tutorial, let’s build a vertical list of friends. First. we’ll start with a basic RecyclerView, then we’ll focus on the layout using ConstraintLayout. Then we’ll put everything together. Ready? Let’s get started!

Step 0: Project Setup

Start by creating a new project in Android Studio. Since we’ll be coding in Kotlin, make sure you check the Kotlin checkbox when you create the project. Need help? See this tutorial.

Step 1: Kotlin Data Class

First, let’s create our data class, a feature of Kotlin. data classes are strictly for data models. For now, we’ll create three fields: firstName, lastName and website. Create a class title Friend, which we’ll use in the next step.

The Friend data class.

For now, you can create it in any package, but I created it in the same package (folder) as MainActivity.kt. Here is what the code should look like:

With the data class created, let’s move onto editing MainActivity.kt.

Step 2: MainActivity Setup

By default, Android Studio creates a MainActivity class that contains code we don’t need. We can go ahead and delete most of MainActivity.kt except the following.

MainActivity.kt open in Android Studio.

Now let’s create a list of Friend’s, or List<Friend> as we code in Android Studio. For now, we can either manually create friends or use a for loop to automatically add lots of friends. Let’s use the for loop.

In the above code, we first create the friends variable to store our mutable (changeable) List of Friend’s. On lines 15-23 we loop 20 times, which will create 21 new Friend’s. Notice the firstName contains $i, which is our counter (1, 2, 3, 4, 5, 6, 7, etc.). That way, when we display firstName’s in the RecylerView, we can know that which record is which. This may be easier to understand when we tackle this in a future step.

Step 3: Setup RecyclerView in XML

Our content_main.xml file should look like the following.

The original content_main.xml layout file opened in Design mode. Toggle between Design/Text at the bottom of Android Studio.

We need to delete the “Hello World!” TextView and add a RecyclerView. When opened in Text mode (see the Design/Text tabs at the bottom of Android Studio), the file should look like this:

Notice that we give the RecyclerView an id of recyclerView. We’ll reference this recyclerView ID from MainActivity.kt in the next step. Also notice the constraints we give it: left, top, right, bottom, as well as 0dp for width and height.

We are now done with the main XML portion of RecyclerView! Next, we need to make a small modification to MainActivity.kt, then we’ll be done with that file.

Step 4: Connect XML and Kotlin

Now that we’ve created our RecyclerView in XML, let’s continue and finish our work with MainActivity.kt. Add the following lines to MainActivity.kt.

Add the recyclerView.apply code.

recyclerView is a reference to the RecyclerView XML layout we created in the previous step. layoutManager sets up the RecyclerView, and adapter sets the Adapter to FriendsAdapter, which we’ll create in the next step.

Step 5: Setup the RecyclerView Adapter

In the same package as MainActivity.kt, create a new class named FriendsAdapter. Then extend RecyclerView.Adapter<FriendsAdapter.ViewHolder>(). Next we need to create the ViewHolder. To set up the three methods we need, click on the RecyclerView class with the red underline, then with your cursor on the red RecyclerView, press Alt+Enter on Windows and Linux (or Option + Enter on Mac) and select Implement methods. In the popup dialog, select all three methods then press OK.

This will generate the required code we need to finish this project.

The Implement Members popup dialog.

After the code is generated, Android Studio should look like the following.

FriendsAdapter.kt with the generated text.

Thankfully, Android Studio generated most of the code we need. However, we will still need to modify the code slightly. Let’s begin by cleaning it up and renaming a few variables (parent, viewType, holder, position).

Step 6: Complete Adapter Methods

We need to modify all three methods and ViewHolder. Let’s start with the easy method: getItemCount(). This should return the number of items in the RecyclerView. Code the following.

As you can see, we modified line 7 to receive the list of Friends, then on line 12 we make getItemCount() return friends.size. Let’s finish onCreateViewHolder next. It should look like the following.

onCreateViewHolder() with the friend_row layout we will create in a future step.

With onCreateViewHolder complete, let’s move on to onBindViewHolder(). This method will be called for every row. If a RecyclerView contains 10 rows, onBindViewHolder() will be called 10 times (as you scroll through the list). Although autocomplete may not work because we haven’t created our ViewHolder, let’s code onBindViewHolder() to the following. Note that firstName is red. That’s fine for now, we’ll fix it in a future step.

The modified method onBindViewHolder().

Step 7: Create the Row’s Layout

Let’s go back and fix an error we caused with a previous step when we created onCreateViewHolder(). We can fix it by creating friend_row.xml. In the Project panel, open res then right-click layout and select New then Layout resource file. This XML layout file will be populated for each row. So each row will look exactly like this XML file, with the exception of data. For example, Daniel Malone and John Smith might use the exact same layout, but the RecyclerView is smart enough to know that each row will have different data (i.e. Daniel Malone vs. John Smith).

Create friend_row in Android Studio.

Opening friend_row.xml in Text mode (see the tabs on the bottom of Android Studio), you’ll want to add a TextView. It should like like the code above. On lines 7-12 we display a TextView with an id of firstName, and constraints to the left and top. It’s important to note that on line 5 we are setting the ConstraintLayout’s layout_height to wrap_content.

Step 8: Create the ViewHolder

Back in FriendsAdapter.kt, add the following code to the ViewHolder.

FriendsAdapter.kt’s ViewHolder class.

Step 9: Run the App

Press the green play button in Android Studio to run the app and you should see a list of first names!

Run the app on an emulator or physical device.

There are some changes that need to be made. First, we can’t scroll because there aren’t enough names. This can be fixed by changing the number 20 to something like 100 in MainActivity.kt. Another option is the edit friend_row.xml to take up more vertical room. Let’s do that. While we’re at it, we can also fix the other error, which is that not all data from our Friend class is being displayed.

Step 9: Enhancements

Open friend_row.xml and paste in the following code.

Run this in the emulator and you will see that you can scroll through the list, but there isn’t a last name and website. That’s because we haven’t yet set up in our ViewHolder class and onBindViewHolder() method. Let’s fix that now and call it a day!

Modify FriendsAdapter.kt to look like this.

Run the app again and you should see this!

The finished Android app in Android Studio.


Closing Thoughts

Hopefully you can follow along at your own pace and create this finished Android app. Along the way, we learned some new things with Kotlin, ConstraintLayout, RecyclerView and Kotlin’s data class. Many improvements can be made, and the UI  can look like anything. But the basic’s are all here. Thanks for reading!

About the author

Daniel Malone
Bringing more than a decade of software engineering experience, Daniel Malone is Editor at androidEveryday. An Austin native, Daniel is often found reading technical books, blogging and creating YouTube tutorials. When not working, he likes to listen to pop hits on Google Play Music.

findViewById() in Kotlin

  • As you may have discovered, findViewByid() is no longer needed.
  • Kotlin adds the ability to directly access Views.

1 month ago

Android Architecture Components Tutorial: ViewModel + LiveData

  • Use Kotlin to build a basic Android app using Android Architecture Components.
  • As part of Jetpack, LiveData and ViewModel support a MVVM app architecture.

1 month ago

Android SharedPreferences Tutorial in Kotlin

  • Use SharedPreferences to store simple data in Android Studio projects.
  • It's good for storing small amounts of data

    1 month ago