Raised Fragment Look

Question

Not really sure how to explain this but how can I make 2 fragments look like one is higher than the other as seen in this picture

as you can see the right edge of the listview looks like it is lower than the fragment to the right. How can this be accomplished? I am trying to make my layout not look so one dimensional/flat.

Answer 1

While Frank's answer is good, you can actually do this without graphics, using Android's internal gradient XML resource.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="180"
        android:centerX="0.1"
        android:startColor="#555"
        android:centerColor="#aaa"
        android:endColor="#aaa"
        android:type="linear" />
</shape>

• android:angle says to do it horizontally, right-to-left
• android:centerX says to move the "center" of the gradient so it's 10% from the start of the gradient.
• android:startColor is the color to display at the right.
• android:centerColor is the color to display in the center.
• android:endColor is the color to display at the end. This is the same as centerColor because we want to keep it a solid color except for the shadow.
• android:type makes it linear, obviously.

You'll want to play around a bit with the colors, I just estimated.