Shadow effect with custom shapes

It’s easy to create a shadow for your views using custom shapes.

The idea it’s that you create the shadow layer as background first and the content layers on top of that.
But you also need to displace the layers in order to create the shadow effect.

For example:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item android:right="4dp" android:bottom="4dp">

                <!-- SHADOW LAYER -->
            </item>
            <item android:left="4dp" android:top="4dp">
                <!-- CONTENT LAYER-->
            </item>
        </layer-list>
    </item>
</selector>

You can control the shadow direction and size through the top, bottom, right and left parameters.

Shadow shapes

Here we have an example of our app WhoSaid:

Custom shadow shape

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <layer-list>
            <item android:left="4dp" android:top="4dp">
                <shape>
                    <solid android:color="#ff58bb52" />
                    <corners android:radius="30dip"/>
                </shape>
            </item>
        </layer-list>
    </item>
    <item>
        <layer-list>
            <!-- SHADOW LAYER -->
            <item android:left="4dp" android:top="4dp">
                <shape>
                    <solid android:color="#66000000" />
                    <corners android:radius="30dip"/>
                </shape>
            </item>
            <!-- CONTENT LAYER -->
            <item android:bottom="4dp" android:right="4dp">
                <shape>
                    <solid android:color="#ff58bb52" />
                    <corners android:radius="30dip"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

In our case we take off the shadow when the button is pressed to give improve the feedback.

Don’t forget that you can play with distance and colors to get new effects. For example you can use a gradient for the shadow layer.

Advertisements

12 thoughts on “Shadow effect with custom shapes

    • Yes.
      I use this method because it’s easy to adjust the values, and if I need the performance change to 9patch.

    • As I replied in the previous comment I use this method for fast changes.
      I think that, as long as you are careful, you can use this trick, even in an adapterview.

      Citing Donald Knuth I will say:
      “We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil”

      http://en.wikipedia.org/wiki/Donald_Knuth

      P.S:
      Thanks for the comment, and for to advise the people about the overdraw. I will modify the entry and talk about it.

      • You should definitely talk about overdraw in the post. I am curious about it. Does it really affect adapterviews?

      • I will update soon the post when I finish the one I’m preparing (or write a new one about shadows with 9patch an compare them).
        But yes, it has overdraw, but you can reduce it as long as you know the size of your button (I will explain this better).
        But the common solution in adapters like google+ , facebook, etc is to use 9patch.

      • In simple terms, every pixel can be drawn for several times but at last it only show one color, if one pixel is drawn for too many time(maybe 3 or 4),it means that the previous draw is useless, and it will slow down the draw process.
        If the listview item is simple, overdraw won’t slow down the application obviously, but if it is more complex(for example, google plus timeline),we should be concerned the overdraw issue, or it will slow down the scrolling performance.
        At last, sorry for my bad english.

  1. Pingback: 使用shapes产生阴影效果 | cat's home

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s