How To Add Header Footer to ExpandableListview ChildView

1 Star2 Stars3 Stars4 Stars5 Stars (7 votes, average: 5.00 out of 5)
Loading...

 

I recently worked on a project, where I found it challenging initially to add a header and footer to the ExpandableListView childView. Here I document the solution I found to overcome the challenge.

Ho Ngoc Trang,  trangho214@gmail.com, is the author of this article and she contributes to RobustTechHouse Blog

 

XML layout files

In order to create an expandable list view with header and footer to the child view, we will need five xml layout files. The first one is for displaying the main layout containing the ExpandableListview, the second one is for group item layout, the third is for the child item layout and the other two are for header and footer of the childview.

activity_main.xml

Open activity_main.xml layout in res/layout and add the ExpandableListView element:

 

parent_row.xml

Create another xml file for list view group header and name it as parent_row.xml and copy the following content.

 

child_row.xml

Create a new layout file child_row.xml in res/layout and copy the following content.

 

child_header.xml

Create a new layout file child_header.xml in res/layout and copy the following content.

 

child_footer.xml

Create a new layout file child_footer.xml in res/layout and copy the following content.

 

Model Classes

According to the structure of an expandable list view, we need to have at least two classes, one for the child and another one for group/parent.

ChildObject.java

ChildObject class will hold all fields displayed in the child row view.

 

ParentObject.java

ParentObject will hold all fields displayed in the group/parent row view including fields for header and footer.

 

Custom adapter for ExpandableListView

This is the important part of this tutorial where we actually create the header and footer for the ExpandableListView ChildView.

We are going to create a custom adapter named MyExpandableAdapter. This class is extended from BaseExpandableListAdapter, which provides required methods to render the ExpandableListView.

Create a class and name it as MyExpandableListView, then add the following code.

 

There are many methods in this class but there are only two of them we need to focus on:

getChildrenCount: return the count of row of child item in a specific group. Here I’ve added two extra rows to the return method. The first row will be used for header and the second row will be used for footer.

getChildView: render the child list of each group. Here we will check the child position to inflate the appropriate layout to each row. The layout of header and footer will be inflated to the first and last of childPostion and the rest will show all items of the child list.

 

Main activity and sample data for expandable list view

Once you are done with creating a custom adapter for your expandable list view, open the MainActivity class and copy the following code. In this activity I have also created sample data to display in the expandable list view.

 

Output

How To Add Header Footer to ExpandableListview ChildView

 

 

Conclusion

I have just showed you how I added a header and footer to the ExpandableListView ChildView. Hope you find this post useful.

The completed project can be downloaded at GitHub HeaderAndFooterForExpandableListview

 

If you like our articles, please follow and like our Facebook page where we regularly share interesting posts  and check out our other blog articles.

RobustTechHouse is a leading tech company focusing on mobile app development in Singapore. If you are interested to have us work with you on your projects, you can contact us here.

Recommended Posts
Contact Us

We look forward to your messages. Please drop us a note for any enquiries and we'll get back to you, asap.

Not readable? Change text. captcha txt
JMLHackerNewsVN