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 th

Answer 1

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>
   

Answer 2

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

Answer 3

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

button.stateListAnimator = null

Answer 4

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

android:stateListAnimator="@null"

Answer 5

"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