How to add Header to Recyclerview in Android

In Android, Recyclerview is an advanced, flexible and upgraded version of Listview and Gridview. It is fast becoming one of the most used components in android applications. It uses less memory for listing large amount of datasets and collections. Furthermore, it provides the user a better experience.

I was looking for a finished model to add a header item to the recyclerview, yet, I couldn’t discover something that was concise and clear. In this blog, we will try to develop a model that can be used for adding a header item to recyclerview for android applications.

Have a look at the screenshots below to get an idea about what we are trying to achieve in this tutorial.

Misaligned viewitem output

Actual Output

Let’s get started.

1. Adding Support Library

You need to add the following support libraries to gradle(Module.app) for Recyclerview to work in your project.

1
implementation 'com.android.support:recyclerview-v7:28.0.0'

2. Creating Recyclerview

Use Recyclerview instance of listview for an improved experience and defining it in xml is quite simple. You can define it in xml as follows..

activity_main.xml

1
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2
   xmlns:tools="http://schemas.android.com/tools"
3
   android:layout_width="match_parent"
4
   android:layout_height="match_parent"
5
   android:paddingLeft="@dimen/activity_horizontal_margin"
6
   android:paddingRight="@dimen/activity_horizontal_margin"
7
   android:paddingTop="@dimen/activity_vertical_margin"
8
   android:paddingBottom="@dimen/activity_vertical_margin"
9
   tools:context=".MainActivity">
10
   <android.support.v7.widget.RecyclerView
11
       android:id="@+id/my_recycler_view"
12
       android:scrollbars="vertical"
13
       android:layout_width="match_parent"
14
       android:layout_height="match_parent">
15
   </android.support.v7.widget.RecyclerView>
16
</RelativeLayout>

3. Create two different layouts for Header and Viewitem layout

Here we create two xml layout, one for header item and another one for viewitem.

Headerview holds the UI components needed to be shown in the header item.

Your code for Header item xml should be similar to the one below,

activity_headeritem.xml

1
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2
   xmlns:app="http://schemas.android.com/apk/res-auto"
3
   android:layout_width="match_parent"
4
   android:layout_height="wrap_content"
5
   >
6

7
   <LinearLayout
8
       android:id="@+id/main_dashboard"
9
       android:layout_width="match_parent"
10
       android:layout_height="wrap_content"
11
       android:orientation="vertical"
12
       android:paddingTop="20dp">
13
       <LinearLayout
14
           android:id="@+id/counts_layout"
15
           android:layout_width="match_parent"
16
           android:layout_height="wrap_content"
17
           android:orientation="vertical"
18
           android:paddingLeft="30dp"
19
           android:paddingRight="30dp"
20
           android:paddingBottom="30dp"
21
           >
22
           <LinearLayout
23
               android:layout_width="match_parent"
24
               android:layout_height="wrap_content"
25
               android:orientation="horizontal"
26
               android:weightSum="2">
27
               <LinearLayout
28
                   android:layout_width="0dp"
29
                   android:layout_height="wrap_content"
30
                   android:layout_weight="1"
31
                   android:orientation="vertical">
32

33
                   <TextView
34
                       android:id="@+id/review_needs_count_text"
35
                       android:layout_width="match_parent"
36
                       android:layout_height="wrap_content"
37
                       android:gravity="center"
38
                       android:textColor="@color/ThemePrimaryColor"
39
                       android:textAppearance="@style/customfontstyle"
40
                       android:textStyle="bold"
41
                       />
42

43
                   <TextView
44
                       android:id="@+id/review_needs_text"
45
                       android:layout_width="wrap_content"
46
                       android:layout_height="wrap_content"
47
                       android:layout_gravity="center_horizontal"
48
                       android:gravity="center_horizontal"
49
                       android:text="NEEDS REVIEW"
50
                       android:textColor="@color/disable_login_btn_bg"
51
                       android:textSize="11sp"
52
                       android:textStyle="bold"/>
53

54
               </LinearLayout>
55

56
               <LinearLayout
57
                   android:layout_width="0dp"
58
                   android:layout_height="wrap_content"
59
                   android:layout_weight="1"
60
                   android:orientation="vertical">
61

62
                   <TextView
63
                       android:id="@+id/planned_requests_count_text"
64
                       android:layout_width="match_parent"
65
                       android:layout_height="wrap_content"
66
                       android:gravity="center"
67
                       android:textColor="@color/ThemePrimaryColor"
68
                       android:textAppearance="@style/customfontstyle"
69
                       android:textStyle="bold"
70
                       />
71

72
                   <TextView
73
                       android:id="@+id/inprogress_text"
74
                       android:layout_width="wrap_content"
75
                       android:layout_height="wrap_content"
76
                       android:layout_gravity="center_horizontal"
77
                       android:gravity="center_horizontal"
78
                       android:text="PLANNED REQUESTS"
79
                       android:textColor="@color/disable_login_btn_bg"
80
                       android:textSize="11sp"
81
                       android:textStyle="bold"/>
82

83
               </LinearLayout>
84

85
           </LinearLayout>
86

87
           <LinearLayout
88
               android:layout_width="match_parent"
89
               android:layout_height="wrap_content"
90
               android:orientation="horizontal"
91
               android:layout_marginTop="10dp"
92
               android:weightSum="2">
93

94
               <LinearLayout
95
                   android:layout_width="0dp"
96
                   android:layout_height="wrap_content"
97
                   android:layout_weight="1"
98
                   android:orientation="vertical">
99

100
                   <TextView
101
                       android:id="@+id/inprogress_count_text"
102
                       android:layout_width="match_parent"
103
                       android:layout_height="wrap_content"
104
                       android:gravity="center"
105
                       android:textColor="@color/ThemePrimaryColor"
106
                       android:textAppearance="@style/customfontstyle"
107
                       android:textStyle="bold"
108
                       />
109

110
                   <TextView
111
                       android:id="@+id/completed_text"
112
                       android:layout_width="wrap_content"
113
                       android:layout_height="wrap_content"
114
                       android:layout_gravity="center_horizontal"
115
                       android:gravity="center_horizontal"
116
                       android:text="IN PROGRESS"
117
                       android:textStyle="bold"
118
                       android:textColor="@color/disable_login_btn_bg"
119
                       android:textSize="11sp" />
120

121
               </LinearLayout>
122

123
               <LinearLayout
124
                   android:layout_width="0dp"
125
                   android:layout_height="wrap_content"
126
                   android:layout_weight="1"
127
                   android:orientation="vertical">
128

129
                   <TextView
130
                       android:id="@+id/completed_count_text"
131
                       android:layout_width="match_parent"
132
                       android:layout_height="wrap_content"
133
                       android:gravity="center"
134
                       android:textColor="@color/ThemePrimaryColor"
135
                       android:textAppearance="@style/customfontstyle"
136
                       android:textStyle="bold"
137
                       />
138

139
                   <TextView
140
                       android:id="@+id/planned_requests_text"
141
                       android:layout_width="wrap_content"
142
                       android:layout_height="wrap_content"
143
                       android:layout_gravity="center_horizontal"
144
                       android:gravity="center_horizontal"
145
                       android:text="COMPLETED"
146
                       android:textColor="@color/disable_login_btn_bg"
147
                       android:textSize="11sp"
148
                       android:textStyle="bold"/>
149
               </LinearLayout>
150
           </LinearLayout>
151
       </LinearLayout>
152
   </LinearLayout>
153
</RelativeLayout>

Similar to the Headerview, Listview Items holds the UI components for the view items.

I have attached the xml code for the Listview item below,

activity_listviewitem.xml

1
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2
   android:layout_width="match_parent"
3
   android:layout_height="wrap_content"
4
   xmlns:app="http://schemas.android.com/apk/res-auto"
5
   >
6

7
   <LinearLayout
8
       android:id="@+id/latest_content_layout"
9
       android:layout_width="match_parent"
10
       android:layout_height="wrap_content"
11
       android:orientation="horizontal"
12
       android:weightSum="2"
13
       android:paddingTop="15dp"
14
       android:paddingRight="20dp"
15
       android:paddingBottom="15dp"
16
       android:paddingLeft="5dp"
17
       >
18

19
       <LinearLayout
20
           android:layout_width="wrap_content"
21
           android:layout_height="wrap_content"
22
           android:orientation="vertical"
23
           android:layout_gravity="center_horizontal"
24
           >
25

26
           <com.like.LikeButton
27
               android:id="@+id/upward_image"
28
               android:layout_width="40dp"
29
               android:layout_height="40dp"
30
               app:icon_size="25dp"
31
               app:anim_scale_factor="2"
32
               app:like_drawable="@drawable/arrow_up_colored"
33
               app:unlike_drawable="@drawable/arrow_up_icon"
34
               android:layout_gravity="center_horizontal"
35
               app:circle_start_color="@color/ThemeColor"
36
               app:dots_primary_color="@color/ThemeColor"
37
               app:dots_secondary_color="@color/ThemeColor"
38
               app:circle_end_color="@color/ThemeColor"/>
39

40
           <TextView
41
               android:id="@+id/count_upward_text"
42
               android:layout_width="wrap_content"
43
               android:layout_height="wrap_content"
44
               style="@style/UpvoteTextStyle"
45
               android:layout_gravity="center_horizontal"
46
               />
47

48
       </LinearLayout>
49

50
       <LinearLayout
51
           android:id="@+id/latest_feed_layout"
52
           android:layout_width="wrap_content"
53
           android:layout_height="wrap_content"
54
           android:orientation="vertical"
55
           android:layout_marginTop="5dp"
56
           android:layout_marginLeft="5dp"
57
           android:layout_weight="1.8">
58

59
           <TextView
60
               android:id="@+id/latest_tab_title_text"
61
               android:layout_width="match_parent"
62
               android:layout_height="wrap_content"
63
               style="@style/TitletextStyle"
64
               />
65

66
           <TextView
67
               android:id="@+id/latest_tab_descrip_text"
68
               android:layout_width="match_parent"
69
               android:layout_height="wrap_content"
70
               android:maxLines="3"
71
               style="@style/DescriptiontextStyle"
72
               />
73

74
           <LinearLayout
75
               android:layout_width="match_parent"
76
               android:layout_height="wrap_content"
77
               android:orientation="horizontal"
78
               android:layout_marginTop="5dp">
79

80
               <TextView
81
                   android:id="@+id/comment_count_text"
82
                   android:layout_width="wrap_content"
83
                   android:layout_height="wrap_content"
84
                   style="@style/CommentstextStyle"
85
                   />
86

87
               <TextView
88
                   android:layout_width="wrap_content"
89
                   android:layout_height="wrap_content"
90
                   android:text="@string/comments_text"
91
                   style="@style/CommentstextStyle"
92
                   />
93

94
               <TextView
95
                   android:id="@+id/latest_tab_status_text"
96
                   android:layout_width="wrap_content"
97
                   android:layout_height="wrap_content"
98
                   style="@style/StatusTextStyle"
99
                   android:textColor="@color/inprogress_status_color"/>
100
           </LinearLayout>
101
       </LinearLayout>
102
   </LinearLayout>
103
</RelativeLayout>

4. CustomAdapterclass.java

We have achieved adding the header item to recyclerview by using the viewtype property. So now we will create custom adapter for Recyclerview. In onCreateViewHolder method, we have to use two inflate methods, which will help you to define your layout.xml. You should extend your adapter with “RecyclerView.Adapter” which follows the viewtype property.

CustomAdapter.java

1
public class CustomAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
2

3
   private static final int TYPE_HEADER:0;
4
   private static final int TYPE_ITEM:1;
5

6
   private List<ViewItemsModel> viewitemlists;
7
   private Context context;
8

9
   public CustomAdapter(Context context, List<ViewItemsModel> viewitemlists) {
10
       this.context:context;
11
       this.viewitemlists:viewitemlists;
12
   }
13

14
   @Override
15
   public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
16
       if (viewType == TYPE_ITEM) {
17
           // Here Inflating your recyclerview item layout
18
           View itemView:LayoutInflater.from(parent.getContext()).inflate(R.layout.activity_listviewitem, parent, false);
19
           return new ItemViewHolder(itemView);
20
       } else if (viewType == TYPE_HEADER) {
21
           // Here Inflating your header view
22
           View itemView:LayoutInflater.from(parent.getContext()).inflate(R.layout.activity_headeritem, parent, false);
23
           return new HeaderViewHolder(itemView);
24
       }
25
       else return null;
26
   }
27

28
   @Override
29
   public void onBindViewHolder(final RecyclerView.ViewHolder holder, int position) {
30

31
       if (holder instanceof HeaderViewHolder){
32
           setheadersdata_flag:true;
33
           HeaderViewHolder headerViewHolder:(HeaderViewHolder) holder;
34

35
           // You have to set your header items values with the help of model class and you can modify as per your needs
36

37
            headerViewHolder.txt_needsreview.setText("YOUR _HEADERVIEW_STRING");
38

39
        }
40
       else if (holder instanceof ItemViewHolder){
41

42
           final ItemViewHolder itemViewHolder:(ItemViewHolder) holder;
43

44
           // Following code give a row of header and decrease the one position from listview items
45
           final LatestTabModel.ViewItemsModel data:latestlists.get(position-1);
46

47
           // You have to set your listview items values with the help of model class and you can modify as per your needs
48

49
           itemViewHolder.title.setText(data.getTitle());
50

51
       }
52
   }
53

54
   @Override
55
   public int getItemViewType(int position) {
56
       if (position == 0) {
57
           return TYPE_HEADER;
58
       }
59
       return TYPE_ITEM;
60
   }
61

62

63
// getItemCount increasing the position to 1. This will be the row of header
64
   @Override
65
   public int getItemCount() {
66
       return latestlists.size()+1;
67
   }
68

69

70
 private class HeaderViewHolder extends RecyclerView.ViewHolder {
71
       TextView txt_needsreview,txt_planned,txt_inprogress,txt_completed;
72

73
       public HeaderViewHolder(View view) {
74
           super(view);
75
           txt_needsreview:(TextView) view.findViewById(R.id.review_needs_count_text);
76
           txt_planned:(TextView) view.findViewById(R.id.planned_requests_count_text);
77
           txt_inprogress:(TextView) view.findViewById(R.id.inprogress_count_text);
78
           txt_completed:(TextView) view.findViewById(R.id.completed_count_text);
79
       }
80
   }
81

82
   public class ItemViewHolder extends RecyclerView.ViewHolder {
83

84
       TextView title,description,upward_count,comment_count,status;
85
       LinearLayout latest_feed_layout;
86
       LikeButton upvote_image;
87
      public ItemViewHolder(View itemView) {
88
           super(itemView);
89

90
           title:(TextView) itemView.findViewById(R.id.latest_tab_title_text);
91
           description:(TextView) itemView.findViewById(R.id.latest_tab_descrip_text);
92
           upward_count:(TextView) itemView.findViewById(R.id.count_upward_text);
93
           comment_count:(TextView) itemView.findViewById(R.id.comment_count_text);
94
           status:(TextView) itemView.findViewById(R.id.latest_tab_status_text);
95
           latest_feed_layout:(LinearLayout)                     itemView.findViewById(R.id.latest_feed_layout);
96
           upvote_image:(LikeButton) itemView.findViewById(R.id.upward_image);
97

98
       }
99
   }
100
  }

getItemViewType() provides the viewtype property to Recyclerview, which helps with scrolling the Recyclerview.

getItemCount() increases the list item position by one (listitem + 1). It provides the row under the header.

5. MainActivity.java

In this class, we have to pass the adapter class of Recyclerview to complete the scrolling function. Finally, we achieve the complete function of Recyclerview with Header view.

MainActivity.java

1
public class MainActivity extends AppCompatActivity {
2

3
   RecyclerView recyclerView;
4
   LinearLayoutManager linearLayoutManager;
5
   @Override
6
   protected void onCreate(Bundle savedInstanceState) {
7
       super.onCreate(savedInstanceState);
8
       setContentView(R.layout.activity_main);
9
       recyclerView:(RecyclerView)findViewById(R.id.my_recycler_view);
10
       linearLayoutManager:new LinearLayoutManager(this);
11
       MyRecyclerAdapter adapter:new MyRecyclerAdapter(getActivity(), getListViewItems());
12
       recyclerView.setLayoutManager(linearLayoutManager);
13
       recyclerView.setAdapter(adapter);
14
   }
15
}

This brings us to the end of this tutorial. I hope that you have learned how to create a recyclerview for your android app. Now, you can run this on your android device and see the output for yourself. This output seems to be exactly what you want.