Separating Lists with Headers

Separating Lists with Headers in Android 0.9

Monday August 18, 2008 at 4:42 PM

Earlier today thelatest Android 0.9 SDK was released, and it’s packed full of wonderful changes. As you play around, you might see ListViews split into sections using separating headers. (Example shown on the right is the browser settings list.)

There isn’t an easy way of creating these separated lists, so I’ve put together SeparatedListAdapter which does it quickly. To summarize, we’re creating a new BaseAdapter that can contain several other Adapters, each with their own section headers.

First let’s create some simple XML layouts to be used for our lists: first the header view, then two item views that we’ll use later for the individual lists. (Thanks to Romain Guy for helping me find existing styles to keep these XML layouts nice and tidy.)

view plain copy to clipboard print ?

2. <TextView
3. xmlns:android="http://schemas.android.com/apk/res/android"
4. android:id="@+id/list_header_title"
5. android:layout_width="fill_parent"
6. android:layout_height="wrap_content"
7. android:paddingTop="2dip"
8. android:paddingBottom="2dip"
9. android:paddingLeft="5dip"
10. style="?android:attr/listSeparatorTextViewStyle"/>
13. <TextView
14. xmlns:android="http://schemas.android.com/apk/res/android"
15. android:id="@+id/list_item_title"
16. android:layout_width="fill_parent"
17. android:layout_height="fill_parent"
18. android:paddingTop="10dip"
19. android:paddingBottom="10dip"
20. android:paddingLeft="15dip"
21. android:textAppearance="?android:attr/textAppearanceLarge"
22. />
25. <LinearLayout
26. xmlns:android="http://schemas.android.com/apk/res/android"
27. android:layout_width="fill_parent"
28. android:layout_height="wrap_content"
29. android:orientation="vertical"
30. android:paddingTop="10dip"
31. android:paddingBottom="10dip"
32. android:paddingLeft="15dip"
33. >
34. <TextView
35. android:id="@+id/list_complex_title"
36. android:layout_width="fill_parent"
37. android:layout_height="wrap_content"
38. android:textAppearance="?android:attr/textAppearanceLarge"
39. />
40. <TextView
41. android:id="@+id/list_complex_caption"
42. android:layout_width="fill_parent"
43. android:layout_height="wrap_content"
44. android:textAppearance="?android:attr/textAppearanceSmall"
45. />
46. LinearLayout>

Now let’s create the actual SeparatedListAdapter class which provides a single interface to multiple sections of other Adapters. After using addSection() to construct the child sections, you can easily use ListView.setAdapter() to present the now-separated list to users.

As for the Adapter internals, to correctly find the selected item among the child Adapters, we walk through subtracting from the original position until we find either a header (position = 0) or item in the current child Adapter (position <>

Here’s the source for SeparatedListAdapter:

view plain copy to clipboard print ?

1. publicclassSeparatedListAdapterextendsBaseAdapter {
3. publicfinalMapsections =newLinkedHashMap();
4. publicfinalArrayAdapterheaders;
5. publicfinalstaticintTYPE_SECTION_HEADER =0;
7. publicSeparatedListAdapter(Context context) {
8. headers =newArrayAdapter(context, R.layout.list_header);
9. }
11. publicvoidaddSection(String section, Adapter adapter) {
12. this.headers.add(section);
13. this.sections.put(section, adapter);
14. }
16. publicObject getItem(intposition) {
17. for(Object section :this.sections.keySet()) {
18. Adapter adapter = sections.get(section);
19. intsize = adapter.getCount() +1;
21. // check if position inside this section
22. if(position ==0)returnsection;
23. if(position <>returnadapter.getItem(position -1);
25. // otherwise jump into next section
26. position -= size;
27. }
28. returnnull;
29. }
31. publicintgetCount() {
32. // total together all sections, plus one for each section header
33. inttotal =0;
34. for(Adapter adapter :this.sections.values())
35. total += adapter.getCount() +1;
36. returntotal;
37. }
39. publicintgetViewTypeCount() {
40. // assume that headers count as one, then total all sections
41. inttotal =1;
42. for(Adapter adapter :this.sections.values())
43. total += adapter.getViewTypeCount();
44. returntotal;
45. }
47. publicintgetItemViewType(intposition) {
48. inttype =1;
49. for(Object section :this.sections.keySet()) {
50. Adapter adapter = sections.get(section);
51. intsize = adapter.getCount() +1;
53. // check if position inside this section
54. if(position ==0)returnTYPE_SECTION_HEADER;
55. if(position <>returntype + adapter.getItemViewType(position -1);
57. // otherwise jump into next section
58. position -= size;
59. type += adapter.getViewTypeCount();
60. }
61. return-1;
62. }
64. publicbooleanareAllItemsSelectable() {
65. returnfalse;
66. }
68. publicbooleanisEnabled(intposition) {
69. return(getItemViewType(position) != TYPE_SECTION_HEADER);
70. }
72. @Override
73. publicView getView(intposition, View convertView, ViewGroup parent) {
74. intsectionnum =0;
75. for(Object section :this.sections.keySet()) {
76. Adapter adapter = sections.get(section);
77. intsize = adapter.getCount() +1;
79. // check if position inside this section
80. if(position ==0)returnheaders.getView(sectionnum, convertView, parent);
81. if(position <>returnadapter.getView(position -1, convertView, parent);
83. // otherwise jump into next section
84. position -= size;
85. sectionnum++;
86. }
87. returnnull;
88. }
90. @Override
91. publiclonggetItemId(intposition) {
92. returnposition;
93. }
95. }