How do I set the disabled color of a button with AppCompat?

Question

I use this style to change the background color of my Button:

<style name="AccentButton" parent="Widget.AppCompat.Button.Colored">
    <item name="colorButtonNormal">@color/colorAccent</item>
    <item name="android:textColor">@color/white</item>
</style>

And in layout:

    <Button
        android:id="@+id/login_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/fragment_login_login_button"
        app:theme="@style/AccentButton"/>

It works. But when I call setEnabled(false) on this Button, it keeps the same color. How can I manage this case?

Answer 1

You aren't using the Widget.AppCompat.Button.Colored style correctly. You're using a parent style (Widget.AppCompat.Button.Colored), but applying it as a theme. This effectively means that the Widget.AppCompat.Button.Colored part is being ignored entirely and you are instead just changing the default color of the button (which works, but doesn't handle the disabled case).

Instead, you should use a ThemeOverlay and apply the Colored style separately:

<style name="AccentButton" parent="ThemeOverlay.AppCompat.Dark">
   <!-- customize colorButtonNormal for the disable color -->
   <!-- customize colorAccent for the enabled color -->
</style>

<Button
    android:id="@+id/login_button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/fragment_login_login_button"
    android:theme="@style/AccentButton"
    style="@style/Widget.AppCompat.Button.Colored"/>

As mentioned in this answer on using the Widget.AppCompat.Button.Colored style, the disabled color is controlled by colorButtonNormal and the enabled color is controlled by colorAccent. By using the ThemeOverlay.AppCompat.Dark, the textColor is automatically changed to dark, meaning you may not need the custom ThemeOverlay at all.