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