13

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>

4 Answers 4

13
+50

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.

7

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. ;-)

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.

1
  • I am able to add multiple header views... but they are all appearing at the top of the ListView. I would like to use headers to create sections within the ListView. Not sure how to make the headers appear anywhere other than the top of the ListView
    – Chris
    Sep 20, 2010 at 15:45
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.