Android ListView With Header And Footer Example | addheaderview
Article of today is about Android ListView With Header And Footer Example.
We can add fixed header and footer to listview which are always visible.
Android have built in methods like addheaderview and addfooterview for ListView class.
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.
Look Header And Footer
Step 1. Separate Views
We need to create separate views for header and footer in this example.
Separate views gives us better options for customization.
First of all create a new XML resource file named header_view.xml
Add the following coding lines in header_view.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?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> |
- I have taken only one textview in the header file.
- You can add imageview to add image, button, videoview or any other UI widget as you like.
- Customize this file with different colors and styles and images to make it more attractive or as per your client’s requirements.
- Make another XML layout resource file in res->layout directory.
Name of this file should be footer_view.xml
Copy the below source code in footer_view.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?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> |
- This file will create the view for footer.
- I have make it same as the header view with just one textview.
- You can also customize this file with various UI widgets and styles.
Step 3. XML file For ListView
Now we will make a listview.
- For this, we need to make one layout file which will represent the each row layout of the listview.
Prepare a new XML file named listview_item.xml and add the following lines
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?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> |
- Again, only one textview with some properties like, textcolor, textsize, textstyle, background color etc.
- All the rows of the listview will get the view like above file.
Step 5. List Adapter
Every listview require adapter class for data management.
Make a new JAVA class and set the name ListAdapter.java
Code structure for ListAdapter.java is as the following
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
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; } } |
Starring at adapter
Read the below lines
|
1 2 3 4 5 6 7 8 |
private Context context; private int digit[] = new int[] {}; public ListAdapter (Context context, int digit[]) { this.context = context; this.digit = digit; } |
- Compiler will first make context and integer array.
- Then there is constructor which has two parameters.
- We will initialize our objects for context and integer array using these parameters.
Now consider the following method
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@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; } |
- Using this method, compiler will first inflate the layout file listview_item.xml
- Now every children of listview will get the user interface developed by the listview_item.xml file.
- After this, compiler will set the value of the textview.
- Compiler will use integer array to populate the values in the textview.
Step 6. Final Updates
At last, we need to write some code in activity_main.xml and MainActivity.java files.
Source code for activity_main.xml looks like the below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?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> |
Just one listview and nothing else in this file.
Code block for MainActivity.java is as the below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
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); } } |
Noticing the above
Consider the below source code
|
1 2 3 |
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; |
- First line is giving us the object of the Listview.
- Second is defining one integer array. This integer holds the values from 1 to 18.
- Third line is making an object of the ListAdapter class.
Now see the following coding lines
|
1 2 3 4 5 |
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 |
- First, compiler will create an object of the LayoutInflater class.
- Using this inflater, compiler has inflate the header_view.xml file in the second line.
- Third line is important. We are setting up the header file in this line using addheaderView() method.
Attend the following code block
|
1 2 3 |
//Add Footer View View footerView = inflater.inflate(R.layout.footer_view, null, false); listView.addFooterView(footerView);//Add view to list view as footer view |
- First line will inflate the footer_view to initialize the object (footerView) of the View class.
- Then compiler will stick the footer to the listview using addFooterView() method.
|
1 2 |
listAdapter = new ListAdapter(this,digit); listView.setAdapter(listAdapter); |
Finally, above code will set the adapter into listview and our listview is ready with sticky header and footer.
Download Source Code for Android ListView With Header And Footer
[sociallocker]Download Source Code For ListViewHeaderFooter[/sociallocker]
