How to remove border/shadow from lollipop buttons

Question

The buttons looks fine for api < 21. However, the +21 versions creates this border or shadow that is shown on the image below. How do I get rid of it without changeing the hole theme, but setting a style variable?

enter image description here

It might be more clear on this colored image. There is some kind of border around the buttons. enter image description here

My buttonssstyle is defined like this:

<style name="buttonTransparent" parent="Base.TextAppearance.AppCompat.Button">
        <item name="android:background">#00000000</item>
        <item name="android:textColor">@drawable/button_text_blue</item>
        <item name="android:textSize">18dp</item>
        <item name="android:textAllCaps">false</item>
        <item name="android:minHeight">45dp</item>
    </style>

<style name="buttonLargeWhite" parent="buttonTransparent">
        <item name="android:background">#FFF</item>
        <item name="android:layout_marginTop">10dp</item>
    </style>

try to set android:elevation="0dp" to your main layout. – user765 Jun 23 '15 at 13:08 — user765, Jun 23 '15 at 13:08

daemmie · Accepted Answer · 2018-05-25T04:29:52.157

235

Lollipop has a nasty little feature called stateListAnimator which handles the elevations on Buttons, which leads to shadows.

Remove the stateListAnimator to get rid of the shadows.

You have got multiple options to do that:

Java:

button.setStateListAnimator(null);

Kotlin:

button.stateListAnimator = null

or in your layout xml's:

<Button
...
android:stateListAnimator="@null" 
....
/>

edited May 25 '18 at 04:29

answered Jun 23 '15 at 13:08

daemmie

6,361
3
29
45

4

An other idea is, to use Textviews instead of Buttons. They doesn't have such an unexpected behaviour. – daemmie Jun 23 '15 at 13:11
Mark the answer as "accepted" if worked. I'm happy that I could help you ;) – daemmie Jun 23 '15 at 13:22
1

You can also use `button.setStateListAnimator(null);` for API Level 21 and higher – klimat Sep 08 '15 at 12:28
@mklimek absolutely right. I've added that to the answer. – daemmie Sep 08 '15 at 12:41
I've been switching my Button's with custom backgrounds to TextView's. Thanks Google ! – Someone Somewhere Oct 02 '15 at 12:09
1

@oberflansch if you switch to TextViews you will lose some of the button's pre-confoigured accessibility features. – Yaroslav Mytkalyk Jun 01 '16 at 15:54
2

This leads to a native crash on certain Samsung devices. Just FYI for anyone who experiences it. Its good to utilize a theme instead. – Jignesh Shah Dec 15 '16 at 09:13
@toobsco42 Your statement is incorrect. Tested on Android 5.0 Asus ZenFone and Android 5.1 Meizu Note 1. Didn't crush. – Johnny Five Jul 13 '18 at 13:12
@JigneshShah Can you clarify at least API level of such Samsung devices? – Johnny Five Jul 13 '18 at 13:14
`android:stateListAnimator` will remove all states (enabled, disabled, pressed and so on) – user924 Sep 23 '22 at 08:28

score 52 · Answer 2 · answered Jun 23 '15 at 13:25

52

Best and easiest way i am using is setting style attribute to Button

<Button
...
style="?android:attr/borderlessButtonStyle"
....
/>

may be someone need in future.

answered Jun 23 '15 at 13:25

WonderSoftwares

2,800
1
15
21

Is there a way to use this answer programmatically? – Emad Razavi Jun 23 '20 at 05:33

score 13 · Answer 3 · answered Jul 08 '16 at 20:05

13

There is already a style you can leverage not to have the borders.

apply

style="@style/Base.Widget.AppCompat.Button.Borderless"

to your item to remove the borders

answered Jul 08 '16 at 20:05

Olivier Mercier

131
1
3

score 10 · Answer 4 · answered Aug 16 '16 at 23:36

I fixed this globally by setting android:stateListAnimator="@null" in Resources\values\styles.xml:

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <style name="AppTheme" parent="AppTheme.Base">
    </style>
    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:buttonStyle">@style/NoShadowButton</item>
    </style>
    <style name="NoShadowButton" parent="android:style/Widget.Button">
        <item name="android:stateListAnimator">@null</item>
    </style>
</resources>

And voila the shadows are gone for good :)

John Ruban Singh · Answer 5 · 2018-10-09T10:33:04.720

9

"shadow" effect is added on Lollipop Appcompat theme

add the following line in res/values-v21/styles.xml to remove default shadow

Theme level:

<item name="android:buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>

xml layout:

android:stateListAnimator="@null"

Java:

setStateListAnimator(null);

Kotlin:

stateListAnimator = null

edited Oct 09 '18 at 10:33

answered Sep 19 '17 at 10:55

John Ruban Singh

1,284
14
19

`android:stateListAnimator` will remove all states (enabled, disabled, pressed and so on) – user924 Sep 23 '22 at 08:28

score 7 · Answer 6 · answered Jan 03 '18 at 14:32

7

Buttons in android have statelistAnimator property so by declaring it null we can remove the border of button

android:stateListAnimator="@null"

answered Jan 03 '18 at 14:32

virendra singh deora

303
5
12

score 3 · Answer 7 · answered Jul 03 '17 at 07:50

3

in xml we can use

android:stateListAnimator="@null"

answered Jul 03 '17 at 07:50

Ankit Tomer

127
1
4

Booger · Answer 8 · 2015-06-23T13:05:17.283

2

I would suggest you just remove the shadow entirely, by setting the elevation to nothing. Since you already have a XML style (add this to use this universally), or you could add this attribute to your XML view definition

android:elevation="0dp"

edited Jun 23 '15 at 13:05

answered Jun 23 '15 at 13:03

Booger

18,579
7
55
72

10

I have tried to set the elevation but it doesn't solve the problem. – 7heViking Jun 23 '15 at 13:05
What exactly are you trying to remove? Elevation will remove the shadow (I think I am not clear) – Booger Jun 23 '15 at 13:06
I just added a second image that might make it more clear, what it is I want to remove. There is some kind of border/shadow around the button. – 7heViking Jun 23 '15 at 13:10
This will also mess up your layout if you used elevations elsewhere. You can alternatively try to set the outline provider via `outlineProvider="@null"`, but not sure if that would work. – milosmns May 16 '16 at 20:15
@Booger Doesn't work on Android 8 on Button. But `android:stateListAnimator="@null"` does. – Johnny Five Jul 13 '18 at 12:25

Vasanth · Answer 9 · 2017-07-11T13:21:04.537

Issue

From Android v21, Border has been added by default for all the button.

<!-- Bordered ink button -->
<style name="Widget.Material.Button">
     <item name="background">@drawable/btn_default_material</item>
     <item name="textAppearance">?attr/textAppearanceButton</item>
     <item name="minHeight">48dip</item>
     <item name="minWidth">88dip</item>
     <item name="stateListAnimator">@anim/button_state_list_anim_material</item>
     <item name="focusable">true</item>
     <item name="clickable">true</item>
     <item name="gravity">center_vertical|center_horizontal</item>
</style>

The property "stateListAnimator" is the one which is causing the problem.

Solution

In our application theme, set button style to remove the default border (Android support library itself provides style for it).

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
     <!-- From Android-v21 - Border has been added by default, hence we are removing it. -->
     <item name="android:buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>
</style>

score 0 · Answer 10 · answered May 03 '18 at 23:36

0

If you want to do this programmatically in Kotlin, you can do

button.stateListAnimator = null

answered May 03 '18 at 23:36

Nari Kim Shin

2,459
1
25
33

How to remove border/shadow from lollipop buttons

10 Answers10

Linked