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:

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

Answer 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