Android: Creating a Drop Shadow in XML Layouts

by Mike King

Here’s a trick I learned for adding drop shadows to Android XML layouts on a recent project. Adding a drop-shadow to a LinearLayout or a RelativeLayout isn’t as simple as it should be, but the following technique is fairly easy to implement and is very reusable. The technique works by creating an XML drawable with the background color and simulated drop-shadow to be applied as the background image of a layout.

container_dropshadow.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

     <!-- Drop Shadow Stack -->
     <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#00CCCCCC" />
        </shape>
    </item>
     <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#10CCCCCC" />
        </shape>
    </item>
     <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#20CCCCCC" />
        </shape>
    </item>
     <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#30CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#50CCCCCC" />
        </shape>
    </item>

    <!-- Background -->
    <item>
	<shape>
            <solid android:color="@color/white" />
	    <corners android:radius="3dp" />
	</shape>
    </item>
</layer-list>

Basically I’m simulating the drop-shadow by drawing a semi-transparent border around the background color one pixel (dp) at a time. Each border has the same color, with a different Alpha value that gradually descends to fully transparent (e.g. #00CCCCCC). The padding is necessary to stack each border around the item below it, which gives it the gradient effect. You can increase the size of your drop-shadow by adding more “borders” and darken/lighten the shadow by changing the hex value. Then you can apply it to an XML layout as a background like so:

<LinearLayout android:background="@drawable/container_dropshadow">

That’s it! There’s also similar techniques like this online, but I found this way to provide me the most control in regards to size, color, and transparency.

References:

The Watercooler

  1. Neil

    Thanks for the info, I think you should always provide a screenshot of the outcome.

    Reply
  2. Ryan Harter

    Hey Mike, that’s a great tip. You’re right, drop shadows should be easier.

    Is there a reason you don’t just use a gradient shape, though? I would think you could do something like:

    Reply
  3. Mike

    Is it too late to say you rock! Thanks… this is going to make my app look great

    Reply
  4. Karl

    Thank you, very helpful. I did this in an attempt to Google play list item shape, if anyones interested:

    I have a pretty bad screen here so the shades of grey might be somewhat off..

    Reply
  5. Sab

    Truly the most customizable and re-useable shadow for a ViewGroup I’ve found yet. Looks Halo-like even in Gingerbread, awesome! By the way, I think you should apply round corners to all the shadow layers too, or else it looks boxy. Thanks again!

    Reply
  6. wasim

    Hey man thanks for xml file. but it can also possible with less code just add this attribute to layout – android:background=”@drawable/abc_menu_dropdown_panel_holo_light”.

    Reply

Speak your Mind

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

In the words of Chaka Khan: Tell Me Something Good!




×