Question

我正在创建一个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_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内的图标使用了可绘制的原始矢量的颜色。

有人知道为什么会这样以及如何解决吗？

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

就我而言，我只是按照这个

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/bottom_home"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    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" />

我的结果是

Answer 6

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

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

Answer 7

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

Answer 8

使用app：tint =“ @ color / white”

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        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"/>

Answer 9

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

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

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/idFABAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        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" />

Answer 10

实现'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"
...

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

Android FAB图标始终以MaterialComponents主题为黑色

10 个答案: