47

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:

enter image description here

Sam Chen
  • 7,597
  • 2
  • 40
  • 73
  • 9
    Does your activity's theme inherit from `Theme.MaterialComponents`? If so, that seems to be the source of the problem, based on some light testing. Try switching to a `Theme.AppCompat`-based theme. – CommonsWare Nov 07 '20 at 00:19
  • @CommonsWare it works! Thank you! But is it a bug or intentional design? Just don't get it. – Sam Chen Nov 07 '20 at 03:18
  • 2
    I suspect strongly that it is an intentional design decision, but I need to do more research on this. The Material Components for Android is a "highly opinionated" library, so I am not surprised that they are doing something that breaks some standard widget attributes like `android:background`. What disappoints me is that they made it the default in the Android Studio new-project wizard for some (all?) templates. – CommonsWare Nov 07 '20 at 12:09
  • @CommonsWare: Thanks for the info. Helped save a ton of time. – priyamtheone Jan 10 '22 at 10:46

6 Answers6

120

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.

CommonsWare
  • 986,068
  • 189
  • 2,389
  • 2,491
67

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:

enter image description here

Sam Chen
  • 7,597
  • 2
  • 40
  • 73
13

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

Ahmed Ramadan
  • 181
  • 1
  • 4
1

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

Panache
  • 1,701
  • 3
  • 19
  • 33
1

It worked for me, hope it works for others as weell. Just set null to backgroundTint.

android:backgroundTint="@null".

StackOverflower
  • 369
  • 2
  • 12
1

By setting app:backgroundTint="@null"
your material button will not be rounded any more. To make it round and setting linear gradient color etc, Add this into drawable file:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <stroke
                android:width="2dp"
                android:color="@color/lightBlue" />

            <corners android:radius="8dp"/>
            <gradient android:endColor="#FFD374" android:startColor="#FFBC68" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <stroke
                android:width="2dp"
                android:color="@color/lightBlue" />

            <corners android:radius="8dp"/>
            <gradient android:endColor="#FFBC68" android:startColor="#FFD374" />
        </shape>
    </item>
</selector>

goto xml file and add it like this

 <com.google.android.material.button.MaterialButton
        ...........
        app:backgroundTint="@null"
        android:background="@drawable/linear_gradient"
        ..........
        />

Note: Edit it according to your need...

Muzammil Hussain
  • 574
  • 5
  • 8