Master detail split styling in android

Question

This question probably has been asked many times over here, without yielding useful answers. I'd place it here with a possible answer. Feel free to improve.

Question: How to setup popup like style of detail view, in side by side master detail view as highlighted in image below:

Micropyle

Answer 1

In this solution , I have used 9-patch background images, to define 2 kinds of backgrounds for list items. So, the selected(checked) list Item has a different background, as shown:

(list item)

(selected item)

(list item)

The list item layout's parent view, is a class extending LinearLayout (can be any ViewGroup) and implementing Checkable. Hence, when ListView is set to choice mode, it can automatically check/uncheck this view. This checked state is then used by selector background assigned to this view :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true" android:drawable="@drawable/checked"/>
  <item android:drawable="@drawable/unchecked"/>
</selector>

This makes the background of list item view change automatically, without having to do it manually in code every time a list item is selected.

Result:

Additional points:

1. Scrollbar can be moved to left side.
2. Use list dividers that match shadow color, or more padding can be placed between list items and detail view.

Micropyle