Android button with shadow in drawable xml

Question

I'd like to create a drawable and use it as a backround for my buttons. The shadow's height must be 18dip. See the picture.

I've tried it this way, but it's not working:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false">
        <layer-list>
            <item android:gravity="bottom">
                <bitmap android:src="@drawable/shadow9path"/> // This is a 9-path picture
            </item>
            <item android:gravity="bottom"
                  android:bottom="18dp">
                <shape android:shape="rectangle">
                    <size android:height="@dimen/..." />
                    <corners android:radius="@dimen/..." />
                    <solid android:color="@color/..." />
                </shape>
            </item>
        </layer-list>
    </item>
...
</selector>

EDIT: The shadow should be only on the bottom of the button. So the button should not be rounded with the shadow. I need something like a compound view, which consists of the button and the shadow below it.

This might be what you are looking for http://stackoverflow.com/questions/15333529/how-to-provide-shadow-to-button — Rishi, Jul 15 '16 at 14:14
Unfortunately is not what I'm looking fog. The shadow should be only on the bottom of the button. I'll update the question. — Alex, Jul 15 '16 at 14:18
` // This is a 9-path picture` If it's a **9 patch**, why do you use `bitmap`? You should use `nine-patch`: https://developer.android.com/guide/topics/resources/drawable-resource.html — Phantômaxx, Jul 15 '16 at 14:28
@BobMalooga changing bitmap to nine-patch does not solves the problem :( — Alex, Jul 15 '16 at 14:33
OK, but why are you using a LayerList? a simple background which includes the shadow would do the trick much easier! You really **don't** `need something like a compound view, which consists of the button and the shadow below it.` — Phantômaxx, Jul 15 '16 at 14:35
well... no code, really, apart `android:background="@drawable/your_bg_with_shadow"`. But I'd use a TextView instead of a Button, since Button adds a colored box inside, while a TextView is empty by default. — Phantômaxx, Jul 15 '16 at 14:43

score 1 · Answer 1 · answered Sep 20 '17 at 20:04

try this

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<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>

</selector>

score 0 · Answer 2 · answered Jul 15 '16 at 21:24

This work form me, try:

<item>
    <layer-list>
        <item android:right="10dp" android:top="10dp">
            <shape>
                <corners android:radius="5dp" />
                <solid android:color="#D6D6D6" />
            </shape>
        </item>
        <item android:bottom="3dp" android:left="3dp">
            <shape>
                <gradient android:angle="280" 
                    android:endColor="#E2E2E2" android:startColor="#BABABA" />
                <stroke android:width="2dp" android:color="#BABABA" />
                <corners android:radius="5dp" />
                <padding android:bottom="10dp" android:left="10dp" 
                    android:right="10dp" android:top="10dp" />
            </shape>
        </item>
    </layer-list>
</item>

Android button with shadow in drawable xml

2 Answers2