How to Use Android addHeaderView

Question

Can Android's addHeaderView() be used to add multiple headers throughout a single ListView? Can someone give an example of how to do this?

I was able to accomplish what I wanted by manipulating the IconicAdapter Class... is there any reason why I should not do it this way? I feel this could be modified for more advanced implementations. In my case, I know that I will have two sections, with a header + 2 rows in each section.

class IconicAdapter extends ArrayAdapter<String> {
    IconicAdapter() {
        super(ContactTabProfileResource.this, R.layout.row_iconic, mArrayList);
    }


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

        LayoutInflater inflater = getLayoutInflater();
        View row = null;

        if(position == 1 || position == 5) { // phone 
            row = inflater.inflate(R.layout.row_iconic, parent, false);
            TextView label =(TextView)row.findViewById(R.id.label);
            label.setText(mArrayList.get(position));
            ImageView icon = (ImageView)row.findViewById(R.id.rowicon);
            icon.setImageResource(R.drawable.icon_phone);
        } else if (position == 2 || position == 6) { // email
            row = inflater.inflate(R.layout.row_iconic, parent, false);
            TextView label =(TextView)row.findViewById(R.id.label);
            label.setText(mArrayList.get(position));
            ImageView icon = (ImageView)row.findViewById(R.id.rowicon);
            icon.setImageResource(R.drawable.icon_email);
        } else if (position == 0 || position == 4) { // section header
            row = inflater.inflate(R.layout.row_header, parent, false);
            TextView label =(TextView)row.findViewById(R.id.label);
            label.setText(mArrayList.get(position));
            label.setBackgroundColor(Color.GRAY);   
        } else if (position == 3) { // section divider
            row = inflater.inflate(R.layout.row_header, parent, false);
            TextView label =(TextView)row.findViewById(R.id.label);
            label.setText(" ");
        }

        return(row);

    }
}

Then I created two different XML layouts. row_header.xml is for the header rows and row_iconic.xml is for the non-header rows, which contain an icon.

row_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal"
  android:gravity="right"
>    

  <TextView
    android:id="@+id/label"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textSize="20sp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:paddingRight="10dp"
    android:paddingLeft="10px"
    android:gravity="left"
    android:textStyle="bold"
    />    
</LinearLayout>

row_iconic.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal"
  android:gravity="right"
>    

  <TextView
    android:id="@+id/label"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textSize="16sp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:paddingRight="10dp"
    android:paddingLeft="44px"
    />  
    <ImageView
    android:id="@+id/rowicon"
    android:layout_width="40dp"
    android:paddingRight="10dp"
    android:paddingTop="10dp"
    android:layout_height="30dp"        
    android:src="@drawable/icon"
    />    
</LinearLayout>

Answer 1

You can add as many headers as you like by calling addHeaderView() multiple times. You have to do it before setting the adapter to the list view.

Answer 2

What you want Android developers might call a list separator or subheading ("headers" and "footers" live only at the top or bottom of the list). The gist of how you can do this is by using a ListAdapter that wraps other ListAdapters and is smart enough to return a header view type for certain rows and keep track of the offsets, or wraps those separator views in their own mini adapters.

Take a look at Mark Murphy's SectionedListAdapter, GPL, which takes the first approach (based on code by Jeff Sharkey), or his MergeAdapter, and see this SO question.

It's a far cry from the graceful handling of smart list subheadings on the iPhone, but it is fairly straightforward to use MergeAdapter and very flexible once you wrap your head around exactly what's going on inside the adapters.

Answer 3

If you want to return different layouts (e.g. items & headers) you have to use getItemViewType(int position). So your adapter code should look like this:

private static final int TYPE_HEADER = 0;
private static final int TYPE_ICONIC = 1;

@Override
public int getViewTypeCount() {
    return 2;   // we have two types, so just return 2
}

@Override
public int getItemViewType(int position) {
    // TODO: return TYPE_HEADER here if this position is a header, otherwise return TYPE_ICONIC
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // TODO: return the appropriate layout
    // hint: you might call getItemViewType(position) yourself here to know of which type the layout is
}

That's basically how it works. To ensure the headers are not selectable, you might want to throw ArrayAdapter away and use ListAdapter instead, overriding isEnabled(int position) to return false for your header views. ;-)

Answer 4

You can also use this class as an example. It supports "sections" and "actions", where "sections" are just groups of "actions" (items), they have non-clickable and non-selectable item - header. "Actions" can specify onClick handler which will be called when this "action" will be pressed, if exist. It also contains ImageLoader to fetch images for the "actions" from the web.