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)


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,, 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:




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.






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



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?

  • Pranjal Choladhara

    First item is not visible… Check my code

    import android.content.Context;
    import android.os.Bundle;
    import android.util.Log;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ImageView;
    import android.widget.TextView;
    import android.widget.Toast;

    import com.amulyakhare.textdrawable.TextDrawable;
    import com.amulyakhare.textdrawable.util.ColorGenerator;

    import java.util.ArrayList;

    import in.nxtgym.R;
    import in.nxtgym.emp.ui.Training_Schedule_List;
    import in.nxtgym.emp_detail.ui.Clients;
    import in.nxtgym.member_detail.ui.MemberMaster;
    import in.nxtgym.models.SimpleListModel;

    public class Adptr_SimpleListItem extends RecyclerView.Adapter {
    Context context;
    ArrayList list;
    LayoutInflater inflater;
    private ColorGenerator mColorGenerator = ColorGenerator.MATERIAL;
    private TextDrawable.IBuilder mDrawableBuilder;

    private static final int TYPE_HEADER = 0;
    private static final int TYPE_ITEM = 1;

    public Adptr_SimpleListItem(Context context, ArrayList list){
    this.context = context;
    this.list = list;
    this.inflater = LayoutInflater.from(context);

    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    if(viewType==TYPE_ITEM) {
    View view = inflater.inflate(R.layout.simple_list_item, parent, false);
    return new ItemsView(view);
    else {
    View view = inflater.inflate(R.layout.simple_list_header, parent, false);
    return new Header(view);

    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    if(holder instanceof Header){
    Header header = (Header) holder;
    header.head.setText(“List of Personal Trainers”);
    if(holder instanceof ItemsView) {
    ItemsView itemsView = (ItemsView) holder;
    SimpleListModel items = list.get(position);
    mDrawableBuilder = TextDrawable.builder()
    TextDrawable drawable =, mColorGenerator.getColor(items.getHeadline()));
    itemsView.L_id.setText(“” + items.getID());

    public int getItemViewType(int position) {
    if(position==0){return TYPE_HEADER;}
    return TYPE_ITEM;
    public int getItemCount() {
    return list.size();

    class Header extends RecyclerView.ViewHolder{
    TextView head;
    TextView subhead;
    public Header(View itemView) {
    head = (TextView) itemView.findViewById(;
    subhead = (TextView) itemView.findViewById(;

    class ItemsView extends RecyclerView.ViewHolder implements View.OnClickListener{
    ImageView image;
    TextView L_id;
    TextView L_Headline;
    TextView L_Subhead;

    public ItemsView(View itemView) {
    image = (ImageView) itemView.findViewById(;
    L_id = (TextView) itemView.findViewById(;
    L_Headline = (TextView) itemView.findViewById(;
    L_Subhead = (TextView) itemView.findViewById(;

    public void onClick(View view) {
    int pos = getAdapterPosition();
    long MemberId = list.get(pos).getID();

    Fragment fragment = new Clients();
    Bundle bundle = new Bundle();
    bundle.putLong(“EMP_ID”, MemberId);

    FragmentManager fm = ((FragmentActivity)context).getSupportFragmentManager();
    FragmentTransaction transaction = fm.beginTransaction();
    transaction.replace(, fragment, “MEMBER_MASTER”);



    • Paulo Miranda

      I had the same problem. I did not increase

      //increasing getItemcount to 1. This will be the row of header.


      public int getItemCount() {

      return listItems.size()+1; < —— HERE



      ListItem currentItem = getItem(position-1); < —- decrease

  • Michael David McKenna


  • Michel Marin

    Very nicely done. If I have 6 columns of different widths and different types will all 6 headers be aligned with the data rows? Thank you

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