Android FAB图标始终为黑色，带有MaterialComponents主题

Question

我正在创建一个Android应用程序，我正在使用AndroidX库和Material设计主题。我在styles.xml上的应用主题是：

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

我从自定义库中有以下FAB：

<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" />

并尝试了默认的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" />

无论图标的颜色（矢量可绘制），FAB内的图标（来自库和默认图标）始终为黑色。我已经将问题缩小到材料设计主题，因为使用旧的Theme.AppCompat.Light.DarkActionBar而不是新的Theme.MaterialComponents.Light.DarkActionBar，FAB内的图标获得原始矢量drawable的颜色。

有谁知道为什么会这样，以及如何解决它？

Answer 1

我通过使用以下方法解决了

app:tint="@color/COLOR_OF_ICON"

并不是：

android:tint="@color/COLOR_OF_ICON"

参考：https://github.com/material-components/material-components-android/blob/master/docs/components/FloatingActionButton.md

Answer 2

如this answer中所述，如果您的图标有多种颜色或者您想要保留图标原始颜色，则将@null指定为色调：

app:tint="@null"

Answer 3

对于MaterialComponents主题，您可以定义以下颜色。

<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是FloatingActionButton的负责任颜色。和colorOnSecondary是FloatingActionButton图标颜色的负责颜色。

在你的AppTheme你没有违抗colorSecondary。因此，它采用了父Theme.MaterialComponents.Light.DarkActionBar的默认黑色。

参考：Android dev summit, 2018 - The Components of Material Design

Answer 4

根据GitHub documentation page for the Material Components library's FloatingActionButton，影响图标的唯一属性是

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

在这种情况下，由于你的颜色被定义为常数（#FFF），唯一似乎有意义的是app:tint。也许你主题中的某些内容将其设置为黑色？

您应该能够通过在FAB上设置app:tint="#FFF"来覆盖它。

Answer 5

@ 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 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>