Skip to main content

Android recyclerview horizontal list tutorial

https://iteritory.com/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 –
android-recyclerview-horizontal-list-screen-grab
android-recyclerview-horizontal-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:- 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 –

Comments

Post a Comment

Popular posts from this blog

web2apk

http://web2apk.com/create.aspx Create App   Intro   About   Changes   MalWare ?   Contact   Privacy Useful Links Bluetooth Mini Keyboards Android Mini PC Reset Android URL App Title Icon or
Post a Comment
Read more

how to retrieve image from sqlite database in android and display in listview

 Android platform provides several ways to store data in our application. 1. SQLite database 2. SharedPreferences etc For our post, we will only work with SQLite database. First and foremost, we need to understand what an SQLite database is? SQLite database  is an open source SQL database that stores data to a text file on a device. It executes SQL Commands to perform a set of functions, that is, create, read, update and delete operations. On my previous post, I showed how to  store data in SQLite database from edit text, retrieve and populate it in a listview . For this post, I will show the SQLite CRUD operations with images from gallery and text from EditText. We need to understand this; images are stored in SQLite database as BLOB data type. A BLOB is a large binary object that can hold a variable amount of data.  Note, we can only store images in the database as BLOB data type. We need to convert our image path to a bitmap then to bytes. Also
1 comment
Read more

Android Bar Chart Using MpAndroidChart Library Tutorial

https://www.numetriclabz.com/android-bar-chart-using-mpandroidchart-library-tutorial/ Android Bar Chart Using MpAndroidChart Library Tutorial Objective In this tutorial we learn how to implement Bar Chart using MpAndroidChart Library in your Android App. Download Source Code       Step 1 Contents ·        1  Introduction ·        2  Creating Bar chart o    2.1  Create a new Project o    2.2  Adding library in Project o    2.3  Create Layout o    2.4  To Plot Bar Chart §   2.4.1  Initialize the graph id §   2.4.2  Creating a Dataset §   2.4.3  Defining X-axis labels §   2.4.4  Set the data §   2.4.5  Add the description to the chart §   2.4.6  Run your App §   2.4.7  Set the color §   2.4.8  Adding Animations o    2.5  To plot grouped bar chart §   2.5.1  Creating Dataset o    2.6  Get the best of Android plus exclusive deals and freebies in your inbox!
2 comments
Read more