Android recyclerview horizontal list tutorial

Introduction

Learn to implement android recyclerview in simple step by step demo. In this android recyclerview tutorial, we’ll implement a horizontal list with recyclerview. In the previous tutorial, we have already created a vertical list using recycler view.

Just in case you have not gone through the previous tutorial, I’ll repeat the basic information about it. Android ListView is a widget that displays a list of scroll-able items. While implementing listview, we use an adapter that inserts the items in the list from a source like database query etc. I have not written any blog on listview, as it’s an older widget and we currently have advanced version of the listview and it’s called recyclerview. With recyclerview, Android addressed multiple limitations of listview and also made it more efficient. For example, recyclerview has built-in support for animation which was not the case in listview. Recyclerview forces using the ViewHolder pattern. With recyclerview, we can implement both vertical and horizontal scrolling. But in listview, only vertical scrolling is enabled.

Here, in this tutorial, we will cover max of these features introduced with recyclerview.

NOTE:- Your most reliable source of information for listview is here and recyclerview is here.

 App Demo

Once we complete the implementation steps following this tutorial, we will see an app as below –

Tech Stack

Following are the tech stack used in this app development.

Basic tasks for implementing recyclerview

Following are the 5 basic tasks while implementing recyclerview –

1. Add recycler view to activity_main
2. Create a layout xml depicting an item in the list
3. Data model to feed recyclerview
4. Custom adapter for the recyclerview
5. Link customer adapter to recyclerview

Let’s get started

Create an empty project

• Launch Android Studio and click: File –> New –> New Project…
• A “Create New Project” dialog box will open; we’ll provide the app name and company domain. I have entered following details, you can provide the name/domain as per your choice and preference.
  • Application Name:- ItcRecyclerViewHorizontalList
  • Company Domain:- iteritory.com
• Click on Next button. In the next window, select the minimum SDK version; you can choose as per your preference. In this case, I have chosen API 16: Android 4.1 (Jelly Bean). Click Next button.
• In the next window, select “Empty Activity“. Click Next button.
• In the next window,  let’s keep the Activity Name and Layout Name to default. Click Finish button.
• I’ll change the app name a bit here, traverse and open res–> values –> strings.xml. Find the line with app_name attribute. Change the value to “My RecyclerView App”.

List we’ll implement using RecyclerView

I have used few images in this tutorial (source: google search) for demonstration purpose and same can be found (along with the codebase) in the github repository.

Add recyclerview dependency

In the app level build.gradle file, we’ll add the dependency for recyclerview –> implementation ‘com.android.support:recyclerview-v7:26.1.0’. Once added, the build.gradle file will look like –

Add/Modify layout files

Add recyclerview widget to activity_main.xml

In case you have content_main.xml and it refers to activity_main, you can add recyclerview widget in content_main.xml. In my case, Android studio created only activity_main.xml. Hence, we will add the the recyclerview widget in activity_main.xml. Post modification, my activity_main file looks like below –

 

Add layout file depicting an item in the horizontal list

Right click on res -> layout folder and then click on New –> Layout resource file menu item. A dialog box will open up; provide the File name as “horizontal_list_grocery_item” and click OK button. Add an imageview and textview in the layout file. This is the layout of how each item in list will look like. Post modification, my layout file looks like below –

 

Write Data Model Class

Next, we will write a model class (Grocery.java) depicting a grocery item in our list. We’ll use following fields –

1. an image to display the picture of the grocery product
2. Name of the product

Create a new package called model inside com.iteritory.itcrecyclerviewhorizontallist. Create the model class as below inside model package –

Write custom adapter for the recyclerview

Next, we will create a custom adapter class that will inflate the layout file horizontal_list_grocery_item.xml (that we created above). Create a new package called adapter inside com.iteritory.itcrecyclerviewhorizontallist. Write the adapter class inside adapter package.

The customer adapter class extends RecyclerView.Adapter and overrides 3 methods –

1. onCreateViewHolder() – inflates the grocery_item.xml layout
2. onBindViewHolder() – the data (product image, product name) is retrieved from the object and is set to each item/row in the list. We’ll also override imageView onClick method to display a toast saying which item is selected.
3. getItemCount() – returns the numbers of items/rows in the list.

We have also defined the view holder in the same adapter class. All combined, the adapter class looks like –