How to remove button shadow (android)

Question

I want to remove the shadow from the button to make it seem more flat.

I have this right now:

cancel button with shadow

But I want this:

cancel button without shadow

I write comment here, it's work for me. [http://stackoverflow.com/questions/27867284/remove-shadow-effect-on-android-button/30856094#30856094][1] [1]: http://stackoverflow.com/questions/27867284/remove-shadow-effect-on-android-button/30856094#30856094 — msamardzic, Jun 15 '15 at 22:40
http://stackoverflow.com/questions/27408240/cant-get-rid-of-shadow-under-android-button — smileVann, Jun 18 '15 at 08:58

score 483 · Accepted Answer · answered Jun 10 '15 at 14:11

483

Another alternative is to add

style="?android:attr/borderlessButtonStyle"

to your Button xml as documented here http://developer.android.com/guide/topics/ui/controls/button.html

An example would be

<Button
android:id="@+id/button_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send"
android:onClick="sendMessage"
style="?android:attr/borderlessButtonStyle" />

answered Jun 10 '15 at 14:11

Alt-Cat

5,392
1
15
16

1

This removes the button style, e.i. the shadow and emboss. Adding a selector with shapes is optional. This is a more accurate answer. – Juan José Melero Gómez Feb 09 '16 at 11:54
49

In addition, I use a custom style for my button. you can extend your custom style from : – Tobliug Jun 09 '16 at 13:53

score 233 · Answer 2 · answered Aug 24 '16 at 12:04

233

A simpler way to do is adding this tag to your button:

android:stateListAnimator="@null"

though it requires API level 21 or more..

answered Aug 24 '16 at 12:04

Alon Kogan

3,258
1
21
20

@Alon Kogan, is there any backward compatibility for using the `android:stateListAnimator ` attribute? – blueware Jun 19 '19 at 05:08
This solution allows you to create a style bot having to inherit from `borderlessButtonStyle` style, which gives you more flexibility. – Juan José Melero Gómez Jul 02 '19 at 09:20
this is only solution which is worked for me, borderlessButtonStyle tag didn't work, since I need to get rid off the shadow while button is being pressed – ACAkgul Feb 20 '20 at 07:41
Works on MaterialButton too – intips Apr 23 '20 at 10:02
This is a better solution for me, it keeps the ripple effect – marticztn Jun 06 '21 at 22:39
Why I can't set this as `item` in button `style`? – QuarK Jun 10 '21 at 11:42
Thanks for the solution! mind elaborate why tag works? – Keith Mak Nov 16 '21 at 09:49

score 118 · Answer 3 · edited Dec 10 '19 at 18:55

118

Kotlin

stateListAnimator = null

Java

setStateListAnimator(null);

XML

android:stateListAnimator="@null"

edited Dec 10 '19 at 18:55

Joaquin Iurchuk

5,499
2
48
64

answered Dec 06 '16 at 17:03

Michael

9,639
3
64
69

1

Requires API level 21 or higher – alexrnov Aug 28 '20 at 02:53
1

after settings stateListAnimator to null button becomes invisible, anyone experiencing this? – abdu Mar 09 '21 at 07:56
This removes more than just the shadow. – Apr 06 '21 at 16:47

score 63 · Answer 4 · edited Jul 26 '19 at 09:13

63

I use a custom style

<style name="MyButtonStyle" parent="@style/Widget.AppCompat.Button.Borderless"></style>

Don't forget to add

<item name="android:textAllCaps">false</item>

otherwise the button text will be in UpperCase.

edited Jul 26 '19 at 09:13

Sam

446
7
17

answered Jun 24 '16 at 03:01

Zero

2,764
1
17
20

score 36 · Answer 5 · edited Feb 14 '19 at 13:48

36

Material desing buttons add to button xml: style="@style/Widget.MaterialComponents.Button.UnelevatedButton"

edited Feb 14 '19 at 13:48

clauub

1,134
9
19

answered Dec 25 '18 at 09:14

Efi G

937
8
15

Sometimes it is similar to https://stackoverflow.com/a/38004981/2914140, but a gray button in disabled state becomes lighter. – CoolMind Aug 01 '19 at 09:57

score 27 · Answer 6 · answered Aug 03 '16 at 10:30

27

try : android:stateListAnimator="@null"

answered Aug 03 '16 at 10:30

Seth

845
8
17

9

Although this may solve the OP’s problem, I’d recommend to add some context to it. Why will it help? Also, “try this” is a bit misleading. Are you sure it will solve the problem, or just guessing? If so, you should write a comment instead. – GergelyPolonkai Aug 03 '16 at 10:55
It requires API 21. – CoolMind Nov 21 '19 at 10:36

score 16 · Answer 7 · answered Jul 21 '22 at 09:13

16

It requires API level 21

        android:outlineProvider="none"

answered Jul 21 '22 at 09:13

Ronald Saunfe

561
6
20

score 6 · Answer 8 · answered Feb 27 '15 at 01:49

Using this as the background for your button might help, change the color to your needs

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape android:shape="rectangle">
            <solid android:color="@color/app_theme_light" />
            <padding
                android:left="8dp"
                android:top="4dp"
                android:right="8dp"
                android:bottom="4dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/app_theme_dark" />
            <padding
                android:left="8dp"
                android:top="4dp"
                android:right="8dp"
                android:bottom="4dp" />
        </shape>
    </item>
</selector>

Can you explain how this works? It didn't remove the drop shadow for me. — CACuzcatlan, Apr 15 '16 at 20:58
it replaces original background with shadows, with this background with solid color — dlohani, Jun 24 '16 at 18:31

score 4 · Answer 9 · answered Apr 12 '19 at 09:13

4

All above answers are great, but I will suggest an other option:

<style name="FlatButtonStyle" parent="Base.Widget.AppCompat.Button">
 <item name="android:stateListAnimator">@null</item>
 <!-- more style custom here --> 
</style>

answered Apr 12 '19 at 09:13

Wilson Tran

4,050
3
22
31

It is similar to Alon Kogan (https://stackoverflow.com/a/39122825/2914140). – CoolMind Aug 01 '19 at 09:52
how is this different than 5ish of above? – zeroDivider Feb 10 '20 at 15:26

score 3 · Answer 10 · answered Sep 10 '16 at 03:57

the @Alt-Cat answer work for me!

R.attr.borderlessButtonStyle doesn't contain shadow.

and the document of button is great.

Also, you can set this style on your custom button, in second constructor.

    public CustomButton(Context context, AttributeSet attrs) {
        this(context, attrs, R.attr.borderlessButtonStyle);
    }

score 2 · Answer 11 · answered Jun 04 '17 at 00:42

Instead of a Button, you can use a TextView and add a click listener in the java code.

I.e.

in the activity layout xml:

<TextView
    android:id="@+id/btn_text_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    android:text="@string/btn_text"
    android:gravity="center"
    android:textColor="@color/colorAccent"
    android:fontFamily="sans-serif-medium"
    android:textAllCaps="true" />

in the activity java file:

TextView btnTextView = (TextView) findViewById(R.id.btn_text_view);
btnTextView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // handler code
            }
        });

This isn't the correct answer, but you actually helped me to fix my issue with a similar problem, so thank you! — box, Sep 06 '17 at 10:16

score 1 · Answer 12 · answered Apr 28 '22 at 12:37

1

Simply

 android:elevation="0dp"

answered Apr 28 '22 at 12:37

Kipruto

721
6
16

score 1 · Answer 13 · answered Jan 20 '23 at 21:29

Update for Material Components

If you've previously used something like this:

<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:buttonStyle">@style/NoShadowButton</item>
</style>

<style name="NoShadowButton" parent="Widget.AppCompat.Button">
    <item name="android:stateListAnimator">@null</item>
</style>

And like me you're scratching your head wondering why it doesn't work anymore now that you've migrated to Theme.MaterialComponents.Light.*, it's because buttonStyle refers only to the AppCompat button style - there is a new style for materialButtonStyle. This fixed the issue for me:

<style name="MyTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="materialButtonStyle">@style/Widget.MaterialComponents.Button.UnelevatedButton</item>
</style>

Here's a good guide on what else has changed, and how to migrate properly.

Anoop M Maddasseri · Answer 14 · 2021-12-28T09:07:30.617

0

With a custom button; use the style R.style.Widget_AppCompat_Button_Borderless, Kotlin way-

class CSButton @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = R.style.Widget_AppCompat_Button_Borderless
) : AppCompatButton(context, attrs, defStyleAttr)

edited Dec 28 '21 at 09:07

answered Dec 28 '21 at 08:56

Anoop M Maddasseri

10,213
3
52
73

score 0 · Answer 15 · answered Jun 15 '22 at 09:09

Not mentioned here before, but if you want to have a Material Button without shadow you can achieve it by creating following custom style:

<style name="materialButtonNoShadow" parent="Widget.MaterialComponents.Button.UnelevatedButton">

And then just apply it in your xml layout:

            <com.google.android.material.button.MaterialButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/noShadowButton"
            style="?attr/materialButtonNoShadow"/>

score 0 · Answer 16 · answered Aug 31 '23 at 09:23

0

For me android:outlineProvider="none" did the job.

answered Aug 31 '23 at 09:23

ivan8m8

388
4
17

How to remove button shadow (android)

16 Answers16

Update for Material Components

Linked

Related