Android FAB icon always black with MaterialComponents theme

问题

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?

回答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

回答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

回答3:

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"

回答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.

回答5:

Is Your Icon is multicolor

Add Only

app:tint="@null"

but if you only want to change color

@dimen/fab_margin -> 16dp

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    style="@style/Widget.MaterialComponents.FloatingActionButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    app:backgroundTint="@color/colorAccent"
    app:srcCompat="@drawable/ic_add"
    app:tint="@color/colorWhite" />

Style :

 <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Programmatically in kotlin :

fab.setImageDrawable(ContextCompat.getDrawable(context!!, R.drawable.your_drawable))

来源：https://stackoverflow.com/questions/53365618/android-fab-icon-always-black-with-materialcomponents-theme