Android RecyclerView Multi Column With Sticky Header Example Tutorial

Today’s bright topic is about Android Recyclerview Multi Column With Sticky Header.

We will create one example with android studio in this tutorial. You will learn to make android cardview with two or more columns.

Multi column recyclerview means that every single row item is having more than one column.

This type of recyclerview creates a table like structure.

In many occasions, you want to make a layout where there are one or more sticky headers and then a table like structure.

For example, to show an order summary at restaurant app, you may have static headers like name of the restaurant.

After that you will show an order in the tabular form using recyclerview.

Here, this tutorial will help you get your goal.

Now follow all the below steps to create this example.

Step 1. Having Dependencies

We are going to use recyclerview and cardview here. So we need to add it’s dependencies in

build.gradle(Module :app) file.

Write below lines in build.gradle(Module :app) file.

Above lines will download necessary classes for recyclerview and cardview.

Step 2. Making Recycler Item File

Now we will create one layout file. This file will generate the view structure for each row of recyclerview.

Create a new file named recycler_item.xml in res->layout directory.

Copy the following source code in recycler_item.xml

  • In the above code, I have taken <android.support.v7.widget.cardview> as a parent of the main layout. It will generate card structure.
  • Under this cardview tag, I have taken one Linearlayout with horizontal orientation.
  • Now, I have set two Textviews horizontally under this linearlayout.
  • First textview is for product name and second is for product quantity.

Step 3. Making Food Model

The main purpose behind creating model class is to have proper data set to populate the recyclerview.

Prepare a new java class named FoodModel.java

Add the below code in FoodModel.java

  • Above structure includes getter and setter methods for two variables.
  • One variable is for product name and another is for quantity.

Step 3. Preparing Adapter

Let us create adapter class which will provide data to populate the recyclerview.

Make a new java class named FoodAdapter.java

Write down the following coding lines in FoodAdapter.java

Going through above class

First of all, read the below code

  • It is the constructor of the adapter class.
  • It receives context and arraylist from first and second parameter respectively.
  • ArrayList contains the objects of the FoodModel class.

Consider the next coding lines

  • Above method will inflate the recycler_item.xml file which we created in Step 2.
  • Compiler will create layout using this recycler_item.xml file for every row.

Step 4. Final Changes in Main Classes

Last thing is to update activity_main.xml and MainActivity.java files.

Replace the existing code of activity_main.xml with the below lines

  • Here, I have taken two textviews at the top and then one linearlayout with horizontal orientation.
  • First textview is showing the name of the restaurant and second one is the heading of the page.
  • After linearlayout I have defined our recyclerview.

Now it is time to write the MainActivity.java as per below code

Measuring Above Code

Following are the definitions of the required objects.

  • First line is making a string array named Products. It includes various product names.
  • Second line is creating an integer array which holds the quantity of the products.
  • Third line will prepare an arraylist (foodModelArrayList) with the objects of the FoodModel class.
  • Last line will simply make an object of recyclerview.

Consider the below line

  • Above line is setting the data in to the foodModelArrayList.
  • Compiler will use populateList() method to generate the data.

  • Above lines are making the populateList() method.
  • Here, Compiler will create one for loop with seven iterations.
  • During every iteration, it will create one object of FoodModel class.  Then it will set the product name and quantity to that object.
  • After this, compiler will simply add that object in the arraylist.

Final UI

Download Source Code For Android RecyclerView Multi Column Example

[sociallocker]Download Source Code For RecyclerView_Multi_Column[/sociallocker]

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *