CODEWITHSUNDEEP
androidmaterial-designandroid-buttonmaterial-components-androidmaterial-components
Alexei
Alexei

Reputation: 15656

Can't change background color on MaterialButton without change colorAccent

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.

Upvotes: 65

Views: 84179

Answers (11)

Zaid Mirza
Zaid Mirza

Reputation: 3699

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

Upvotes: 87

Bassem Waheed
Bassem Waheed

Reputation: 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>

Upvotes: 0

Abdul Mateen
Abdul Mateen

Reputation: 1997

You can do it by following the below code.

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

Upvotes: 15

Pratik Bhandari
Pratik Bhandari

Reputation: 268

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

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

Upvotes: 2

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363677

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.

Upvotes: 53

Vasu Dev Mandal
Vasu Dev Mandal

Reputation: 11

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

Upvotes: 1

epic
epic

Reputation: 1443

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

Upvotes: 3

Kenneth Argo
Kenneth Argo

Reputation: 1767

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>

Upvotes: 0

Chidozie Gabriel
Chidozie Gabriel

Reputation: 11

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

Upvotes: 0

Mehedi Hasan Shagor
Mehedi Hasan Shagor

Reputation: 980

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

Upvotes: 45

Alejandro H. Cruz
Alejandro H. Cruz

Reputation: 557

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"

Upvotes: 5

Related Questions