Mobile App Development: Tutorial How To Add Header to RecyclerView in Android

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

 

In the previous post, I showed you how to add header and footer to childview of an ExpandableListview. This article is also related to headers, but it’s about how to Add Header to RecyclerView.

RecyclerView is the upgrade of ListView and there are a lot of advantages compared to ListView such as CardView and ViewHolder. CardView allows us to create a complex and friendly UI easily while ViewHolder pattern helps to avoid looking up the UI components all the time the system shows a row. However, it does come with some disadvantages. One of the disadvantages is without support methods such as addHeaderView() or addFooterView() like a ListView do.

I tried to look around on the internet for a completed example showing how to add header to RecyclerView but I couldn’t find one. Here we share an example with you which will show you a header with a text on it and following it is a list of an image and its name.

This example is written in Android Studio with the version of 1.2.2.

 

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

 

 

1. Adding support library

To get RecyclerView and CardView to work on the previous version of Lollipop we need to add support libraries to gradle.

 

 

2. Creating RecyclerView

Using a RecyclerView instance is slightly more complicated. However, defining it in a layout XML file is quite simple. You can define it in a layout as follows:

main_activity.xml

 

 

3. Creating CardView

CardView in this case acts like a list_item. It holds all UI components we need for an item showed in the RecyclerView.

header_item.xml

 

list_item.xml

 

 

4. Classes

We need two classes, which represents two objects working with header and list item.  I named these classes Header and ListItem. For simplicity, I just made the Header class with one field. However you can modify it to meet your needs by adding more fields or change the type of field. ListItem class has two fields – a name and an id. Id represents image and name is the name of image, which will show in each item of the list.

 

Header Class

 

ListItem Class

 

 

5. Custom Adapter

We will create an adapter for our RecyclerView. This adapter must extend RecyclerView.Adapter which is followed by a ViewHolder pattern. As mentioned above, ViewHolder will help the system avoid calling findViewById method every time it shows a row.

 

MyRecyclerAdapter class

 

 

6. Main Activity

In this class I have already created dummy data to use for our RecyclerView. Now all we need to do to complete this job is make an instance of Adapter and pass it to our RecyclerView and see what we will get.

 

Main Activity Class

 

7. Output

Tutorial How To Add Header to RecyclerView in Android

 

Conclusion

Here we have a post related to how to Add Header to RecyclerView. I didn’t show footers specifically in this post because the same principles apply.  Hope you find this post useful.

The completed project can be downloaded here.

 

 

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 engage RobustTechHouse for your projects, you can contact us here.

Recommended Posts
  • Priyanka

    have been searching for a solution from long, this is the only clean and effective of adding headers in recycler view.. Thanks a lot!

  • Parth Vora

    Its not working in android studio 2.1.1 please help!!!

  • Noble Eldhose

    Hai do you ahve any idea about how can we add view pager
    as recycler header

  • Sara Peña

    What to change to implement a footer?

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
Blogging For ECommerceecommerce5