Shadow Separator Between Android Fragments

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!

Answer 2

I'm looking to do the same thing that you're trying to do; create an effect that one fragment is "closer" than another.

Roboguy's answer handles how to have the white arrow "selector" on the list item; I'll try to be more specific about shadows. Another good example of the use of background selectors can be seen in the source code of the Google IO 2011 App. Once you have the source, look at the fragment_dashboard.xml icon selectors.

The shadow separator is a gradient, applied to the left side of a view. There are two parts;

First, the "shadow" itself:

res/shadow_left.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:angle="0"
    android:startColor="#55000000" 
    android:endColor="#00000000"
    />
</shape>

Then, to actually apply it to a layout:

layout/my_lower_layer

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
<View
    android:layout_width="20dp"
    android:layout_height="fill_parent"
    android:background="@drawable/fragment_shadow_left" />
<ImageView
    android:id="@+id/imageview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true" />
</RelativeLayout>

This has to be done with a relative layout (to my knowledge). If you're using a linear layout, you can wrap the whole linearLayout inside of a relative layout, and then add the with the gradient.

Note that, if you do this, the gradient <View> has to go below the <LinearLayout>; otherwise, the gradient will be drawn under the linear layout, so you won't see it.