Android RecyclerView With Header And Footer Example | Sticky Fixed

Android RecyclerView With Header And Footer Example is what you are reading.

In this example, I will show you how to add sticky header and footer to the RecyclerView.

Android do not have built in method to make recyclerview with fixed header and footer.

While ListView have methods like addHeaderView() and addFooterView() methods which simplifies this process.

You may need to have fixed or sticky layout at the starting as well as ending point of the recyclerview to show useful information.

For example, the order summary window of the online food ordering app.

In this screen, you use recyclerview to show different food items with their name, quantity and price.

Here, you can show restaurant name at the header and total of price and quantity at the footer.

Step 1. Write Dependencies

Add the following lines in your build.gradle(Module:app) file

Above lines will enable us to use RecyclerView and CardView in our android studio project.

Step 2. XML files for header and footer

To make a fully customizable header and footer, we need to make XML files for both of them.

So make a new XML resource file under res->layout directory.

Name of this file should be rv_header.xml and add the below code in it.

  • I have taken one textview in this header file.
  • You can add imageview, videoview, button etc. UI widget to make it more attractive.
  • Now under same directory, create another XML file named rv_footer.xml

Write down following source code in rv_footer.xml

  • Again, I am adding just textview in this file. This file is also fully customizable and you can add styles and widgets to it.

Step 3. RecyclerView Specific File

Now it is time to make an XML file which helps to create views of every row of the recyclerview.

Make a new XML resource file under res->layout directory.

Give it a name single_item.xml and write the below code

  • I have written cardview code as a parent of the textview.
  • It will create a cardview section which makes recyclerview more attractive.

Step 4. Model Code

Let us create a model class for data maintenance.

Make a new JAVA class and give it a name HeaderModel.java

Following is the code block for HeaderModel.java

  • There are two types of data. One is the viewType and other is text.
  • viewType means a type of the item, whether it is header, footer or normal.
  • text means simply a value of the recyclerview item.

This class uses separate getter and setter methods for both variables.

Step 5. Adapter of RecyclerView

Adapter will help us to populate our RecyclerView in correct manner.

Prepare a new class named HFAdapter.java and add the below source code

Read the below code

  • First three integers are constants which stands for Header, Footer or Normal.
  • Then compiler will create object of LayoutInflater class.
  • Last line will create an arraylist of objects of HeaderModel class.

Look at the below constructor

  • Constructor will get context and arraylist into the parameter.
  • Then compiler will initialize them both.

Below method,

This method will decide whether the row item is Header, Footer or Normal.

Look at the following code

  • Above method will inflate the required XML file to create the view of the row item.
  • If it is a header then compiler will inflate rv_header.xml , for footer rv_footer.xml, and single_item.xml for normal row.

Now read the below code

  • Compiler will check if the item at given position is header, footer or normal.
  • According to that if condition, compiler will set the text.

Step 6. Final Coding

We at the last part of this example. We will update activity_main.xml and MainActivity.java here.

Code block for activity_main.xml looks like the below

I have just taken one recyclerview in the main file.

Add the following code structure in MainActivity.java

Reading Main Activity

Consider the below source code

  • First one is making an object of the recyclerview.
  • Second is making the object of HFAdapter class.
  • Third one will create an arraylist with the objects of the HeaderModel class.
  • In onCreate() method, compiler will call dataSet() method.

Code for dataSet() method is as the following

  • This method generating the data to populate the arraylist.
  • Compiler will first run a for loop for the number of times equals to the number of recyclerview items + 2 (header and footer)
  • If the value if i is zero, it means that it is the first row of recyclerview.
  • Here, first row is the header of the recyclerview.
  • From second row to last second rows are the recyclerview items and here, compiler will execute the (else if) part.
  • Then, last row of the Recyclerview is the footer so compiler will execute the (else) part.

See RecyclerView Header and Footer

Download source code for Android RecyclerView With Header And Footer

[sociallocker]Download Source Code For RecyclerViewHeaderFooter[/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 *