Introduction to Android App Development With Kotlin: RecyclerView Widget (Part 11)
Learn more about implementing lists in Kotlin with RecyclerView.
Join the DZone community and get the full member experience.Join For Free
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.
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 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 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
<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
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.
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.
Opinions expressed by DZone contributors are their own.