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

    I tried this method, but in the background section i am not able to get a complete transparence due to layered structure. Is there any solution for it. (I need complete transparent in middle

    —-not working

    Reply
  8. qianlvable

    Your post is great!But this approach when use in GridView with lots of item may cause some performance issue.

    Reply
  9. Victor

    The best solution out there for Android Layout shadows as we wait for an update to the Android SDK which makes this much easier. Great post.

    Reply
  10. Devon

    I don’t usually leave comments..but I was trying to acheive this for the LONGEST while..I even tried a bunch of other confusing tutorials..THIS ONE WORKED PERFECTLY! and was also the most simple solution! THANK YOU very much!

    Reply
  11. Sayooj Valsan

    Better version – I tweaked a bit. On the original version, I found some artifacts on the drop shadow.

    Reply
  12. Zaq

    This is fantastic… Any suggestions on how to make shadow inset ? It would be very helpful..

    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!




×