Android RecyclerView with Kotlin – Part 1

In the past, there were a number of ways to display data to a user. However, now it is strongly recommended to use a RecyclerView for display lists of data. Lists can be vertical or horizontal, and can be styled according to a design spec. Rows can even have different layouts depending upon the data to be displayed.

For example, a Facebook Newsfeed-style design might display an ad every five rows, or every 3 rows, or exactly on the 32rd row, however you see fit. In this tutorial, let’s create a basic RecyclerView that displays a list of users.

Step 1: Start a new Android Studio project

Setup an Android Studio project by following the steps in Android Studio Tutorial with Kotlin (2018 Edition) – Part 1, and be sure to select Basic Activity when you are prompted to Add an Activity to Mobile.

Select Basic Activity.

After selecting Basic Activity, continue the screens until you reach the Configure Activity screen. The defaults are fine.

The defaults are fine.

Step 2: Add a RecyclerView tag to the layout

Now our project is all set up. Let’s start creating the RecyclerView. First, if it’s not already open, open content_main.xml. Then click Text near the bottom of your screen.

Open content_main.xml, then select Text.

Then let’s replace the lone <TextView> with <RecyclerView…

The existing TextView. Let’s replace it with a RecyclerView tag.

The TextView tag is for displaying a single text message. We need to change this to a RecyclerView. There are only a few lines to change, which should now look like the following.

The 0dp for the layout_width and layout_height is part of ConstraintLayout. It means that the element will take up the entire space, because of the four constraints on the tag (bottom, left, right, top).

We can now close content_main.xml because we’re done making all modifications to the file.

Step 3: Create the design for the row

Next, let’s create the design for each row. This row will be repeated 100 times for a list of 100 users. There is no need to create a separate row for each user. We can user one row and the RecyclerView’s Adapter will transform the data into each layout, recycling each one as you swipe up or down.

Right click on the layout folder and select Layout resource file.

Open the white triangle icons to open the layout folder. Then right click on the layout folder.

Next, name the folder row_user and click OK.

The name can be anything. Just remember what you named it.

Android Studio should now look similar to this.

Android Studio with the open file row_user.xml.

Next, we need to style the file row_user.xml. Open row_user.xml in Android Studio. Then select the Text tab near the bottom of your screen.

row_user.xml inside Android Studio. Open Text mode.

Next, add a TextView to the row_user.xml file. It should look like the following.

The TextView inside of ConstraintLayout. With the Preview panel (right side) open.

Step 4: Create the Adapter

Next, we need to write some Kotlin code. Right click the package containing MainActivity and create a new Kotlin class.

Create a new Kotlin file by right-clicking the package that contains MainActivity.
The new file dialog.

After creating the new file UsersAdapter (as a class), you should see a nearly-empty file titled UsersAdapter.kt.

 A blank file titled UsersAdapter.kt

Next, type the following.

You should notice an error in Android Studio, identified by a red line under class UsersAdapter and red text ViewHolder. Click on ViewHolder and press Alt+Enter key on Windows (or Option+Enter key on Mac). Then select Create class ‘ViewHolder’.

Click on ViewHolder then press the keyboard shortcut mentioned above.
In the next dialog, click UsersAdapter.

Update: Part 2 is now available.

Daniel Malone 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.

Android RecyclerView Tutorial (Part 1)

  • Most apps contain lists of data using RecyclerView.
  • In this tutorial, use ConstraintLayout and Kotlin to display a list of data.

3 years ago

findViewById() in Kotlin

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

3 years 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.

3 years 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

    3 years ago

Cleaner Architecture for Android Apps

  • Clean Architecture for Android can help developers prepare for change.
  • But app developers can't possibly know what will change.

    3 years ago

Android RecyclerView with Kotlin – Part 3

  • In part three of this series, finish creating the RecyclerView.
  • Use onBindViewHolder to display data.

3 years ago

Android RecyclerView with Kotlin – Part 2

  • Create the entire RecylerView for our UsersAdapter.
  • Continued from part 1, where we set up the Android Studio project.

3 years ago

Android and RxJava: Using a Single

  • Use RxJava's Single class when the expected type is either a success or error.
  • It's only slightly different from Observable.just(), which we discussed in the last article.

3 years ago

Android and RxJava: Getting Started

  • The powerful library RxJava can help developers build better apps.
  • See how to use Observables and Observers in this tutorial.

3 years ago

Display Sample Data when Creating a RecyclerView

  • Android Studio's default RecyclerView preview lacks sample data.
  • Adding sample data can be helpful for debugging.

3 years ago

Android Studio Tutorial with Kotlin (2018 Edition) - Part 2

  • Create a UI in Android Studio using the Design mode.
  • In this latest installment for beginners, we'll add a widget to our screen.

3 years ago