Drop Shadow LinearLayout

I thought I would share this quick tip I just cooked up. To create a drop shadow below a layout component, you can add a “view” of the same width immediately below that component and set the background of that view to a drawable xml file containing a gradient.

Here is an example layout file containing the item in need of a drop shadow. We want to place a drop shadow below the LinearLayout with id “some_layout_item” (see below). I place a generic view below some_layout_item and specify what ever height I would like. In this case, I set the height for 5dip. That is how high my drop shadow will be. I then set the view’s background to the drawable drop_shadow.

<RelativeLayout
    android:background="@color/cream"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    >
    <LinearLayout
        android:id="@+id/some_layout_item"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
        ...
    </LinearLayout>
    <View
        android:layout_below="@id/some_layout_item"
        android:layout_width="fill_parent"
        android:layout_height="5dip"
        android:background="@drawable/drop_shadow"
        >
    </View>
    ...
</RelativeLayout>

Now lets create that drop shadow drawable. We do this by creating the file “res/drawable/drop_shadow.xml” as coded below (if you don’t have a folder named drawable in the res directory, just right click res and create it). All that is in the file is a specification for a shape with a gradient. The startColor is the darker part of the shadow that sits below and touching the LinearLayout. All I did was make a darker color similar to the background color specified in the parent container. The endColor is the color of the parent container’s background.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”>    
    <gradient
        android:startColor="@color/cream_dark"
        android:endColor="@color/cream"
        android:angle="270"
        >
    </gradient>
</shape>

Suddenly, we have a drop shadow that just works. The beauty of using this inside of a relative layout is you can insert the drop shadow without changing a anything else inside of layout file.

Cheers,
Randall