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 — Etienne Kaiser, Jul 30 '21 at 11:45

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

134

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

14,780
10
107
140

answered Mar 11 '13 at 07:51

Festus Tamakloe

11,241
9
50
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
6

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

65

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

14,780
10
107
140

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 13 · 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 10 · 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,898
2
19
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

shijo · Answer 7 · 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 8 · 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 0 · Answer 9 · answered Apr 30 '22 at 12:30

0

Adding this below 2 lines worked for me

android:elevation="10dp"

android:stateListAnimator="@null"

answered Apr 30 '22 at 12:30

Akshay Sunil Masram

11
5

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>

score -2 · Answer 11 · answered Sep 01 '20 at 16:32

-2

you can use this great library https://github.com/BluRe-CN/ComplexView and it is really easy to use

answered Sep 01 '20 at 16:32

Mohammad Javadian

82
1
9

How to provide shadow to Button

11 Answers11

Linked