Android RecyclerView Section Header Example | Group By Header

Android RecyclerView Section Header Example is the hot topic of today.

We will create a recyclerview which has specific headers among it’s various child items.

Read to make section header in Listview.

Section Header

Section header is a particular row item which can categorized recyclerview’s child items.

For example, you are making recyclerview with vehicle’s manufacturer company names.

Here, you can categorize company names with categories like Cars, Bikes, Air crafts etc.

In the first row you will write “Cars” and in the second and third row, you may write “Mercedes” and “Audee“.

In the fourth row you give section header named “Bikes” and you put “Honda” and “Ducati” in Fifth and sixth row of recyclerview. This process continues til the end.

In this example, we will create a recyclerview where all the section header have different layout structure than the normal child row items.

Let us go through all the steps.

Step 1. Build.gradle(Module: app)

We have to add gradle lines to import the required classes of recyclerview and cardview.

Write following in the build.gradle(Module: app) file

Step 2. Drawable files

Create a drawable resource file named cardview.xml under res->drawable directory

Copy the following code in cardview.xml

Above file will create specific background for the section header row.

I have given gradient effect with green color shadows in this file.

Make another file named cardview_child.xml and add following code

  • cardview_child.xml file will create the particular background for child rows of recyclerview.

In this file, purple color gradients will make child row more colorful.

Step 3. RecyclerView Row resources

Now we need to create two layout resources file. One for header row and one for child row.

Make a new layout resource file and name it “rv_header.xml” and add the below source code

This “rv_header.xml” file will create a layout structure for header file.

Now create another layout resource file named “rv_child.xml”. Following code is for this file.

Every child row will use the above code to create it’s layout structure.

Step 4. Model Classes

Create a new class named HeaderModel.java

Add the below source code in it

This class contains necessary methods regarding headers of the recyclerview.

In the above code, isHeader() and getName() methods are override because this class implements the ListItem interface which is written in the Main Activity.

isHeader() method returns the boolean value. If the the object is of the HeaderModel class, then it will return true otherwise false.

getName() method will return the name of the string whether it is vehicle type or manufacturer, it does not matter here.

(You will see the use of these two above methods in the adapter class later in this tutorial)

setHeader() method is used to set the name of the header.

Now create a new class and give it a name “ChildModel.java”

Put following code in it

All three methods present in the above class are similar with the methods of HeaderModel class.

The text which is set and get by various methods are of the child rows name, while in HeaderModel class, the text was about header name.

Step 5. Writing Main Activity

You need to change the Main activity’s code now.

Add below code in activity_main.xml

I have taken recyclerview in the main layout.

Write down the following source code into MainActivity.java class

Understanding above code

Read the below lines

There are two string array variables are there.

First string array variable called vehicleTypes represents the types of the vehicles. These vehicle types are the headers of the recyclerview.

Second string array variable called childnames contains the names of the vehicle manufacture companies. These names are the child rows of the recyclerview.

Interface

HeaderModel.java and ChildModel.java were implementing the ListItem interface. This interface is defined here in the Main Activity.

Following is it’s coding lines

It contains two methods so both HeaderModel.java and ChildModel.java classes were overriding these methods.

Populating RecyclerView Data

Our data for header and child rows are present in the two strings variables as we have just shown above.

Now we need to convert this data in the arraylist of interface objects to pass them into the adapter class.

Following method will do this for us

In the RecyclerView, first row will represent the Header name. Then next four rows will be child rows.

As per this calculations, First, Sixth, eleventh and sixteenth rows of the recyclerview will be the header.

So in the above code, if condition will be true for First, Sixth, eleventh and sixteenth iterations of the for loop.

When the if condition is true, an object of the HeaderModel class is created, populated with the name and then it is inserted into the arraylist of interface (which is listItemArrayList).

When the if condition is false, an object of the ChildModel class is created, populated with name and then it is inserted in the arraylist of interface (which is listItemArrayList).

After the successful call of the populateList() method, listItemArrayList passed into the constructor of the Adapter class using below lines

Step 6. Custom Adapter

Now finally, we are at the adapter class to fill the recyclerview.

Create a new class named CustomAdapter.java

Add the below code in it

Explanation

Read the below code

We are deciding whether the view of the row should be header view or child view in the above method.

We are using isHeader() method for this purpose.

LAYOUT_HEADER and LAYOUT_CHILD are the integer constants.

Consider below codes of classes

Two classes are defined in the above code.

First one represents the Header and second one is for Child row.

We are just declaring the textviews for header and child row in the above classes.

Now consider the following code

We will set the textview value in onBingViewHolder method.

Here I have checked one if condition. When the if condition is true, textview(tvHeader) which defined in the MyViewHolderHeader class will get the value.

When the if condition is false, textview(tvchild) which defined in the MyViewHolderChild class will get the value.

Also Read,

Last Output

Download the source code for android recyclerview section header

[sociallocker]Download RecyclerView Section Header Code[/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 *