Android FAB button icon always black with Material

Question

I'm creating an Android app and I'm using the AndroidX libraries and Material design theme. My app theme on styles.xml is:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

I have the following FAB button from a library:

<com.leinardi.android.speeddial.SpeedDialView
        android:id="@+id/work_log_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        app:layout_behavior="@string/speeddial_scrolling_view_snackbar_behavior"
        app:sdMainFabClosedSrc="@drawable/ic_add_white_24dp"
        app:sdOverlayLayout="@id/overlay" />

And also tried the default FAB:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_add_white_24dp"
        android:layout_margin="16dp" />

No mather the color of the icon (a vector drawable), the icon inside the FAB (from the library and from the default) is always black. I have narrow down the problem to the material design theme, since using the old Theme.AppCompat.Light.DarkActionBar instead of the new Theme.MaterialComponents.Light.DarkActionBar the icon inside the FAB get the color of the original vector drawable.

Does anyone know why is this happening and how to solve this?

Answer 1

According to the GitHub documentation page for the Material Components library's FloatingActionButton, the only attributes that affect the icon are

• app:srcCompat
• app:tint
• app:maxImageSize

In this case, since your color is defined as a constant (#FFF), the only one that seems to make sense is app:tint. Perhaps something in your theme has set this to black?

You ought to be able to override it by setting app:tint="#FFF" on your FAB.

Answer 2

I have solved this by using:

app:tint="@color/COLOR_OF_ICON"

and not:

android:tint="@color/COLOR_OF_ICON"

Not sure why tho.. Hope it helps!

Answer 3

For MaterialComponents Theme you can define the following colors.

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primaryDark</item>
        <item name="colorPrimaryVariant">@color/primaryVariant</item>
        <item name="colorOnPrimary">@color/onPrimary</item>
        <item name="colorSecondary">@color/secondary</item>
        <item name="colorSecondaryVariant">@color/secondaryVariant</item>
        <item name="colorOnSecondary">@color/onSecondary</item>
        <item name="colorAccent">@color/accent</item>
        <item name="colorSurface">@color/surface</item>
        <item name="colorOnSurface">@color/onSurface</item>
        <item name="colorError">@color/error</item>
        <item name="colorOnError">@color/onError</item>
        <item name="colorButtonNormal">@color/buttonNormal</item>
        <item name="colorControlNormal">@color/controlNormal</item>
        <item name="colorControlActivated">@color/controlActivated</item>
        <item name="colorControlHighlight">@color/controlHighlight</item>
        <item name="colorBackgroundFloating">@color/backgroundFloating</item>
    </style>

colorSecondary is the responsible color for FloatingActionButton.

In your AppTheme you have not defied the colorSecondary. So, it took the default black color from parent Theme.MaterialComponents.Light.DarkActionBar.

Reference : Android dev summit, 2018 - The Components of Material Design

Answer 4

As said in this answer, if your icon has multiple colors or if you want to retain your icon original color, then assign @null as the tint:

app:tint="@null"