Android FAB icon always black with MaterialComponents theme

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 from a custom 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 mater 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 narrowed 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 gets the color of the original vector drawable.

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

Answer 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

Answer 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