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 · 2023-04-26T16:27:34.657

80

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 Apr 26 '23 at 16:27

answered Mar 10 '19 at 13:57

Zaid Mirza

3,540
2
24
40

I can't use app:backgroundTint because minSdkVersion 18 – Alexei 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. – Alexei 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
it will override colors for all states, disabled button will be the same as enabled button. very bad answer – user924 Jan 06 '22 at 12:07

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

52

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.

edited Apr 16 '21 at 16:07

answered Aug 17 '19 at 18:13

Gabriele Mariotti

320,139
94
887
841

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
@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. – Abhinav Saxena Aug 10 '21 at 12:45
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 :) – Dario Coletto Aug 11 '21 at 13:04
1

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 – Lheonair Oct 12 '21 at 13:20

score 40 · 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" />

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`. — CoolMind, Aug 15 '23 at 07:18

Abdul Mateen · Answer 4 · 2021-06-09T07:54:59.947

12

You can do it by following the below code.

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

edited Jun 09 '21 at 07:54

answered Jun 08 '21 at 13:42

Abdul Mateen

1,139
1
14
21

score 5 · Answer 5 · 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

507
1
7
15

score 2 · Answer 6 · 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 2 · Answer 7 · 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)

score 1 · 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 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 10 · 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 11 · answered Feb 26 '22 at 23:55

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>

Can't change background color on MaterialButton without change colorAccent

11 Answers11

Or

Linked

Related