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.