Question

I am interested in creating a ListView where each row is marked the way it is done in GMail for 3.0+. This creates a nice separation of the left and right ListFragment.

Other examples include also Google Calendar on 2.3.4 for instance where a color marker is on the left of the ListView.

See the grey vertical divider between the two lists. How does one achive something like this? A bonus would be also the alternating width, but I guess that is only a smaller layout change.

I know I could probably do something like inserting an ImageView in there and then fill it with the color I would like but it seems to me that this is an ugly hack.

Another question would be also if there is a generalized way to combine the two ListView fragments somehow the way the GMail or Mail applications do it.

Answer 1

If you want speed, then the option I would go for is to use a custom View class (e.g. extend RelativeLayout) for the row container View and override the dispatchDraw(Canvas canvas) method.

The dispatchDraw method is called after the View has drawn its own contents and before it draws its children – the children are drawn when you call super.dispatchDraw.

Use this to do something like

private boolean mDrawMarker = false;

public void setShouldDrawMarker(boolean drawMarker) {
    mDrawMarker = drawMarker;
}
public boolean getShouldDrawMarker() {
    return mDrawMarker;
}

@Override
public void dispatchDraw(Canvas canvas) {
    // draw the children of our view 
    super.dispatchDraw(canvas);

    // draw our marker on top of the children if needed
    if (mDrawMarker) {
        // e.g. canvas.drawRect(...) or canvas.drawBitmap(...)
    }
}

This way you avoid adding any extra views to the hierarchy which means you won’t incur any penalty in the layout or measuring phases. Remember to re-use Paint and Rect objects if drawing a rectangle rather than creating a new one each time. Similarly if you use a bitmap you should share the same Bitmap instance across all instances of your View rather than loading a new one from your resources each time (this does not mean putting them in static fields)

For the indentation of the items, since in this case the lists don’t seem to be overlapping you could (off the top of my head):

• Set a left margin on the row container (not totally sure this will work)
• Wrap the row container in a LinearLayout and set the left padding on this (if the above doesn’t work)
• Use a custom view class (if setting the left margin doesn’t work)
• Go with @commonsware suggestion and use two Views – one on the left with the grey background color and another to the right of that with the marker color – then just set the view on the left to visible/gone if you want indentation/no-indentation

As for the overlapping of the Views in the second example, I’ll defer to @commonsware answer.