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.

Zaid Mirza · Answer 1 · 2019-03-10T14:08:34.920

44

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

edited Mar 10 '19 at 14:08

answered Mar 10 '19 at 13:57

Zaid Mirza

2,866
1
18
35

I can't use app:backgroundTint because minSdkVersion 18 – a_subscriber Mar 10 '19 at 14:15
try 2nd solution – Zaid Mirza Mar 10 '19 at 14:18
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 – Zaid Mirza Mar 10 '19 at 14:33
1

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. – a_subscriber Mar 10 '19 at 14:41
Yeah you have to use AppCompat Theme on Lolipop and Pre Lolipop version, AFIK – Zaid Mirza Mar 10 '19 at 18:06
app:backgroundTint its working on 5.0 . I just tested it on LG having version 5.0 – Zaid Mirza Mar 11 '19 at 05:46
colorOnSurface is not working for me for some reason :( – lawonga Feb 08 '20 at 00:07
@ZaidMirza i just tested with v19 and backgroundTint is not working for me also i have migrated to android X – Akash Jain Aug 19 '20 at 20:54

Gabriele Mariotti · Answer 2 · 2021-04-16T16:07:23.943

With the MaterialButton you have 2 options:

Using the backgroundTint attribute as suggest by Zaid Mirza
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.

It requires material 1.1.0, which is inexistent as shown [here](https://mvnrepository.com/artifact/com.google.android.material/material) — Dario Coletto, Nov 21 '19 at 13:38

score 18 · Answer 3 · answered Jun 30 '20 at 16:54

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" />

score 5 · Answer 4 · answered Apr 08 '20 at 15:13

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"

answered Apr 08 '20 at 15:13

Alejandro H. Cruz

377
1
5
15

score 1 · Answer 5 · answered Jan 08 '21 at 15:02

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

score 0 · Answer 6 · answered Sep 05 '20 at 22:43

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" />

score 0 · Answer 7 · answered Nov 26 '20 at 04:55

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>

score 0 · Answer 8 · edited Mar 18 '21 at 05:38

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://stackoverflow.com/a/38080463/14289342

score 0 · Answer 9 · answered May 12 '21 at 09:52

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)

Can't change background color on MaterialButton without change colorAccent

9 Answers9

Or

Linked