Can't change background color on MaterialButton without change colorAccent

Question

Android Studio 3.2.1 Here my layout:

<com.google.android.material.button.MaterialButton
                android:id="@+id/bittrexJsonViewButton"
                android:layout_width="0dp"
                android:layout_height="@dimen/min_height"
                android:layout_marginStart="@dimen/half_default_margin"
                android:layout_marginEnd="@dimen/half_default_margin"
                android:text="@string/json_view"
                app:layout_constraintBottom_toBottomOf="@+id/binanceJsonViewButton"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/binanceJsonViewButton"
                app:layout_constraintTop_toTopOf="@+id/binanceJsonViewButton" />

to change MaterialButton's background I change colorAccent in styles.xml

<item name="colorAccent">@color/colorAccent</item>

Nice. It's work.

But the problem is: I do not want to change colorAccent. I want to use background's color for MaterialButton's different from colorAccent

Attribute:

android:background="#aabbcc"

not help.

Marozik

Answer 1

1st Solution

You can use app:backgroundTint to change back ground color of MaterialButton

<com.google.android.material.button.MaterialButton
                android:id="@+id/bittrexJsonViewButton"
                android:layout_width="0dp"
                android:layout_height="@dimen/min_height"
                android:layout_marginStart="@dimen/half_default_margin"
                android:layout_marginEnd="@dimen/half_default_margin"
                app:backgroundTint="@android:color/holo_orange_dark"
                android:text="@string/json_view"
                app:layout_constraintBottom_toBottomOf="@+id/binanceJsonViewButton"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/binanceJsonViewButton"
                app:layout_constraintTop_toTopOf="@+id/binanceJsonViewButton" />

2nd Solution

MaterialButton uses colorPrimary as background when button is in active state and colorOnSurface when disabled. So, you can define it in your theme and apply it on material buttons

Demoiselle

I can't use app:backgroundTint because minSdkVersion 18 – Marozik

try 2nd solution – Demoiselle

I have tried it with min version 18. There is no issue. I think you are not using androidX. If you want to use new material components then I recommend to migrate your project to AndroidX – Demoiselle

I migrate to AndroidX. If you run application on Android 5.0 then button not change background color. In this case app:backgroundTint - not help. – Marozik

Yeah you have to use AppCompat Theme on Lolipop and Pre Lolipop version, AFIK – Demoiselle

app:backgroundTint its working on 5.0 . I just tested it on LG having version 5.0 – Demoiselle

colorOnSurface is not working for me for some reason :( – Crosscrosslet

@ZaidMirza i just tested with v19 and backgroundTint is not working for me also i have migrated to android X – Dialectic

it will override colors for all states, disabled button will be the same as enabled button. very bad answer – Thedathedric

Answer 2

With the MaterialButton you have 2 options:

1. Using the backgroundTint attribute as suggest by Zaid Mirza

2. If you want to override some theme attributes from a default style you can use new materialThemeOverlay attribute. It is the best option in my opinion.

Something like:

<style name="Widget.App.ButtonStyle"
 parent="Widget.MaterialComponents.Button">
   <item name="materialThemeOverlay">@style/GreenButtonThemeOverlay</item>
</style>

<style name="GreenButtonThemeOverlay">
  <item name="colorPrimary">@color/green</item>
</style>

and then:

<com.google.android.material.button.MaterialButton
   style="Widget.App.ButtonStyle"
   ../>

It requires at least the version 1.1.0 of the library.

Pacer

It requires material 1.1.0, which is inexistent as shown here – Harvey

@DarioColetto But the solution works. The theme and the style from which you can derive your style for buttons exist. I have tried it just now. – Dhu

Well, the answer is from 2019, my comment too, the problem was that material 1.1.0 wasn't released as stable yet... Now it is available, of course :) – Harvey

This should be the accepted answer. It's something that in my opinion we all should know how to do. Creating a style, extending from a parent style, and changing nothing but only one attribute. Thank you – Artair

Answer 3

If you want to set custom drawable you need to make the app:backgroundTint="@null". For just changing the background colour app:backgroundTint="@color/yourColor"

I'm currently using 1.3.0-alpha01

<com.google.android.material.button.MaterialButton
            android:id="@+id/bittrexJsonViewButton"
            android:layout_width="0dp"
            android:layout_height="@dimen/min_height"
            android:layout_marginStart="@dimen/half_default_margin"
            android:layout_marginEnd="@dimen/half_default_margin"
            app:backgroundTint="@null"
            android:background="@drawable/your_custom_drawable"
            android:text="@string/json_view"
            app:layout_constraintBottom_toBottomOf="@+id/binanceJsonViewButton"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/binanceJsonViewButton"
            app:layout_constraintTop_toTopOf="@+id/binanceJsonViewButton" />

Ji

It works, but It showed the error "Caused by: java.lang.IllegalStateException: Attempted to get ShapeAppearanceModel from a MaterialButton which has an overwritten background." when tried to inflate MaterialButton from MaterialButtonToggleGroup. – Maine

Answer 4

You can do it by following the below code.

                android:background="@color/black"
                app:backgroundTint="@null"

Cayenne

Answer 5

2020: It seems that they just fixed this on April 1st 2020.

It should be released on 1.2.0 beta 1 since the GitHub issue was closed as "Fixed"

Avalon

Answer 6

backgroundTint also changed the disabled state color so wasn't good for me

Best solution i could find was to override the primary color for the MaterialButton (only) through overlay style

Add this code to your styles.

Replace ?attr/colorSecondary to whatever color you want

<style name="MyButtonTheme" parent="Widget.MaterialComponents.Button">
    <item name="materialThemeOverlay">@style/ButtonStyleTextColor</item>
</style>

<style name="ButtonStyleTextColor">
    <item name="colorPrimary">?attr/colorSecondary</item>
</style>

Add the theme to the button

<com.google.android.material.button.MaterialButton
//..
android:theme="@style/MyButtonTheme"/>

Or

If you you using MDC and you want to change the theme for all buttons:

Add this row to your themes.xml

<item name="materialButtonStyle">@style/Button.MyTheme</item>

and add these lines to your type.xml

<style name="Button.MyTheme" parent="Widget.MaterialComponents.Button">
    <item name="materialThemeOverlay">@style/ButtonStyleTextColor</item>
</style>

<style name="ButtonStyleTextColor">
    <item name="colorPrimary">?attr/colorSecondary</item>
</style>

In that case you don't need to add android:theme="@style/MyButtonTheme" to your MaterialButton

If any mistake please let me know and don't be hurry to downgrade

Motta

Answer 7

The solution that worked for me is described below:

On Button tag

<Button
     android:id="@+id/login_btn"
     style="@style/PrimaryButtonStyle"
     app:backgroundTint="@null"
     android:enabled="true"
     android:text="@string/txtBtnLogin" />

@Style/PrimaryButtonStyle

<style name="PrimaryButtonStyle" parent="@style/Widget.MaterialComponents.Button">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_marginTop">5dp</item>
    <item name="android:textColor">@color/colorPrimary</item>
    <item name="android:background">@drawable/base_button_style</item>
    <item name="textAllCaps">false</item>
    <item name="android:textSize">16sp</item>
</style>

Output of this - Button background (light blue) is different than layout background (Comparatively dark blue)

Bacitracin

Answer 8

BackgroundTint Always works on material buttons, but first, do uninstall the app and reinstall it again. Sometimes changes may not reflect until you reinstall the app.

android:backgroundTint is applied over the android:background and their combination can be controlled by android:backgroundTintMode

do check this answer for difference between android:background, android:backgroundTint and android:backgroundTintMode

https://mcmap.net/q/165776/-what-is-the-difference-between-background-backgroundtint-backgroundtintmode-attributes-in-android-layout-xml

Quade

Answer 9

Change the backgroundTintMode to add and then your background attribute will be displayed. See example below:

<com.google.android.material.button.MaterialButton
                android:id="@+id/bittrexJsonViewButton"
                android:layout_width="0dp"
                android:layout_height="@dimen/min_height"
                android:layout_marginStart="@dimen/half_default_margin"
                android:layout_marginEnd="@dimen/half_default_margin"
                android:text="@string/json_view"
                android:background:"#aabbcc"
                app:backgroundTintMode="add"
                app:layout_constraintBottom_toBottomOf="@+id/binanceJsonViewButton"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/binanceJsonViewButton"
                app:layout_constraintTop_toTopOf="@+id/binanceJsonViewButton" />

Mallen

Answer 10

Comments asking about disable color using colorOnSurface you need to use theme settings,

Like this:

<style name="MaterialRedButton"
    parent="Widget.MaterialComponents.Button">
    <item name="materialThemeOverlay">@style/MaterialRedButtonThemeOverlay</item>
</style>

<style name="MaterialRedButtonThemeOverlay">
    <item name="colorPrimary">@android:color/holo_red_dark</item>
    <item name="colorOnSurface">@color/white</item>
</style>

Escalate

Answer 11

I had the same problem, and here is what it did: create a new style with a parent of a style of on of the material button styles and change the background color and background tint in it.. hopefully it will work with you..

<style name="DialogMaterialButtonOkay" parent="Widget.Material3.Button.UnelevatedButton">
        <item name="background">@color/button_background_color_main</item>
        <item name="backgroundTint">@color/button_background_color_main</item>  
</style>

Polyhistor