View with Solid Background and Top+Bottom Inner Shadows

Question

Essentially, I am trying to create the following background:

The traditional gradient which use in the drawable that I use for background only supports start color, middle color and end color.

However, as you can see from the mockup, I am trying to create only a slight overlay/shadow at the top and bottom of the shape, with a #50000000 color (black with 50% opacity).

Answer 1

If you're using this inside a Layout view, then you can simply create a View with a gradient background and place it in the beginning and in the end of the Layout.

For example:

    <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/parent">

            <View 
                android:layout_width="fill_parent"
                android:layout_height="5dp"
                android:background="@drawable/gradient" />

<!-- Your other child views -->


            <View 
                android:layout_width="fill_parent"
                android:layout_height="5dp"
                android:background="@drawable/gradient" />

</LinearLayout>

And your gradient.xml file will have this:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
   <gradient android:startColor="#FFFFFF" android:endColor="#000000" android:angle="90"/>
 </shape>

You can specify the blue background color to the parent layout.

You'll essentially get something like this:

[EDIT]

You can create two drawables - gradient_top.xml and gradient_bottom.xml to get the angle right

Answer 2

Start with this:

Create a drawable:

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item >
        <shape android:shape="rectangle">
            <solid android:color="#408DAA"/>
        </shape>
    </item>

    <item >
        <shape android:shape="rectangle">
            <solid android:color="#50000000"/>
        </shape>
    </item>

    <item android:top="10dip" android:bottom="10dip">
        <shape android:shape="rectangle">
            <solid android:color="#408DAA"/>
        </shape>
    </item>

</layer-list>  

Use it as background of any view.
Adjust top, bottom and color="#408DAA" according your needs

Answer 3

Elaborating @ramaral's answer, build this drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FF408DAA"/>
        </shape>
    </item>
    <item android:top="0dip" android:bottom="32dip">
        <shape android:shape="rectangle">
            <gradient android:startColor="#00000000" android:endColor="#50000000" android:angle="90"/>
        </shape>
    </item>
    <item android:top="32dip" android:bottom="0dip">
        <shape android:shape="rectangle">
            <gradient android:startColor="#50000000" android:endColor="#00000000" android:angle="90"/>
        </shape>
    </item>
</layer-list>

You would need to set a fixed height in the view, in order to achieve the best result. In my case I was setting the height to "36dip". Notice that the "32dip" is the amount of space from where the gradient ends to the end of the drawable, so that would leave me with a top and bottom gradients of "4dip" (36-32=4 :p)

Answer 4

I prefer doing this than having to mess around with 9-Patches. Although, having said that, I wish Google would get on with providing built-in support for drop shadows, since they're so common.

Just to build on JoelFernandez solution with a more complete example:

The Container:

<?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="[your_container_height]"
            android:background="@drawable/container_bg_color">

    <View
    android:layout_width="match_parent"
    android:layout_height="12dp"
    android:layout_alignParentTop="true"
    android:background="@drawable/container_gradient_top"/>

<View
    android:layout_width="match_parent"
    android:layout_height="12dp"
    android:layout_alignParentBottom="true"
    android:background="@drawable/container_gradient_bottom" />

<!-- Insert your content here -->

</RelativeLayout>

The Background Color (container_bg_color.xml):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:thickness="0dp"
       android:shape="rectangle">

    <gradient android:startColor="#4a6fb4"
        android:endColor="@color/deepBlue"
        android:angle="135"/>

</shape>

The Top Gradient (container_gradient_top.xml):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:thickness="0dp"
       android:shape="rectangle">

    <gradient
        android:startColor="#00222222"
        android:centerColor="#11111111"
        android:endColor="#44000000"
        android:angle="90"/>

</shape>

The Bottom Gradient (container_gradient_bottom.xml):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:thickness="0dp"
       android:shape="rectangle">

    <gradient
        android:startColor="#44000000"
        android:centerColor="#11111111"
        android:endColor="#00222222"
        android:angle="90"/>

</shape>

Result: