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
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:
website. Create a class title Friend, which we’ll use in the next step.
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
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.
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
$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.
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. 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.
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.
After the code is generated, Android Studio should look like the following.
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 (
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
friends.size. Let’s finish
onCreateViewHolder next. It should look like the following.
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.
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
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).
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
Step 8: Create the ViewHolder
FriendsAdapter.kt, add the following code to the
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!
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
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!
Run the app again and you should see this!
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!