Android - Creating a List of Cards using RecyclerView
23 Aug 2018
A RecyclerView is used to display a scrolling list of items based on a large data set or data that
Code for the this tutorial is available on my GitHub.
In the RecyclerView model, several components work together to display a scrolling list. We add a
RecyclerView object that acts as the container for the list of items. As a beginner to Android development, it was hard
for me to wrap my head around all the components that makes RecyclerView possible. So, this guide aims to help
anyone display a list of items using RecyclerView and MaterialComponents.
Add the support library for RecyclerView and MaterialDesign.
To access RecyclerView and MaterialComponents we need the v7 support library and the material design library.
Open the build.gradle file and add the following dependencies.
Note: The above dependencies are for Android P(SDK 28). For more details on using material design
in your app, visit the
getting started guide.
Inherit app theme from MaterialComponents
To use the latest material design components in your app the base theme should inherit from the theme provided by MaterialComponents.
Change the parent of you main AppTheme to Theme.MaterialComponents.Light.DarkActionBar in your styles.xml.
Add RecyclerView to your layout file
The RecyclerView widget should be added to your activity layout file.
Create the layout for a single card list item
We need to create the layout for a single card item in a new layout file: list_item.xml. This card layout will be repeated
to display the list of cards. Here MaterialCardView and MaterialButtons are used to create the layout.
A single list item
Modify the cardCornerRadius and cardElevation attributes in the MaterialCardView to change the corner radius and shadow of the card.
I used the styles provided by MaterialComponents, for example the button above has a style of Widget.MaterialComponents.Button.TextButton.
Create a simple data model
We will create a simple class that will hold the data for each and every card list item.
Create the View Holder
Inside your Adapter create a static ViewHolder class that extents RecyclerView.ViewHolder.
The ViewHolder will be used to cache the the view objects associated with each list item. The RecyclerView creates
as many ViewHolders as required to fill the screen plus a couple of extra in case the user scrolls.
When the user scrolls, the ViewHolder at the top that goes out of the window is bind with new data and is the shown
at the bottom.
Here we have an ImageView and two TextViews that display the card image, title and subtitle. The constructor
uses findViewById to get a reference to the widgets in the layout file. We have an addition function bindData()
that takes a DataModel and binds the correct data in the ImageView and TextView.
Complete the List Adapter
The MyAdapter class should extend RecyclerView.Adapter and we need to override the functions
onCreateViewHolder(), onBindViewHolder() and getItemCount().
The constructor takes a list of DataModel and the activities context. This list will be used to populate our RecyclerView.
The onCreateViewHolder() function is called when the RecyclerView creates the required number of ViewHolders. Here we
inflate a new list_item layout and use it to return a new ViewHolder.
The onBindViewHolder() is used to bind data to an existing ViewHolder. Since we already have a bind method
in our ViewHolder class, we can user that to set the correct data. The position variable will have the index of the
item the RecyclerView wants to load.
Set the RecyclerView in the activity.
The last step is to get a reference to the RecyclerView and set the layout manager and our adapter.