View with Solid Background and Top+Bottom Inner Shadows

android, android-background, android-xml

Solution

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

Problem

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).

Original source