Android FAB icon always black with MaterialComponents theme

Solution 1:

I solved this by using:

app:tint="@color/COLOR_OF_ICON"

and NOT:

android:tint="@color/COLOR_OF_ICON"

Reference: https://github.com/material-components/material-components-android/blob/master/docs/components/FloatingActionButton.md

Solution 2:

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. and colorOnSecondary is the responsible color for icon color of 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

Solution 3:

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

app:tint="@null"

Solution 4:

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.