How to Android ListView With Header And Footer Example

We can use these methods to make custom header and footer for listview.
Header and Footer will always stick and visible at the start (Header) and end (Footer) of the listview.
Example of this tutorial can be the checkout or bill summary screen of any restaurant
This checkout screen need the header and footer of the listview.
Here, different food items with their name,quantity and price are set in the listview because every order have different number of food items so it is not fix.
And, in the header of the listview, you need to fix the name and logo of the restaurant while in footer, you can show the total amount payable.

Having built in methods is great advantage and simplifies the whole process.
First of all create a new XML resource file named header_view.xml
Add the following coding lines in header_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginTop="10dp"
        android:id="@+id/htv"
        android:padding="10dp"
        android:textColor="#fff"
        android:textStyle="bold"
        android:gravity="center"
        android:textSize="20dp"
        android:text="I am Header View of ListView. Add ImageView, Button etc widget here."
        android:background="#3a0ae7"/>

</LinearLayout>

Name of this file should be footer_view.xml
Copy the below source code in footer_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:id="@+id/ftv"
        android:padding="10dp"
        android:textColor="#fff"
        android:textStyle="bold"
        android:gravity="center"
        android:textSize="20dp"
        android:text="I am Footer View of Listview. Add ImageView, Button etc widget here."
        android:background="#e7660a"/>

</LinearLayout>

Prepare a new XML file named listview_item.xml and add the following lines

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:id="@+id/tv"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:paddingLeft="10dp"
        android:textColor="#fff"
        android:textStyle="bold"
        android:gravity="center_vertical"
        android:background="@color/colorAccent"
        android:text="111"
        android:textSize="20sp"/>

</LinearLayout>

Make a new JAVA class and set the name ListAdapter.java

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class ListAdapter extends BaseAdapter {

    private Context context;
    private int digit[] = new int[] {};

    public ListAdapter (Context context, int digit[]) {

        this.context = context;
        this.digit = digit;
    }

    @Override
    public int getViewTypeCount() {
        return getCount();
    }
    @Override
    public int getItemViewType(int position) {

        return position;
    }

    @Override
    public int getCount() {
        return digit.length;
    }

    @Override
    public Object getItem(int position) {
        return digit[position];
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;

        if (convertView == null) {
            holder = new ViewHolder();
            LayoutInflater inflater = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.listview_item, null, true);

            holder.tvProduct = (TextView) convertView.findViewById(R.id.tv);

            convertView.setTag(holder);
        }else {
            // the getTag returns the viewHolder object set as a tag to the view
            holder = (ViewHolder)convertView.getTag();
        }

        holder.tvProduct.setText("Item Number : "+ digit[position]);

        return convertView;
    }

    private class ViewHolder {

        protected TextView tvProduct;

    }

}

Source code for activity_main.xml looks like the below

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="20dp"
        android:id="@+id/listView">

    </ListView>
</android.support.constraint.ConstraintLayout>

Code block for MainActivity.java is as the below

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

    private ListView listView;
    private int digit[] = new int[] {1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18};
    private ListAdapter listAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        listView = findViewById(R.id.listView);

        LayoutInflater inflater = (LayoutInflater) this.getSystemService(this.LAYOUT_INFLATER_SERVICE);

        //Add Header View
        View headerView = inflater.inflate(R.layout.header_view, null, false);
        listView.addHeaderView(headerView);//Add view to list view as header view

        //Add Footer View
        View footerView = inflater.inflate(R.layout.footer_view, null, false);
        listView.addFooterView(footerView);//Add view to list view as footer view

        listAdapter = new ListAdapter(this,digit);
        listView.setAdapter(listAdapter);

    }
}