Shadow Separator Between Android Fragments

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

Solution 1:

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"?><shapexmlns:android="http://schemas.android.com/apk/res/android"><gradientandroid: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"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent" ><Viewandroid:layout_width="20dp"android:layout_height="fill_parent"android:background="@drawable/fragment_shadow_left" /><ImageViewandroid: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.