Android Header and Footer Tutorial - Androhub

Header and Footer Banner

Android Header and Footer Tutorial

In this tutorial we are going to learn how to implement Header and Footer for ListView and RecyclerViewThe header is a View that displays before first item and footer displays after last item. Most of the apps you had seen who is having header and footer. Same thing we are going to implement in this tutorial.

Prerequisite:

  1. ListView
  2. RecyclerView
  3. Tab Bar Layout

VIDEO DEMO

1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and fill required details. By default my activity is MainActivity.java.

2. Open build.gradle and include this libraries show below:

3. Open strings.xml located under res=>values folder and add following strings.

4. Create new xml file naming colors.xml  under res=>values folder and add the following colors.

5. Create activity_main.xml and add the following code. In this i am using Tab Bar Layout for creating tabs.

6. Create listview_layout.xml for ListView fragment and add ListView to it.

7. Similarly create recyclerview_layout.xml for RecyclerView fragment and add RecyclerView to it.

8. Now we need to create custom row for both ListView and RecyclerView. So we can use same xml for both, so create new xml file naming list_item_row.xml.

9. Now come to MainActivity.java and add the following code for adding tabs and fragments to it.

10. Create new ViewPagerAdapter.java class for ViewPager tab fragments.

11. Now, for Header and Footer View we need to create new layout naming header_footer_view.xml and you can put any design over here.

12. For adding Header and Footer to ListView is very simple because ListView provided us inbuilt method for adding Header and Footer View to it.

  • Header View: 

    Here, headerView is a View that you want to display as ListView Header.
  • Footer View:

Here, footerView is a View that you want to display as ListView Footer.

Note: The above method should be call before notifying adapter.

13. Create a ListView_Fragment.java and add the following code to it.

14. For ListView we need to create CustomAdapter.java class to inflate custom rows.

15. For generating random color for row items, we need to create a class that randomly gives range of colors to set row color. For this create GenerateRandom_Color.java and add the following code to it.

16. Now, create RecyclerView_Fragment.java and add the following code to it. In this code we are toggling between List and Grid type RecyclerView.

17. As you have seen in above point we are using Menu for toggling between List and Grid type RecyclerView. For this we need to create menu_mani.xml under menu directory.

18. Create DemoViewHolder.java class for RecyclerView item holder.

19. Create RecyclerView_HeaderFooter_Holder.java class for RecyclerView Header and Footer holder.

20. For setting Header and Footer in RecyclerView we need to follow some steps because RecyclerView doesn’t provide any methods to do this directly.

  1. Type of View
  2. Add +2 to Array Size because we are using 2 extra views for Header and Footer.
  3.  In getViewType return type of View according to position.
  4.  For Header View the postion should be 0.
  5. For Footer the position should be equals to last item of ArrayList.
  6. While Creating ViewHolder for Header and Footer Type we have to return same RecyclerView_HeaderFooter_Holder that we created in previous point and for Item Type we have to return DemoViewHolder.
  7. Now while BindingViewHolder we have to check the instance of ViewHolder and on the basis of instance we need to display the text and color. Since we are using same holder for both header and footer we need to check if position is equals to 0 then its Header and if position equals to arraySize then its footer.

Note: For getting item from ArrayList for Item Type we need to get it by arrayList.get(position-1) because last item is Footer.

21. Full code of RecyclerView_Adapter.java.

22. Finally, all done run your code.

Thanks. 🙂

 

4 Comments

shadman
Thursday, January 3rd, 2019

where did you add footer and header in RecyclerView. I think it should be inside ‘RecyclerView_Fragment.java’, but couldn’t find in there..

Dr. Droid
Thursday, January 3rd, 2019

Hi Shadman,

No the header and footer is in RecyclerView_Adapter.java class.

Thanks

Lokesh
Sunday, September 22nd, 2019

What if the items are less?
The footer will be attached to the last view. according to the requirement, the footer should be attached to the bottom of the parent

Dr. Droid
Monday, September 23rd, 2019

Hi Lokesh,

If items are less then the footer will come after the last item. But if you want to show it at the bottom of the parent then you have to make a custom view and add it to the bottom of the listview.

Thanks

Post comment

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