Introduction to Android App Development With Kotlin: RecyclerView Widget (Part 11)

Most of the apps you have on your smartphone have a list of things displayed on the screen. Instagram consists of an infinite list of pictures that our friends post. Facebook is a never-ending list of updates from our family and “friends.” Lists are everywhere.

Android allows us to implement such lists using a widget named RecyclerView, and that’s what this tutorial is all about. In the previous part, we have fetched the list of movies from the database, and now, we will display each one of the items in a nice list. Our users will be able to scroll up and down the list as many times as they like to review their list of movies.

Brief Lesson of Android History

Let’s start with a brief lesson of ancient Android history. First, there was a ListView, which is  RecyclerView’s predecessor. Unfortunately, this archaic widget wasn’t very good at memory management, and before it could display anything to the user, it would have to draw the entire list first. This is not ideal when you have hundreds of items in your list.

Then, the RecyclerView was invented and everything changed. You could have hundreds of items in your list but RecyclerView wasn’t phased. The reason for that is that RecyclerView “recycles” the list items. Get it? RecyclerView only ever draws the items that fit on the user's screen, and as the user scrolls, the new items are dynamically drawn. It’s all just a big illusion… Nonetheless, RecyclerView provides a better UX, and now, it’s time for us to implement it.

RecyclerView Widget

RecyclerView consists of a few components that work together to display the data. The overall container for your user interface is a RecyclerView object that you add to your layout. Then, we must provide it a layout manager. Layout manager can be, for example, LinearLayoutManager (items displayed in the list one under the other) or GridLayoutManager (think of the Photos app).

Each item in the list is its own view represented by view holder objects. These objects will extend RecyclerView.ViewHolder.

RecyclerView wouldn’t work without an adapter which is responsible for what gets displayed in the list. This class extends RecyclerView.Adapter<ViewHolder>, and we will implement it in the next tutorial.

Step 1. Imports

Add the following to the dependencies in build.gradle (app) file:

// RecyclerView
implementation 'com.android.support:recyclerview-v7:28.0.0'

Step 2. Add RecyclerView to the view

In the fragment_movie_list.xml file, add the  RecyclerView:

<androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rvList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tvTitle"
        android:layout_above="@id/btnAdd"
/>

We want the list to appear between the big title on top of the file and above the button below hence we had to specify id’s for both of those elements.

This is what your preview should look like when you’re done

Step 3. Set LayoutManager

In the MovieListFragment class in the onViewCreated method, we’ll access this newly created widget using its id and set the LinearLayoutManager on it:

rvList.layoutManager = LinearLayoutManager(activity)

Run the app and ensure no crash occurs. The next step is to create an adapter that will handle the data displayed in the RecyclerView. We’ll get that done in the next tutorial in which we’ll have the data finally displayed on the screen.

Conclusion

Now that you know why we use RecyclerViews and not ListViews, understand the basic mechanism of RecyclerView, and have the basic foundation laid, we must implement an adapter that will tie it all together.

The complete working code can be found in this GitHub repo where each lesson is tagged appropriately.