Listview with header footer view android

At times we need to add some title to a list view or show some data at the very end of list view . For this we need not pass this data in adapter of listview , instead we can add it as header and views in the following way.

If you are not sure how to create a listview  you can refer these examples.

Step 1: Create a layout xml for the header and footer as per your requirement.

header.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"
    android:orientation="vertical" >

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:text="HEADER"
    android:background="#cf9f99" />

</LinearLayout>

footer.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"
    android:orientation="vertical" >

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:text="FOOTER"
    android:background="#cf9f99" />

</LinearLayout>

Step 2: Now let’s inflate these header and footer views and add it to our list view .

LayoutInflater inflater = getLayoutInflater();
		ViewGroup header = (ViewGroup) inflater.inflate(R.layout.header, listView,
				false);
		ViewGroup footer = (ViewGroup) inflater.inflate(R.layout.footer, listView,
				false);
		listView.addHeaderView(header, null, false);
		listView.addFooterView(footer, null, false);



Complete Code 

LayoutInflater inflater = getLayoutInflater();
		ViewGroup header = (ViewGroup) inflater.inflate(R.layout.header, listView,
				false);
		ViewGroup footer = (ViewGroup) inflater.inflate(R.layout.footer, listView,
				false);
		listView.addHeaderView(header, null, false);
		listView.addFooterView(footer, null, false);

Complete Code

public class MainActivity extends Activity {
	ListView listView;

	static final String[] numbers = new String[] { "one", "two", "three",
			"four", "five", "six", "seven", "eight", "nine", "ten", "eleven",
			"twelve", "thirteen", "fourteen", "fifteen", "sixteen",
			"seventeen", "eighteen", "nineteen", "twenty", "twenty one",
			"twenty two" };
	View header;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		listView = (ListView) findViewById(R.id.list_id);

		//code to add header and footer to listview
		LayoutInflater inflater = getLayoutInflater();
		ViewGroup header = (ViewGroup) inflater.inflate(R.layout.header, listView,
				false);
		ViewGroup footer = (ViewGroup) inflater.inflate(R.layout.footer, listView,
				false);
		listView.addHeaderView(header, null, false);
		listView.addFooterView(footer, null, false);

		ArrayAdapter adapter = new ArrayAdapter(this,
				android.R.layout.simple_list_item_1, numbers);

		listView.setAdapter(adapter);

	}

}

Screenshots:

footerList                        headerList

Download this example form here .

Related Links:

GridView Array Adapter Example

ListView ArrayAdapter Example

Custom ListView Example

Custom Grid View Example

ListView example android

ListView  is used for arranging items in a vertical and scrollable list. ListViews are commonly used to display a large set of similar data.

For example,  displaying list of contacts. Item/row is represented by a single item view. This pattern is quite handy as it shows several contacts on screen at the same time. Its helps displaying list of data in a very simple and scrollable manner.

The simplest way to display a list view is using ArrayAdapter class . You can add lists or arrays of custom objects to it and these objects are referenced using index and displayed in the TextView of ListView.

We set the ArrayAdapter to the ListView to display the items of array adapter in   it .

The following example explains the usage of ListView using ArrayAdapter.

Step1: Create the xml for the activity which contains a ListView

main.xml

<RelativeLayout 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=".MainActivity" >

    <ListView
        android:id="@+id/list_id"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:columnWidth="80dp"
        android:gravity="center"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth" >
    </ListView>

</RelativeLayout>

Step 2:  Create the Activity and use the code mentioned below.

  • Create the ArrayAdapter and add a default layout list style and string array of data to it.
  • Set ListView adapter as the ArrayAdapter.
  • You can set listeners on your list view also.
public class MainActivity extends Activity {
	ListView listView;

	static final String[] numbers = new String[] { "one", "two", "three",
			"four", "five", "six", "seven", "eight", "nine", "ten", "eleven",
			"twelve", "thirteen", "fourteen", "fifteen", "sixteen",
			"seventeen", "eighteen", "nineteen", "twenty", "twenty one",
			"twenty two" };

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		listView = (ListView) findViewById(R.id.list_id);
		ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
				android.R.layout.simple_list_item_1, numbers);

		listView.setAdapter(adapter);
		listView.setOnItemClickListener(new OnItemClickListener() {
			public void onItemClick(AdapterView<?> parent, View v,
					int position, long id) {
				Toast.makeText(getApplicationContext(),
						((TextView) v).getText(), Toast.LENGTH_SHORT).show();
			}
		});
	}

}

Screenshot:

ListView

You can also download the above ListView Example here

Related Posts:

GridView ArrayAdapter Example

Custom Gridview Example 

Custom Listview Example