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

Posted 2023-02-22

【中文标题】带有 MaterialComponents 主题的 Android FAB 图标始终为黑色

【英文标题】：Android FAB icon always black with MaterialComponents theme

【发布时间】：2019-04-21 06:44:20

【问题描述】：

我正在创建一个 android 应用，并且正在使用 AndroidX 库和 Material design 主题。我在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_
        android:layout_
        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_
        android:layout_
        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 内的图标获得了原始矢量可绘制对象的颜色。

有谁知道为什么会发生这种情况以及如何解决？

【问题讨论】：

图标的颜色定义为什么？它是像?attr/colorControlNormal 这样的主题属性还是像#ffaacc 或@color/orange 这样的定义颜色？

图标颜色定义为#FFF

【参考方案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

【讨论】：

如果图标是多色的怎么办...然后色调不是解决方案。

@Shashanksingh 使用 app:tint="@null" 使用图标的原始颜色

简单提一下，app:tint 不会自动出现。你必须输入它。

这些都不适合我。谷歌出了什么问题？严重地。 OMFg

非常感谢。你不会相信我浪费了多少天来寻找这个！

【参考方案2】：

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

【讨论】：

您可以使用 app:tint="@color/colorAccent" 立即更改它。

@MahmoudAyman 你可以做到。使用 Ifta 方法的好处是您可以使用主题。因此，您的样式和颜色足够灵活，可以应用于其他主题.. 例如深色主题 :)

app:int 没有用。有效的是<item name="colorOnSecondary">@color/onSecondary</item>

app:tint="@null" 没有用，但这个答案很有效。

【参考方案3】：

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

app:tint="@null"

【参考方案4】：

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

app:srcCompat app:tint app:maxImageSize

在这种情况下，由于您的颜色被定义为一个常量 (#FFF)，因此似乎唯一有意义的是app:tint。也许您主题中的某些东西将其设置为黑色？

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

【参考方案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_
    android:layout_
    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))

【参考方案6】：

就我而言，我只是遵循这个

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/bottom_home"
    android:layout_
    android:layout_
    android:background="@drawable/ic_home"
    android:scaleType="centerCrop"
    android:src="@drawable/ic_add_sign"
    app:backgroundTint="@color/app_dark_green"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:fabSize="normal"
    app:layout_anchor="@id/nav_view"
    app:tint="#FFF" />

我的结果是

【参考方案7】：

使用 app:tint="@color/white"

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_add"
        android:layout_
        android:layout_
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        app:tint="@color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:srcCompat="@drawable/ic_done"/>

【参考方案8】：

我正在寻找它并且以下代码有效。

android:backgroundTint="@color/primarycolor"
    android:textColor="@color/white"
    app:iconTint="@color/white"

【参考方案9】：

使用矢量资产作为 FAB 的图标。这对我有用。

app:tint 正在改变矢量图标颜色，app:backgroundTint 正在改变 FAB 的背景。

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/idFABAdd"
        android:layout_
        android:layout_
        android:layout_alignParentEnd="true"
        android:gravity="bottom"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="70dp"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="18dp"
        android:layout_marginTop="18dp"
        android:layout_marginEnd="18dp"
        app:srcCompat="@drawable/ic_baseline_home_24"
        app:tint="@color/white"
        app:backgroundTint="@color/purple_500"
        android:contentDescription="TODO" />

【参考方案10】：

我也在使用 Heinardi 快速拨号库。根据customizing items的文档，可以为组件定义一个主题：

<style name="Theme.FAB">
    <item name="colorPrimary">@color/Primary</item>
    <item name="colorAccent">@color/Accent</item>
    <item name="colorOnSecondary">@color/white</item>
</style>

注意colorPrimary定义了扩展按钮的颜色，

colorAccent主按钮的颜色，

colorOnSecondary图标的颜色。

然后就可以将主题添加到SpeedDialView：

<com.leinardi.android.speeddial.SpeedDialView
    android:id="@+id/speedDial"
    android:theme="@style/Theme.FAB"
    android:layout_
    android:layout_
    android:layout_gravity="bottom|end"
    app:sdMainFabClosedSrc="@drawable/ic_add_white"
    app:sdOverlayLayout="@id/speedDialOverlay" />

【参考方案11】：

更新

很快： @gab-ledesma 评论成功了： https://***.com/a/53843325/5451349

实现'com.google.android.material:material:1.2.0-alpha05'

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
...
app:iconTint="@color/white"
app:icon="@drawable/ic_add_white"
...

Finnaly app:iconTint 更改了图标颜色。 我在源代码中找到了它：

https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/floatingactionbutton/res/values/styles.xml#L81

当然，您需要先查看说明： https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md