Android ListView Header

In this Android tip, I am going to show you how to display ListView header. A ListView header is a fixed view to appear at the top of the list. It can be a single view or a ViewGroup that contains multiple views. The ListView object has a method called addHeaderView() that allows you display the header of the ListView. Typically, the addHeaderView() method is called before the setAdapter() method is called. In the example application below, the ListView displays model and price of some smart phones. So, the header view is a ViewGroup that contains two TextViews. One TextView shows "Model" word and another one shows "Price" word at the top of the ListView.
To get started with the example application on displaying ListView header, you create a new Android project. Then modify the activity_main.xml file to add a ListView widget as shown below.


<LinearLayout 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.example.andexample.MainActivity"

>
<ListView
   android:id="@+id/listview"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   >
  
  
</ListView>
</LinearLayout>



Then, you create rowlayout.xml file in the res/layout folder. This file defines a row template of the ListView. The TableLayout is used to arrange two TextViews in a table that has two columns. The first TextView (displaying phone's model) is in the first column and the second TextView (displaying phone's price) is in the second column.


<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:stretchColumns="*"
>
   <TableRow
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
  
     >
   <TextView
   android:id="@+id/txtname"
   android:layout_column="0"
     android:padding="10sp"
   android:gravity="left"
   android:layout_span="2"
     >
</TextView>
<TextView
   android:id="@+id/txtprice"
   android:layout_column="1"
     android:padding="10sp"
     android:gravity="left"  
     >
</TextView>
</TableRow>


</TableLayout>




In the src folder, you need to create a class called LstAdapter that extends the ArrayAdapter. An instance of the LstAdapter is used to bind data to the ListView.

 package com.example.andexample;
import java.util.ArrayList;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
public class LstViewAdapter extends ArrayAdapter<String> {
int groupid;
String[] item_list;
ArrayList<String> desc;
Context context;
public LstViewAdapter(Context context, int vg, int id, String[] item_list){
super(context,vg, id, item_list);
this.context=context;
groupid=vg;
this.item_list=item_list;

}
// Hold views of the ListView to improve its scrolling performance
static class ViewHolder {
   public TextView textname;
   public TextView textprice;
  
}

public View getView(int position, View convertView, ViewGroup parent) {

View rowView = convertView;
// Inflate the rowlayout.xml file if convertView is null
if(rowView==null){
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
rowView= inflater.inflate(groupid, parent, false);
ViewHolder viewHolder = new ViewHolder();    
     viewHolder.textname= (TextView) rowView.findViewById(R.id.txtname);
     viewHolder.textprice= (TextView) rowView.findViewById(R.id.txtprice);
     rowView.setTag(viewHolder);    
    
}
// Set text to each TextView of ListView item
String[] items=item_list[position].split("__");
ViewHolder holder = (ViewHolder) rowView.getTag();
holder.textname.setText(items[0]);
holder.textprice.setText(items[1]);
   return rowView;
}

}

In the res/layout folder, you create another layout file called header.xml file that defines the header view of the ListView.

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:stretchColumns="*"
>
   <TableRow
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
  
     >
   <TextView
   android:layout_column="0"
     android:padding="10sp"
   android:gravity="left"
   android:layout_span="2"
   android:text="Model"
   android:textStyle="bold"
   android:background="#c0c0c0"
     >
</TextView>
<TextView
   android:layout_column="1"
     android:padding="10sp"
     android:gravity="left"
     android:text="Price"
     android:textStyle="bold"
     android:background="#c0c0c0"
     >
</TextView>
</TableRow>


</TableLayout>



In the values/strings.xml file, you define a string array resource that is the data source of the ListView. In the MainActivity class, you will use the getResources().getStringArray() to get the string array resource to be passed to the LstAdapter's constructor when you construct an object of the LstAdapter class to bind data to the ListView.


<?xml version="1.0" encoding="utf-8"?>

<resources>

   <string name="app_name">AndExample</string>
   <string name="hello_world">Hello world!</string>
   <string name="action_settings">Settings</string>
   <string-array name="list_items">
   <item>iPhone 6__845$</item>
   <item>iPad Air__800$</item>
   <item>iPad Mini 2__500$</item>
   <item>Galaxy Note 4__740$</item>
   <item>Galaxy Alpha__599$</item>
   <item>Galaxy Golden__950$</item>
  
   </string-array>

</resources>



Finally, in the onCreate() method of the MainActivity class, you create a reference to the ListView using findViewById() method, inflate the header view using inflate(), add the header view to the ListView using addHeaderView() method, and bind the data source to the ListView using setAdapter() method.

package com.example.andexample;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.ViewGroup;
import android.widget.ListView;

public class MainActivity extends Activity{

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

ListView lstview=(ListView)findViewById(R.id.listview);
// Inflate header view
ViewGroup headerView = (ViewGroup)getLayoutInflater().inflate(R.layout.header, lstview,false);
// Add header view to the ListView
lstview.addHeaderView(headerView);
// Get the string array defined in strings.xml file
String[] items=getResources().getStringArray(R.array.list_items);
// Create an adapter to bind data to the ListView
LstViewAdapter adapter=new LstViewAdapter(this,R.layout.rowlayout,R.id.txtname,items);
// Bind data to the ListView
lstview.setAdapter(adapter);
}
}

Android-ListView-Header

Posted by: Data | post date: 10-23-2014 | Subject: Android Apps Development

write programming tip



This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.