Question

I have a layout similar to the ICS Gmail app for tablets (ListFragment on the left and content on the right) and I was wondering how I could go about constructing the layouts such that there is a shadow separator between the two fragments (like in the Gmail app, shown below)

.

Also, as this is applicable to this question, how can I have that nice triangle/arrow marker in the active list item’s layout? I assume to implement this, the ListView itself must lie above the shadow “layer”, but I have no idea how to create that.

Answer 1

Just to let everyone know (because there seems to be a lack of information out there on this topic), this is achieved within the background selector XML of the individual list rows’ view. For example, this is the main screen’s layout,

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_row"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/list_item_selector">

    ...<!-- Rest of layout goes here -->

</RelativeLayout>

But the magic comes in the list_item_selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/list_pressed" />
    <item android:state_activated="true" android:drawable="@drawable/list_arrow_activated"  />
    <item android:drawable="@drawable/list_default" />
</selector>

By defining these as 9-patch drawables like this, you can have each list item contribute it’s width worth of shadow to that line in the middle, and when it is activated, that segment of shadow will be replaced by an arrow. I hope this helps someone, as it’s sure helped me!