Disabled color state of Material button

Question

The Material Spec shows a disabled button state that looks greyed out.

https://www.material.io/design/components/buttons.html#toggle-button

I am using the MaterialButton from the material components from Android: https://www.material.io/develop/android/components/material-button/

However when setting the button to disabled the color/tint of the button does not change.

<com.google.android.material.button.MaterialButton     android:id="@+id/disabled_material_button"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:enabled="false"     android:text="@string/button_label_disabled"/> 

Just not implemented in Material Android Components by default? Does Material Components define a disabled button statelist?

Answer 1

1. Create the folder /res/color (in your res directory).
2. Add a new color resource file here, named something like color_states_materialbutton.xml:

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">     <item android:state_enabled="false"         android:color="@color/colorDisabled"  />     <item android:color="@color/colorEnabled" /> </selector> 

3. Create a style in styles.xml with one of the Widget.MaterialComponents.Button styles as its parent and your color state list as the backgrountTint tag:

<style name="MaterialButtonStyle" parent="Widget.MaterialComponents.Button.UnelevatedButton">         <item name="backgroundTint">@color/color_states_materialbutton</item> </style> 

4. Set your style on the MaterialButton in your layout:

<com.google.android.material.button.MaterialButton     style="@style/MaterialButtonStyle"     android:id="@+id/disabled_material_button"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:enabled="false"     android:text="@string/button_label_disabled"/> 

Answer 2

With the default style Widget.MaterialComponents.Button the default selector used as backgroundTint handles the disabled state without any changes:

It is the default selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">   <item android:color="?attr/colorPrimary" android:state_enabled="true"/>   <item android:alpha="0.12" android:color="?attr/colorOnSurface"/> </selector> 

Just use:

    <com.google.android.material.button.MaterialButton         android:enabled="false"         ..> 

If you want to change the disabled color you can use a custom selector

    <com.google.android.material.button.MaterialButton         app:backgroundTint="@color/my_selector"         ..> 

or you can override the colors used in the default selector:

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

with:

    <style name="button_overlay">        <item name="colorOnSurface">@color/my_color</item>     </style>