Skip to main content

Android RecyclerView Adapter with Header and footer inside fragment

In my previous post we show you how to use RecyclerView with the header. In this post, I will show you how to create a RecyclerView adapter for a fragment which should have inbuilt header and footer and we can dynamically show or hide the header and footer as per our requirement.

Create Project


First of all, create a project with the name of RecyclerViewFragment and use the empty Activity and put all other things as default. By default, a MainActivity.java will get created and a layout XML file will get created.
Adapter with Header and Footer

Here we create an adapter which we will use with the fragment. Just go step by step to create our adapter.

Constructor of Adapter


public Adapter(Context context, List<String> data, boolean isHeader, boolean isFooter){  
this.context=context;
this.data=data;
this.isHeader=isHeader;
this.isFooter=isFooter;
}

Above you can see that we have four parameters in the constructor of the adapter.
context -- Context reference of the parent.

data -- Data which will be displayed on the RecylcerView

isHeader -- It is Boolean variable to check whether Header View required or not



isFooter -- It is Boolean variable to check whether Footer View required or not.


CreateViewHolder Method to show the header and footer


In this part, we are creating the view dynamically as required if we required Header View then we inflate the header view, if we required Footer then we will inflate the footer view.
 @Override  
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if(viewType==VIEW_HEADER) {
return new headView(LayoutInflater.from(context).inflate(R.layout.header, parent, false));
}
else if (viewType==VIEW_FOOTER){
return new footerView(LayoutInflater.from(context).inflate(R.layout.footer, parent, false));
}
else {
return new itemView(LayoutInflater.from(context).inflate(R.layout.row_layout, parent, false));
}
}

OnBindViewHolder Method


In this part, we are overriding onBindViewHolder method of adapter to perform the action as required. If we have to show header then we will perform the action as required by header view, if we have show footer then we will perform the action as required for footerview.
 @Override  
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if(holder instanceof headView){
((headView) holder).header.setText("This is Header");
Log.d("Item View","Binding Item header at"+position);
}
else if(holder instanceof footerView) {
((footerView) holder).footer.setText("This is Footer");
}
else {
((itemView) holder).itemName.setText(getName(position));
Log.d("Item View","Binding Item "+position);
}
}

How to get count of the Item in Recylerview


Using this method we get the count of the item in our recyclerview. It will be used to dynamically change the item count in recycler view depnding on header, footer and actual item count.
 @Override  
public int getItemCount() {
int itemCount=data.size();
//if header is required then increase the number of count by one if(isHeader){
itemCount=itemCount+1;
}
if( isFooter){
itemCount=itemCount+1;
}
return itemCount;
}

How to get the data dynamically by type of Recyclerview


This is the sample method to get the dynamic data depending on the type of the recyclerview. You can create the other similar method to get the data as per your
 public String getName(int position){  
if(isHeader){
return data.get(position-1);
}
else return data.get(position);
}

How to get the type of the View


Here we are overriding the method getItemViewType to get the type of the view depending on the position of the view. There are two important method which are used in conjunction with these two method fist on isFooter and second is isHeader. In both method we call with position of the view and method return true or false.
 @Override  
public int getItemViewType(int position) {
if (isHeader && isHeader(position))
return VIEW_HEADER;
else if (isFooter && isFooter(position)){
return VIEW_FOOTER;
}
else return VIEW_ITEM;
}
private boolean isFooter(int position) {
return position==getItemCount()-1;
}
private boolean isHeader(int position)
{
return position == 0;
}

Create the View Holder for Header, Footer and Item of RecyclerView


Below is the three type of the view holder which we are using in this example, making it simple so you should grab it easily. As per their name headView is the view holder for header, footerView is the view holder for footer and itemView is the view holder for the item inside our recyclerview.
 public class headView extends RecyclerView.ViewHolder {  
protected TextView header;
public headView(View v) {
super(v);
header = (TextView) v.findViewById(R.id.header);
}
}
public class footerView extends RecyclerView.ViewHolder {
protected TextView footer;
public footerView(View v) {
super(v);
footer = (TextView) v.findViewById(R.id.footer);
}
}
public class itemView extends RecyclerView.ViewHolder {
protected TextView itemName;
public itemView(View v) {
super(v);
itemName = (TextView) v.findViewById(R.id.item_name);
}}

Adapter to show the header and footer with fragement


 package com.debugandroid.RecyclerViewFragment;  
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import java.util.List;
/**
* Created by PK on 9/20/2016.
*/
public class Adapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
private boolean isHeader;
private boolean isFooter;
private List<String> data;
private Context context;
public static final int VIEW_HEADER = 0;
public static final int VIEW_FOOTER = 2;
public static final int VIEW_ITEM = 1;
public Adapter(Context context, List<String> data, boolean isHeader, boolean isFooter){
this.context=context;
this.data=data;
this.isHeader=isHeader;
this.isFooter=isFooter;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if(viewType==VIEW_HEADER) {
return new headView(LayoutInflater.from(context).inflate(R.layout.header, parent, false));
}
else if (viewType==VIEW_FOOTER){
return new footerView(LayoutInflater.from(context).inflate(R.layout.footer, parent, false));
}
else {
return new itemView(LayoutInflater.from(context).inflate(R.layout.row_layout, parent, false));
}
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if(holder instanceof headView){
((headView) holder).header.setText("This is Header");
Log.d("Item View","Binding Item header at"+position);
}
else if(holder instanceof footerView) {
((footerView) holder).footer.setText("This is Footer");
}
else {
((itemView) holder).itemName.setText(getName(position));
Log.d("Item View","Binding Item "+position);
}
}
// to Check the number of item
@Override
public int getItemCount() {
int itemCount=data.size();
//if header is required then increase the number of count by one
if(isHeader){
itemCount=itemCount+1;
}
if( isFooter){
itemCount=itemCount+1;
}
return itemCount;
}
public String getName(int position){
if(isHeader){
return data.get(position-1);
}
else return data.get(position);
}
@Override
public int getItemViewType(int position) {
if (isHeader && isHeader(position))
return VIEW_HEADER;
else if (isFooter && isFooter(position)){
return VIEW_FOOTER;
}
else return VIEW_ITEM;
}
private boolean isFooter(int position) {
return position==getItemCount()-1;
}
private boolean isHeader(int position) { return position == 0; }
public class headView extends RecyclerView.ViewHolder {
protected TextView header;
public headView(View v) {
super(v);
header = (TextView) v.findViewById(R.id.header);
}
}
public class footerView extends RecyclerView.ViewHolder {
protected TextView footer;
public footerView(View v) {
super(v);
footer = (TextView) v.findViewById(R.id.footer);
}
}
public class itemView extends RecyclerView.ViewHolder {
protected TextView itemName;
public itemView(View v) {
super(v);
itemName = (TextView) v.findViewById(R.id.item_name);
}
}
}

Creating Fragment for our header and footer demo of recycler view


Now we have create the fragment which will be used with recyclerview, so create a class with the name of MyFragment.java and modify it as given below.
 package com.debugandroid.RecyclerViewFragment;  
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.List;
public class MyFragment extends Fragment {
private RecyclerView recyclerView;
private Adapter adapter;
private List<String> data=new ArrayList<String>();
public MyFragment() {}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_my, container, false);
}
@Override
public void onActivityCreated(Bundle savedInstanceState){
super.onActivityCreated(savedInstanceState);
recyclerView= (RecyclerView) getActivity().findViewById(R.id.recyclerView);
for (int i=0;i<=32;i++){
data.add("Item "+i);
}
GridLayoutManager glm = new GridLayoutManager(getActivity(), 2);
glm.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override public int getSpanSize(int position) {
switch (adapter.getItemViewType(position)){
case 0: return 2;
case 1: return 1;
case 2: return 2;
default: return 2;
}
}
});
recyclerView.setLayoutManager(glm);
adapter=new Adapter(getActivity(),data,true,true);
recyclerView.setAdapter(adapter);
}
}

You can also find the fragment xml and other files on GitHub.

MyFragment.xml
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.debugandroid.RecyclerViewFragment.MyFragment">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/recyclerView">
</android.support.v7.widget.RecyclerView>
</FrameLayout>

Binding Fragment with Activity


For binding, the fragment with main activity open the MainActivity.java and modify it as given below.
 public class MainActivity extends AppCompatActivity {  
private Button btn_load;
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Fragment fragment = new MyFragment();
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.replace(R.id.fragment_holder, fragment);
fragmentTransaction.commit();
}
}


XML of the MainActivity.java is available here.

Test your application it will look like as given below.
Header and Footer

Source Code on GitHUB

Comments

Popular posts from this blog

WordPress Android App with REST API And Retrofit

Retrofit is the library which converts your JSON data into Java object. In this tutorial, we will learn about how to implement the Retrofit to create a WordPress Mobile App. As we all know, WordPress is the one of the biggest CMS (Content Management System) of the world. Wordpress full fill the requirements for all most every type of the website. So, in this tutorial, I am going to learn how to create an Android App using the WordPress REST API and Retrofit.
What is Retrofit?
If you want to know about Retrofit, I would like to give you just a simple one-line explanation of the Retrofit. It is a library which converts your REST HTTP request to Java interface. We will learn how we can do all these stuff using some very simple steps.

Further, you can check the Retrofit Library here.

So, In this tutorial, we will use the Retrofit to retrieve all post and there except ( A short Description of Post) form a WordPress website.
Prerequisite for using the Retrofit for WordPress Android App
There is s…

Flutter Theme Creation, Programmatic Way

Flutter and Dart is an excellent combination for creating the mobile app with material design with nice GUI. Its lots of widget which help the developer for creating the app UI very fast with respect to the other language. You may face some problem in starting due to comm, curly brace and semicolon but after some time you will find the way how to work with these all stuff and it becomes very easy for you. But in this article, we are not going to discuss all these. In this article, we will handle a very interesting topic on how to create a custom theme or multiple themes and let's user decide which theme to use.



Create a flutter project



So let's create a flutter project by selecting the appropriate option from the File menu in android studio or Visual Code. If you are new to Flutter and Dart you can check out our recent post to get started Creating Cross-platform app using flutter.



Once your project is created you will get the default counter app and you try running the app in the…

Flutter How to Start Android Activity from Flutter View

Flutter and Dart is an excellent combination for creating the UI, but for accessing the platform-specific service we need to open platform-specific activity. So lets in this article we will explore how to start an android activity and access the service from Flutter View.

Create a Project for this Android Activity Flutter View Demo Create a Project From File menu select the New Flutter Project Enter the project name Select the AndroidX support and click on next After the above, we step click on Finish We will have the following project structure created. Create the Second Activity in Android
Just go to the android folder and open it in separate windows. We will have the following project structure.









Create the Activity Just right click on the Kotlin folder and create a blank activity from the menu. If you create the activity then you may be required to upgrade the Gradle and do some import. So Just click on update and wait for the project sync completed.
Update the project build config …