Imagine that you want to create a vacation-planning application that allows users to
browse a list of popular destinations organized by country. To present a long list of
data, you’ll want to include section information to help orient people within the list.
For example, contacts applications will often group users by the first letter of their last
name, and scheduling applications will group appointments by dates. You can accom-
plish this with a design similar to that used in the iPhone contacts screen, where a sec-
tion header scrolls with the list, with the current section’s header always visible at the
top of the screen. In figure 26.1, the highlighted letters are the section headers, and
the lists below them contain the countries whose name begins with those letters. What
you see in the figure is difficult to create in Android because ListView doesn’t have a
concept of a section or a section header, only of items
within the list.
Android developers often try to solve this problem
by creating two types of list items: a regular item for
data, and a separate item for section headers. We can
do this by overriding the getViewTypeCount()
method to return 2, and modifying our getView()
method to create and return the appropriate type of
item. In practice, however, this will lead to messy
code. If our underlying list of data contains 20 items,
our adapter will need to contain anywhere from 21 to
40 items, depending on how many sections it con-
tains. This can lead to complicated code: the List-
View might want to show the 15th visible item, which
might be the 9th item in the underlying list.
A much simpler approach is to embed the section
header within the list item, and then make it visible
or invisible as needed. This greatly simplifies the
logic for building the list and looking up items when the user makes a selection. We can create a special TextView that overlaps the top of
the list, and update it when the list scrolls a new section into view.
Creating list layoutsOur section header B will be visible for items that start a
new section, and are hidden otherwise. The label C will
always show the data for this slot. The relationships
between item, header, and label
To create an experience like that shown in the previous figure, start by writing the fol-
lowing XML for the section header R, the third header shown in the previous image.
We’ll create this in a separate layout file so we can reuse it for headers that scroll with
the list and the stationary header at the top:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/header"
style="@android:style/TextAppearance.Small"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#0000ff" />
B Custom
background
color
The text has a custom background color B to distinguish it from regular text in the
list. Now, write the following XML for the screen, including the stationary section
header:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="@android:id/list"
B Uses standard
Android list ID
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<include layout="@layout/header"/>
</FrameLayout>
The list B uses the standard Android list ID so we can use it in our subclass of List-
Activity. Include the header in this frame, so it will overlap the list and show the cur-
rent section.
The last XML to create is the list item, which follows, and includes both the data
field and the section header:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<include layout="@layout/header"/>
B Visible sections
headers
<TextView
android:id="@+id/label"
style="@android:style/TextAppearance.Large"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
C Shows data
for the slot
</LinearLayout>
Our section header B will be visible for items that start a
new section, and are hidden otherwise. The label C will
always show the data for this slot. The relationships
between item, header, and label
Providing visible section headers
Next, create an Adapter subclass that will configure the list items. Unlike other
approaches to creating a sectioned list, only getView() needs to be overridden; we
don’t need to return multiple types of views or convert between positions in the visible
list and positions in the underlying data list:
public class SectionAdapter extends ArrayAdapter<String> {
private Activity activity;
public SectionAdapter(Activity activity, String[] objects) {
super(activity, R.layout.list_item, R.id.label, bjects);
B
Provides
XML for
custom
views
this.activity = activity;
}
@Override
public View getView(int position, View view, ViewGroup parent) {
if (view == null) {
view = activity.getLayoutInflater().inflate(
R.layout.list_item, parent, false);
}
TextView header = (TextView) view.findViewById(R.id.header);
String label = getItem(position);
if (position == 0
Checks if item
starts with a
different letter
than preceding
item
C
|| getItem(position - 1).charAt(0) != label.charAt(0)) {
header.setVisibility(View.VISIBLE);
D
Labels
section
header
header.setText(label.substring(0, 1));
} else {
header.setVisibility(View.GONE);
E Hides section
header
}
return super.getView(position, view, parent);
}
}
The ArrayAdapter parent class can do most of the work if we provide B the XML for
its custom views. After creating a list item, check to see whether it starts with a differ-
ent letter than the preceding item C. If it does, then it’s the first item in this section,
and so we label the section header and make it visible D. Otherwise, we hide it E.
Now that the section headers within the list are properly set, write a helper method
that will configure the floating section header at the top of the screen:
private TextView topHeader; B Accesses section header
...
private void setTopHeader(int pos) {
final String text = Countries.COUNTRIES[pos].substring(0, 1);topHeader.setText(text); C Updates text
}
The instance variable B lets us access the section header at the top of the screen.
When we initially create or scroll the list, we’ll call this helper method, which finds the
appropriate letter to use for this section and updates the text C
.jpeg)
.png)
.jpeg)
.png)
.jpeg)
