Question

I have an app that I am trying to work out. In one layout of the app, I have multiple ListView components. The outline looks like this:

<ScrollView>
   <RelativeLayout>
      <TextView />
      <TextView />
      <ListView />
      <ListView />
      <ListView />
      <Button />
   </RelativeLayout>
</ScrollView>

The three separate ListView components are listing 3 different types of items. My problem comes in, that when encapsulated withing the ScrollView, the ListViews decide to only display 1 item each, and then fall to their scroll behavior. What I prefer is for them to show all their items, and let the ScrollView do the scrolling. Is this possible?

I’ve read a few other questions on here, and it seems maybe the convention is to NOT use multiple ListView’s per layout. I would rather make this work if possible, as the 3 separate items listed are related, and make sense to be shown together.

Answer 1

The solution I ended up going with was a Sectioned List Adapter, used to populate a single ListView control in my layout. The Sectioned Adapter causes a ListView to closely resemble a Preferences List. But the Sectioned Adapter is more versatile because you can customize the section seperator items, and include multiple list item layouts. Here’s the breakdown on how to achieve this, assuming you already know the basics of Mono for Android.

First you need a Section Object, which will describe each individual list section.

public class ListSection
{
   private String _caption;
   private String _columnHeader1, _columnHeader2, _columnHeader3;
   private BaseAdapter _adapter;
   public ListSection(String caption, String columnHeader1, String columnHeader2, String columnHeader3, BaseAdapter adapter)
   {
      _caption = caption;
      _columnHeader1 = columnHeader1;
      _columnHeader2 = columnHeader2;
      _columnHeader3 = columnHeader3;
      _adapter = adapter;
   }
   public String Caption { get { return _caption; } set { _caption = value; } }
   public String ColumnHeader1 { get { return _columnHeader1; } set { _columnHeader1 = value; } }
   public String ColumnHeader2 { get { return _columnHeader2; } set { _columnHeader2 = value; } }
   public String ColumnHeader3 { get { return _columnHeader3; } set { _columnHeader3 = value; } }
   public BaseAdapter Adapter { get { return _adapter; } set { _adapter = value; } }
}

This object stores all the information for each section of the list, a caption which will be the title for the section, as well as a column header for each of the 3 columns I want my list to have. Additionally we store a unique list adapter that will provide the Views for this section of the list. This allows you to provide a different adapter for each section. You could extend this section object to further describe the separator section if you wanted, giving you more flexibility, and the chance to change what each section’s basic structure looks like.

Next you need an XML template to describe the separator for the list. Since each of my sections will have the same basic structure, I can recycle the same template each time rather than complicate it further.

<?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">
              <TextView
                        android:id="@+id/caption"
                        android:layout_marginTop="10px"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:textAppearance="?android:attr/textAppearanceSmall" />
              <LinearLayout
                        android:orientation="horizontal"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        style="?android:attr/listSeparatorTextViewStyle">
                        <TextView
                                  android:id="@+id/columnHeader1"
                                  android:layout_marginLeft="10px"
                                  android:layout_width="wrap_content"
                                  android:layout_height="wrap_content"
                                  android:width="100px"
                                  android:textAppearance="?android:attr/textAppearanceSmall" />
                        <TextView
                                  android:id="@+id/columnHeader2"
                                  android:layout_marginLeft="10px"
                                  android:layout_width="wrap_content"
                                  android:layout_height="wrap_content"
                                  android:width="100px"
                                  android:textAppearance="?android:attr/textAppearanceSmall" />
                        <TextView
                                  android:id="@+id/columnHeader3"
                                  android:layout_marginLeft="10px"
                                  android:layout_width="wrap_content"
                                  android:layout_height="wrap_content"
                                  android:width="100px"
                                  android:textAppearance="?android:attr/textAppearanceSmall" />
                        </LinearLayout>
</LinearLayout>

You’ll notice, the Inner LinearLayout control I gave a style=”?android:attr/listSeparatorTextViewStyle” tag. This tells android to give that view a bottom border. If you just wanted a simple TextView separator, you could do this, and just give it this same style tag.

Now my ListAdapters are all basically the same, they just extend a different data object. All three populate 3 columns, all of which fit their data in the same size columns, they are just different logical objects. Each adapter is a BaseAdapter extension that populates a view with the 3 columns of data. I’ve made the assumption here that you know how to create a standard extension of BaseAdapter. What I will show is how to create the ListSectionAdapter.

public class ListSectionAdapter : BaseAdapter<ListSection>
{
   private const int TYPE_SECTION_HEADER = 0;
   private Context _context;
   private List<ListSection> _sections;
   private LayoutInflater _inflater;
   public ListSectionAdapter(Context context)
   {
      _context = context;
      _inflater = Inflater.From(_context);
      _sections = new List<ListSection>();
   }
   public List<ListSection> Sections { get { return _sections; } set { _sections = value; } }
   public override int Count
   {
      get
      {
         int count = 0;
         foreach(ListSection s in _sections) count += s.Adapter.Count + 1;
         return count;
      }
   }
   public override int ViewTypeCount
   {
      get
      {
         int viewTypeCount = 1;
         foreach(ListSection s in _sections) viewTypeCount += s.Adapter.ViewTypeCount;
         return viewTypeCount;
      }
   }
   public override ListSection this[int index] { get { return _sections[index]; } }
   public override bool AreAllItemsEnable() { return false; }
   public override int GetItemViewType(int position)
   {
      int typeOffset = TYPE_SECTION_HEADER + 1;
      foreach(ListSection s in _sections)
      {
         if(position == 0) return TYPE_SECTION_HEADER;
         int size = s.Adapter.Count + 1;
         if(position < size) return (typeOffset + s.Adapter.GetItemViewType(position - 1));
         position -= size;
         typeOffset += s.Adapter.ViewTypeCount;
      }
      return -1;
   }
   public override long GetItemId(int position) { return position; }
   public void AddSection(String caption, String columnHeader1, String columnHeader2, String columnHeader3, BaseAdapter adapter)
   {
      _sections.Add(new ListSection(caption, columnHeader1, columnHeader2, columnHeader3, adapter);
   }
   public override View GetView(int position, View convertView, ViewGroup parent)
   {
      View view = convertView;
      foreach(ListSection s in _sections)
      {
         if(position == 0)
         {
             if(view == null || !(view is LinearLayout)) view = _inflater.Inflate(Resource.Layout.SectionSeparator, parent, false);
             TextView caption = view.FindViewById<TextView>(Resource.Id.caption);
             caption.Text = s.Caption;
             TextView columnHeader1 = view.FindViewById<TextView>(Resource.Id.columnHeader1);
             columnHeader1.Text = s.ColumnHeader1;
             TextView columnHeader2 = view.FindViewById<TextView>(Resource.Id.columnHeader2);
             columnHeader2.Text = s.ColumnHeader2;
             TextView columnHeader3 = view.FindViewById<TextView>(Resource.Id.columnHeader3);
             columnHeader3.Text = s.ColumnHeader3;
             return view;
          }
          int size = s.Adapter.Count + 1;
          if(position < size) return s.Adapter.GetView(position - 1, convertView, parent);
          position -= size;
       }
       return null;
    }
    public override Java.Lang.Object GetItem(int position)
    {
       foreach(ListSection s in _sections)
       {
          if(position == 0) return null;
          int size = s.Adapter.Count + 1;
          if(position < size) return s.Adapter.GetItem(position);
          position -= size;
       }
       return null;
    }
 }

Now all you have to do is in your code, when you are populating the Activity or Layout containing the ListView, create your separate adapters, then create your sectioned adapter and add a section for each separate list type you want in it.

ListAdapterType1 adapter1 = new ListAdapterType1();
ListAdapterType2 adapter2 = new ListAdapterType2();
ListAdapterType3 adapter3 = new ListAdapterType3();

ListSectionAdapter sectionAdapter = new ListSectionAdapter(this);
sectionAdapter.AddSection("Section 1", "Column 1", "Column 2", "Column 3", adapter1);
sectionAdapter.AddSection("Section 2", "Column 1", "Column 2", "Column 3", adapter2);
sectionAdapter.AddSection("Section 3", "Column 1", "Column 2", "Column 3", adapter3);

ListView myList = FindViewById<ListView>(Resource.Id.MyList);
myList.SetAdapter(sectionAdapter);

For the ItemClick event, there may be a better way to do this, but I used the following method, which compares the ToString of the returned Object Types from the GetItem(int) method of the sectioned list, which we’ve extended to return the base list adapter object type.

private void MyList_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
{
ListSectionAdapter adapter = (sender as ListView).Adapter as ListSectionAdapter;
if(adapter.GetItem(e.Position).ToString() == typeof(ObjectA).ToString())
{
// respond accordingly to object type A being clicked
}
// so on and so forth on each different object type contained in the sectioned list
}

My click event just populates and opens a new Layout describing the item clicked. The differentiation of object type is necessary because I use a different layout based on the object type clicked, because static information on the layout differs per object type.

Hope this helps. I gleaned this example from Wrox’s book, Professional Android Programming with Mono C#/.Net, and modified it to meet my needs, hopefully you can see how it works so you can modify it to meet your own needs.