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.

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

  • 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

  • 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

  • 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

Starring at adapter

Read the below lines

  • 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

  • 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

Just one listview and nothing else in this file.

Code block for MainActivity.java is as the below

Noticing the above

Consider the below source code

  • 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

  • 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

  • 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.

Finally, above code will set the adapter into listview and our listview is ready with sticky header and footer.

Look Header And Footer

Download Source Code for Android ListView With Header And Footer

[sociallocker]Download Source Code For ListViewHeaderFooter[/sociallocker]

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *