CODEWITHSUNDEEP
androidbuttonandroid-5.0-lollipop
7heViking
7heViking

Reputation: 7587

How to remove border/shadow from lollipop buttons

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>

Upvotes: 68

Views: 59169

Answers (10)

John Ruban Singh
John Ruban Singh

Reputation: 1326

"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

Upvotes: 8

daemmie
daemmie

Reputation: 6460

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" 
....
/>

Upvotes: 242

Nari Kim Shin
Nari Kim Shin

Reputation: 2499

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

button.stateListAnimator = null

Upvotes: 0

virendra singh deora
virendra singh deora

Reputation: 303

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

android:stateListAnimator="@null"

Upvotes: 7

Vasanth
Vasanth

Reputation: 6385

Issue

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

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

Upvotes: 2

Ankit Tomer
Ankit Tomer

Reputation: 135

in xml we can use

android:stateListAnimator="@null"

Upvotes: 3

Korayem
Korayem

Reputation: 12507

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

Upvotes: 10

Olivier Mercier
Olivier Mercier

Reputation: 131

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

Upvotes: 13

WonderSoftwares
WonderSoftwares

Reputation: 2810

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

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

may be someone need in future.

Upvotes: 52

Booger
Booger

Reputation: 18725

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"

Upvotes: 2

Related Questions