Alin Alin - 6 months ago 60
Android Question

Android Button's background as shape with Shadow

I've made a button background from shapes and is looking quite good for my purpose. The only thing needed is to drop a bit of shadow for it.
Here is the code:

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

<item android:state_pressed="true">
<shape>
<solid android:color="#343434" />

<stroke android:width="1dp" android:color="#171717" />

<corners android:radius="3dp" />

<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>
<item>
<shape>
<gradient android:angle="270" android:endColor="#E2E2E2" android:startColor="#BABABA" />

<stroke android:width="1dp" android:color="#BABABA" />

<corners android:radius="4dp" />

<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>

</selector>


Here's what I want to achieve

enter image description here

How do I drop the shadow ? My guess is that I need to make another shape but with black/gray background and set some sort of topa nd left padding of margin to make it look like a shadow. But I don't know how to do it... and documentation didn't helped me too much.

Later Edit: I want to add the shadow in xml file and not by code.
Thanks.

Answer

If you want to stack more shapes one on top of each other then you could use a layer-list. Bellow is the code for the normal item in your selector(with a strip of gray color):

<item><layer-list>
            <item android:right="5dp" android:top="5dp"><shape>
                    <corners android:radius="3dp" />

                    <solid android:color="#D6D6D6" />
                </shape></item>
            <item android:bottom="2dp" android:left="2dp"><shape>
                    <gradient android:angle="270" android:endColor="#E2E2E2" android:startColor="#BABABA" />

                    <stroke android:width="1dp" android:color="#BABABA" />

                    <corners android:radius="4dp" />

                    <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
                </shape></item>
        </layer-list></item>

The problem is that you'll not be able to achieve a true shadow look on your Button with this type of drawable. You could use the code from the other answer or a nine patch image that already has shadow on it.

Comments