Android Background Drawable Not Working in Button Since Android Studio 4.1

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"