Android Background Drawable Not Working in Button Since Android Studio 4.1

Question

I find out that since Android Studio 4.1 I cannot change the background color of a Button by setting color on its android:background, just no effect. And custom Drawable is not working as well.

My background Drawable:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke
        android:width="1.5dp"
        android:color="@android:color/black" />

    <solid
        android:color="@android:color/white" />

    <corners
        android:radius="8dp" />

</shape>

My Button:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Add To Cart"
    android:background="@drawable/background3"/>

Result:

Solution 1

The Android Studio 4.1 new-project wizard, for many of its templates, has the project use the Material Components for Android library. And, it sets up the default theme to be based on Theme.MaterialComponents.DayNight.DarkActionBar.

A side effect of this is that any <Button> elements in a layout get turned into MaterialButton widgets, not regular Button widgets. MaterialButton ignores android:background.

If all you want to do is to change the color, use android:backgroundTint or change the colorPrimary attribute in the theme.

If you want a button that has a custom background, and your theme is set up to use Theme.MaterialComponents, you could switch the XML element in the layout to be <android.widget.Button> instead of <Button>. This should cause the Material Components for Android to ignore that element, and you can manipulate this button normally with respect to XML attributes.

Solution 2

UPDATE 03/2021

app:backgroundTint="@null"    //just need this
android:background="@drawable/background_button"

---

Ok, since MaterialButton is the default Button starting from Android Studio 4.1, we can modify the shape by using app:shapeAppearanceOverlay attribute.

1. Create a Custom Style in themes.xml:

<style name="leaf">
    <item name="cornerSizeTopLeft">70%</item>           //can specify corner position
    <!--<item name="cornerFamilyTopLeft">cut</item>-->
    <item name="cornerSizeBottomRight">70%</item>
    <!--<item name="cornerFamilyBottomRight">cut</item>-->
</style>

2. Apply Style in Material Button:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:text="Show"
    app:shapeAppearanceOverlay="@style/leaf" />        //here

Result:

• Helpful video: https://www.youtube.com/watch?v=jihLJ0oVmGo

Solution 3

Add only this: app:backgroundTint="@null"

Solution 4

I found easiest solution in this video.

https://www.youtube.com/watch?v=E_1H52FEqII

Just go to themes.xml under values folder in project window and change the MaterialComponents to AppCompact in both themes and button start working as normal as it was in past.

Existing: Theme.MaterialComponents.DayNight.DarkActionBar After Modification: Theme.AppCompat.DayNight.DarkActionBar

View more solutions