How to provide shadow to Button

Question

enter image description here

As you can see in image, I want shadow behind a Button. I have created Button with rounded corners. But problem is I can't generate a shadow behind that Button. How can I achieve this?

Refer: http://stackoverflow.com/questions/3567312/android-drop-shadow-on-view & http://stackoverflow.com/questions/6563927/how-to-make-shadow-effect-for-abutton-in-android — Yasitha Waduge, Mar 11 '13 at 07:52
That could be useful too, for realistic shadows with different colors: https://stackoverflow.com/questions/68583069/how-to-put-shadow-with-gradient — Ole Pannier, Jul 30 '21 at 11:45

score 135 · Accepted Answer · edited Nov 13 '14 at 13:12

135

Use this approach to get your desired look.
button_selector.xml :

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

And in your xml layout:

<Button
   android:background="@drawable/button_selector"
   ...
   ..
/>

edited Nov 13 '14 at 13:12

Ranjithkumar

16,071
12
120
159

answered Mar 11 '13 at 07:51

Festus Tamakloe

11,231
9
53
65

This looks cool, but when I tried this intellij didn't like it. When I looked at the [doc](http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList) for `item` it says `android:drawable` is **required**. – JohnnyLambada Jan 10 '14 at 21:53
1

closing tag is missing – myforums Nov 11 '14 at 16:47
7

It's not exactly what the asker wanted as this solution makes the opposite: gradient button background and solid shadow color. And this seemes very different from outer shadow – Sep 05 '15 at 23:17
1

Can I make it so that a textColor selector is baked into the above selector -so I don't have to set both background textColor each time I define a button, but only needs to set the background...? – JohnyTex Sep 10 '15 at 07:20
`` and `` are not needed. The image is reverted, as @user4702646 said. – CoolMind Jul 26 '18 at 15:25
the bottom corner left has a hard edge – Jono Jul 31 '19 at 14:55
Why is this an accepted answer? It looks no where near the desired shadow – Ahmad Sattout Jan 11 '21 at 10:07
This results in a non(well, barely)-gradated shadow, because the gradient is applied not just to the visible shadow part but the entire offset shape. – Jeffrey Blattman Mar 25 '22 at 22:04

Ranjithkumar · Answer 2 · 2015-07-15T17:46:11.030

71

For android version 5.0 & above

try the Elevation for other views..

android:elevation="10dp"

For Buttons,

android:stateListAnimator="@anim/button_state_list_animator"

button_state_list_animator.xml - https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/anim/button_state_list_anim_material.xml

below 5.0 version,

For all views,

 android:background="@android:drawable/dialog_holo_light_frame"

My output:

enter image description here

edited Jul 15 '15 at 17:46

answered Jun 11 '15 at 12:23

Ranjithkumar

16,071
12
120
159

I'd like to use this approach, but my buttons are created dynamically (i.e. in code) in a grid control, not declaratively (actually, I'm using Xamarin free version, so Mono lib). Doesn't seem to be a straightforward method to set just any attribute. – jrichview Apr 12 '16 at 14:47
@jrichview see this answer & also comment http://stackoverflow.com/a/24459128/3879847 – Ranjithkumar Apr 12 '16 at 16:44
Hey, how can I use this as drawable, if I set the shape of my button with drawable? – Egor Apr 10 '19 at 04:41

Samir · Answer 3 · 2018-08-23T22:25:09.777

Here is my button with shadow cw_button_shadow.xml inside drawable folder

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <layer-list>
            <!-- SHADOW -->
            <item>
                <shape>
                    <solid android:color="@color/red_400"/>
                    <!-- alttan gölge -->
                    <corners android:radius="19dp"/>
                </shape>
            </item>
            <!-- BUTTON alttan gölge
              android:right="5px" to make it round-->
            <item
                android:bottom="5px"
                >
                <shape>
                    <padding android:bottom="5dp"/>
                    <gradient
                        android:startColor="#1c4985"
                        android:endColor="#163969"
                        android:angle="270" />
                    <corners
                        android:radius="19dp"/>
                    <padding
                        android:left="10dp"
                        android:top="10dp"
                        android:right="5dp"
                        android:bottom="10dp"/>
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_pressed="true">
        <layer-list>
            <!-- SHADOW -->
            <item>
                <shape>
                    <solid android:color="#102746"/>
                    <corners android:radius="19dp"/>

                </shape>
            </item>
            <!-- BUTTON -->
            <item android:bottom="5px">
                <shape>
                    <padding android:bottom="5dp"/>
                    <gradient
                        android:startColor="#1c4985"
                        android:endColor="#163969"
                        android:angle="270" />
                    <corners
                        android:radius="19dp"/>
                    <padding
                        android:left="10dp"
                        android:top="10dp"
                        android:right="5dp"
                        android:bottom="10dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

How to use. in Button xml, you can resize your height and weight

<Button
                android:text="+ add friends"
                android:layout_width="120dp"
                android:layout_height="40dp"
               android:background="@drawable/cw_button_shadow" />

score 12 · Answer 4 · answered Sep 18 '15 at 17:14

If you are targeting pre-Lollipop devices, you can use Shadow-Layout, since it easy and you can use it in different kind of layouts.

Add shadow-layout to your Gradle file:

dependencies {
    compile 'com.github.dmytrodanylyk.shadow-layout:library:1.0.1'
}

At the top the xml layout where you have your button, add to the top:

xmlns:app="http://schemas.android.com/apk/res-auto"

it will make available the custom attributes.

Then you put a shadow layout around you Button:

<com.dd.ShadowLayout
        android:layout_marginTop="16dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:sl_shadowRadius="4dp"
        app:sl_shadowColor="#AA000000"
        app:sl_dx="0dp"
        app:sl_dy="0dp"
        app:sl_cornerRadius="56dp"> 

       <YourButton
          .... />

</com.dd.ShadowLayout>

You can then tweak the app: settings to match your required shadow.

Hope it helps.

Poor lib, with deprecations, plus no more supported. Besides, it seems like it allows only for dark / black shadows, not light ones. — forsberg, Jun 12 '16 at 08:39

score 11 · Answer 5 · answered Dec 28 '15 at 15:37

I've tried the code from above and made my own shadow which is little bit closer to what I am trying to achieve. Maybe it will help others too.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item android:left="5dp" android:top="5dp">
                <shape>
                    <corners android:radius="3dp" />
                    <gradient
                        android:angle="315"
                        android:endColor="@android:color/transparent"
                        android:startColor="@android:color/black"
                        android:type="radial"
                        android:centerX="0.55"
                        android:centerY="0"
                        android:gradientRadius="300"/>
                    <padding android:bottom="1dp" android:left="0dp" android:right="3dp" android:top="0dp" />
                </shape>
            </item>
            <item android:bottom="2dp" android:left="3dp">
                <shape>
                    <corners android:radius="1dp" />
                    <solid android:color="@color/colorPrimary" />


                </shape>
            </item>
        </layer-list>
    </item>

</selector>

Please, attach a screenshot. – CoolMind Jul 26 '18 at 15:12 — CoolMind, Jul 26 '18 at 15:12

DjHacktorReborn · Answer 6 · 2014-10-29T18:00:00.887

4

Try this if this works for you

enter image description here

android:background="@drawable/drop_shadow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="3dp"
        android:paddingTop="3dp"
        android:paddingRight="4dp"
        android:paddingBottom="5dp"

edited Oct 29 '14 at 18:00

answered Mar 11 '13 at 07:51

DjHacktorReborn

2,908
2
20
29

This is actually the most accurate answer. Unfortunately trying to get a designer to work with 9-patch isn't an easy thing. – Jeffrey Blattman Mar 25 '22 at 22:07

score 2 · Answer 7 · edited Oct 17 '22 at 11:47

2

Adding the below 2 lines worked for me

android:elevation="10dp"
android:stateListAnimator="@null"

edited Oct 17 '22 at 11:47

Adriaan

17,741
7
42
75

answered Apr 30 '22 at 12:30

Akshay Masram

159
1
10

Please read [answer] and [edit] your answer to contain an explanation as to why this code would actually solve the problem at hand. Always remember that you're not only solving the problem, but are also educating the OP and any future readers of this post. – Adriaan Oct 17 '22 at 11:47

shijo · Answer 8 · 2017-10-15T09:03:19.373

Sample 9 patch image with shadow

After a lots of research I found an easy method.

Create a 9 patch image and apply it as button or any other view's background.

You can create a 9 patch image with shadow using this website.

Put the 9 patch image in your drawable directory and apply it as the background for the button.

mButton.setBackground(ContextCompat.getDrawable(mContext, R.drawable.your_9_patch_image);

score 0 · Answer 9 · answered Apr 01 '22 at 19:10

Since none of the answers here really address the question, I wanted to point out https://github.com/Devlight/ShadowLayout (not my project). This is a simple Android layout you can wrap around anything to give it a shadow. The library is a single class and only ~250 lines. The README says deprecated, but it works great.

Wrapping all your views isn't ideal, but until Android provides a standard mechanism to introduce a shadow, or you want to draw all of your button states as bitmaps that include the shadow pixels, this is the best option I could fine.

score -1 · Answer 10 · answered Dec 15 '16 at 04:15

You can try this:

<?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="1dp" android:top="3dp">
            <shape>
                <solid android:color="#a5040d" />
                <corners android:radius="3dip"/>
            </shape>
        </item>
    </layer-list>
  </item>
<item>
    <layer-list>
        <item android:left="0dp" android:top="0dp">
            <shape>
                    <solid android:color="#99080d" />
                <corners android:radius="3dip"/>
            </shape>
        </item>
        <item android:bottom="3dp" android:right="2dp">
            <shape>
                <solid android:color="#a5040d" />
                <corners android:radius="3dip"/>
            </shape>
        </item>
    </layer-list>
</item>

Please read [answer] and [edit] your answer to contain an explanation as to why this code would actually solve the problem at hand. Always remember that you're not only solving the problem, but are also educating the OP and any future readers of this post. — Adriaan, Oct 17 '22 at 11:47

How to provide shadow to Button

10 Answers10

Linked