Android ListView Sticky Header Like iphone | Pinned header listview

We will develop Android ListView Sticky Header Like iphone example in this tutorial.

Sometimes you want to make pinned header listview in android app.

This example will guide you to make sticky or pinned header for listview in android studio.

Pinned header means that a header which have certain number of child rows and this header sticks at the top of the ListView.

Then, again there will be another sticky header which will have certain number of children and it replaces old header.

You may have notice this type of listview in iphone or ios.

Android does not have any built in method or class to achieve this type of user interface for listview.

We need to customize out traditional listview and adapter class for this purpose.

Step 1. Adding Colors

I will separate the headers and children with different colors.

Also, different headers may have different colors.

So let us add some colors in res->values->colors.xml file.

Write the following lines in res->values->colors.xml file.

  • I have added blue, green, red and orange colors.
  • You can add many more colors as per your requirements.

Step 2. Adding Image

In this example we need to add one image in the drawable folder.

Download this image by clicking the below link

[sociallocker]Download scrollbarlight Image[/sociallocker]

After downloading the image, add it into res->drawable directory.

We need this image in HeaderListView class which we will create in the next step.

Step 3. Preparing HeaderListView And Section Adapter Class

Create a new JAVA class and give it a name HeaderListView.java

Copy the below code block in HeaderListView.java class

  • This class helps us to make a special listview which can support the sticky header.
  • Above class is the transformation from traditional listview to our desired listview.
  • Now make another new JAVA class named SectionAdapter.java

Write down the following Coding lines in SectionAdapter.java

  • For special listview, we also need to have special adapter with it.
  • Above class is making that special adapter for our special listview.
  • We will extend this adapter while creating the actual adapter for our listview.

Step 4. Ios Adapter

Let us create an adapter what will populate out listview with pinned header.

Make a new class and give it a name IosAdapter.java

Following is the code structure for IosAdapter.java class

Looking Deeply

Let us look what the above class IosAdapter will do actually.

Consider below code

  • This method will return the total number of sticky or pinned headers.

Look the following code

  • Above method is returning the total number of child for ant specific header.
  • Number of header is at the parameter (int section)
  • Above method will return 5 as the number of children for header at the position (int section)

getRowView()

code for above method

  • Above method will generate the view for the children items.
  • We will also set the text for children in this method.
  • Address of child can be like a child of the header at -> position section and a child position for that header is -> int row

Following method getSectionHeaderView() is making a layout for header

  • First parameter of getSectionHeaderView() method is the position (int section) for header.
  • We will set the name of the header in this method.
  • I have also set the background colors in this method using switch statement.

Handling Click Events

To handle the click events of the listview, review the below method

You can have both header and row position in this click event.

Step 5. Main Updates

Now last thing is to update activity_main.xml and MainActivity.java files.

Write the following coding lines in activity_main.xml

  • As you can see in the above code, I have used HeaderListView class to define listview.
  • It is referencing that HeaderListView which we have created in the step 3.
  • Here, in this line <com.example.parsa………ios>, you need to replace it with the package name of your android studio code.
  • You can find your package name in AndroidManifest.xml file.

Now make following source code in MainActivity.java

  • In this main class, we just need to set up the listview with proper adapter.
  • We will set the object of IosAdapter class to the listview.

Last Views For Header

Download Source Code For Android ListView Sticky Header Like iphone

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