Android recyclerview vertical list tutorial

Introduction

Learn to implement android recyclerview in simple step by step demo. In this android recyclerview tutorial, we’ll implement a vertical list with recyclerview.

Android ListView is a widget that displays a list of vertically 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 –

android-recyclerview-vertical-list-screen-grab

android-recyclerview-vertical-list-screen-grab

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:- ItcRecyclerViewVerticalList
    • 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

Following is the screen grab of the list that we will create in this tutorial. I have used few images in this tutorial (source: google search) for demonstration purpose and same can be found in the github repository.

android-recyclerview-vertical-list

android-recyclerview-vertical-list

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 vertical 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 “vertical_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

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.itcrecyclerviewverticallist. 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 vertical_list_grocery_item.xml (that we created above). Create a new package called adapter inside com.iteritory.itcrecyclerviewverticallist. 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 –

Stitch all together in MainActivity

We have written so many components so far. Now it is the time to stitch it together to render a vertical list using recyclerview. Here in this class, we will –

  1. instantiate the custom adapter
  2. Set a layout manager for the recycler view
  3. Link recycler view with the custom adater
  4. Feed data and refresh the adapter
  5. Well!! that’s it, we’ll have our recycler view working fine and awesome.

Let’s take a look how our MainActivity.java looks like post all modification –

Conclusion

So folks, in this tutorial, we learnt how to create a vertical list using recyclerview. I have intentionally used an image along with a text, so that we learn how to inflate both such widgets in a single tutorial. And practicaly, if you see most of the times, we use image in the list.

In the next tutorial, we’ll go over how to create an horizontal list with recyclerview. Happy learning!

7

No Responses

Write a response