Why does the Material FAB not change colors when disabled?

user_10709519 0
Viewed 1091

I am disabling the Material Floating Action button but the color does not change when disabled is set to true. I thought Material has a theme for FAB's and when disabled it should turn light grey. I do not want to add code to change the background every time it is enabled/disabled.

I am currently on material version: 1.1.0

In the code I just set the fab to disabled by fab.isEnabled = false

Here is the xml

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/save_reservation_fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/keyline_2"
                app:backgroundTint="@color/color_primary"
                android:src="@drawable/ic_save_black_72dp"
                app:tint="@color/color_on_primary"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"/>

This is what the disabled/enabled fab looks like:

enter image description here

It should look something like this:

enter image description here

material-components-android kotlin floating-action-button android
2 Answers

I suspect that this is the culprit:

app:backgroundTint="@color/color_primary"

This is going to tint the color of your FAB regardless of its state.

You could solve this by setting the tint to a ColorStateList instead of a raw color value. That is, create a file named fab_color.xml in your res/color/ directory, and include this:

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

And change your tint to this instead:

app:backgroundTint="@color/fab_color"

Alternatively, you could adjust your Activity's theme such that the default color of the FAB is the color you want (@color/color_primary) and then remove the app:backgroundTint attr altogether.

user_82989090

The version 1.2.0 introduced the support for enabled/disabled states in the FloatingActionButton.

Now the default style support the disabled state and the background color is based on the colorOnSurface when disabled:

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

enter image description hereenter image description here

You can change it using the app:backgroundTint attribute with a custom selector or using:

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      android:theme="@style/ThemeOverlay.Custom.FloatingActionButton"
      ../>

with:

<style name="ThemeOverlay.Custom.FloatingActionButton" parent="">
    <item name="colorOnSurface">@color/....</item>
</style>
user_20165620
Related