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"

不知道为什么...希望它有所帮助!

Answer 2

如此答案中所述，如果您的图标有多种颜色，或者您想保留图标的原始颜色，则将其指定@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。因此，它采用了parent的默认黑色Theme.MaterialComponents.Light.DarkActionBar。

参考：Android开发者峰会，2018年-材料设计的组成部分

Answer 4

根据Material Components库的FloatingActionButton的GitHub文档页面，影响图标的唯一属性是

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

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

您应该可以通过app:tint="#FFF"在FAB上进行设置来覆盖它。

Answer 5

你的图标是多色的吗

仅添加

app:tint="@null"

但如果你只想改变颜色

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

在 kotlin 中以编程方式：

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