Android ListView with complex header

Question

I'm trying to add a complex / non-trivial header to a ListView (and slightly less complex footer) that needs to scroll along with the rest of the content.

The header consists of

• a TextView with bold text, black transparent background and rounded corners
• a TextView with normal text, black transparent background
• an ImageView
• a clickable button (actually an ImageView with onClick) and a divider

I'm familiar with addHeaderView, but if I try to add a complex view (consisting of a LinearLayout with multiple children), I only see the first child of the complex header in the listview as header.

Also, the design breaks (because the header may be styled transparently, the ListView itself isn't. Perhaps this can be solved by adding more styling to the ListView itself and its entries (which shouldn't be transparent), but I have the impression I'm simply reaching ListViews limits here.

Can this be done? Does anyone know of any applications (or better, code examples) that have a similar complex header? All other examples that I've been able to find are trivial headers: buttons, textviews or images (online and on SO) with hardly interesting styling.

Answer 1

I've attempted to reimplement my scrolling listview from scratch, roughly as follows:

• a main.xml with a background image and a single ListView, with a 20dip margin and some specific styling:

  <item name="android:cacheColorHint">#00000000</item>
  <item name="android:scrollbars">@null</item>
  <item name="android:background">@android:color/transparent</item>
  

• a headerlayout.xml containing a linear layout (vertical), containing a TextView, ImageView and another TextView. The first TextView is styled with rounded topcorners, both textviews are styled transparent, and a clicklistener on the image.

• (a similarly styled footer)
• a custom entry for each listitem with a solid white background.

The header/footer are added roughly as follows

ListView list = (ListView) findViewById(R.id.list);
View header1 =  getLayoutInflater().inflate(R.layout.listheader, null, false);
View footer = getLayoutInflater().inflate(R.layout.listfooter, null, false);
ImageView image = (ImageView) header1.findViewById(R.id.image);

list.addHeaderView(header1, null, false);
list.addFooterView(footer, null, false);
list.setAdapter(new MenuAdapter());

None of this is actually truely special. It's mostly a matter of doing things in the right order, stripped down and properly styled.

Answer 2

My suggestion would be that you create a custom view for this overly complicated list view item. Apparently this is what Android devs at Google IO too suggested. If you can do it in custom view, all your problems will be solved for.