Android RecyclerView Sticky Header Like iphone | Pinned Header

Welcome to Android RecyclerView Sticky Header Like iphone Example.

We are going to develop a recyclerview with pinned headers in this tutorial.

You may have watched this concept of sticky or pinned header in iphone or ios.

Sticky header will stick at the top side of the recyclerview.

Now header can be one or more depending upon the type of the children items of recyclerview.

If there are more than one header, than header will be replace by another header when user scroll up all the items of the old header.

Android’s built in system do not provide any direct method or class to develop this kind of recyclerview.

So we need to use external github library in this example tutorial.

View RecyclerView

Step 1. Fetching Dependency

We will use one github library in this tutorial.

It will allow us to use some classes which are required in this example.

For this, add the below line in build.gradle(Modile:app) file

  • First line will integrate third party library.
  • Other one will fetch the required classes to use RecyclerView.

Step 2. Layout For Header And Children

In this example, we need to create two different layout XML files.

One will represent the header and another will represent children items.

Create a new file in res->layout directory and give it a name recycler_view_header_item.xml

Add the below code in recycler_view_header_item.xml file

  • Just one textview in the above file. You can also add imageview and other widget as per your requirements.

Make another XML file named recycler_view_item.xml and copy the following in it

Step 3. New Interface

Create a new Interface and give it a name Section.java

Code structure for interface Section.java is as below

  • We will use this interface to create an arraylist with the objects of two different model classes.

Step 4. Models For Header And Child

Prepare a new JAVA class and name it as ChildModel.java

Write down the following coding lines in ChildModel.java

Now make another class named HeaderModel.java and code for it is as below

  • These model classes are useful for the maintenance of data while populating the RecyclerView.
  • Models are implementing Section interface and thus it also overrides all the methods of that interface.

Step 5. Section Adapter

Now it is time to write an adapter class for recyclerview.

Make a new class named SectionAdapter.java and write the following lines

Important methods of Adapter

  • In the constructor of this adapter, we are getting an arraylist with objects of the interface “Section
  • This arraylist contains the objects of both ChildModel and HeaderModel.
  • I will explain this arraylist in Main Activity, but for now we will just use it.

Consider the below code

  • Above method is inflating required XML file : recycler_view_header_item.xml or recycler_view_item.xml
  • If viewType is header than compiler will inflate recycler_view_header_item.xml file which is representing the header view.
  • Otherwise it will inflate the recycler_view_item.xml.

Read the following method

  • This method is setting the text in the textview.
  • Compiler will use isHeader() method (from interface) to decide whether the item is header or child.
  • And according to that, it will select the textview to write the name.

Step 6. Main Activity Files

Last but not least, let us make some necessary changes in the main files.

Source Code block for activity_main.xml should look like the below

  • In this file, I have just taken one recyclerview.

In the MainActivity.java file, write the following source code

Going Inside Main Activity

Consider the below source code

  • Second line is creating an arraylist of the objects of the Section Interface.
  • First line is making a string array which contains the types of the vehicles.
  • This string array will provide the headers of the RecyclerView.
  • Third line is also making one string array which is giving us children names for our RecyclerView.

Read the following

  • First one is simply initializing the arraylist.
  • Second one is calling a method populateList()

Code block for populateList() is as the below

  • In this method, compiler will create one for loop with 26 iterations.
  • 26 is the number equal to the number of children items + header items.
  • You should change this number as per the number of children items + header items. in your project.
  • if condition ( if(i == 0 || i == 5 | i == 10 | i == 15) ) is true when there are headers.
  • At this time, compiler will create the object of the HeaderModel class and will add it to the arralist.
  • When the if condition is false, compiler will create the object of the ChildModel class and will add it to the arraylist.

  • Finally, above code will create an object of the adapter class.
  • And then it will add the adapter object to the RecyclerView.

Download Source Code For Android RecyclerView Sticky Header Like iphone

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

1 Response

  1. Marcos says:

    Im having trouble with the onBindViewHolderMethod. Its never called. Also you didt assigned any LinearLayoutManager. I`m not supposed to attach it.

Leave a Reply

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