FloatingActionButton 显示两种颜色（圆圈）答案

【问题标题】：FloatingActionButton showing two colors (circles)FloatingActionButton 显示两种颜色（圆圈）
【发布时间】：2019-04-13 19:20:28
【问题描述】：

我在布局中添加了一个 FloatingActionButton，它的唯一父级是 CoordinatorLayout，所以我不明白 backgroundTint 颜色的来源。

我尝试更改颜色以匹配内圈，但它会将整个按钮更改为纯色。

我也应用了不同的样式，但它根本没有改变按钮。我过去解决了这个问题，但我不记得我是怎么做到的。

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_action_add"
        app:layout_anchor="@+id/edit_layout"
        app:layout_anchorGravity="bottom|right|end" />

【问题讨论】：

您希望 FAB 和内部图标的颜色是什么？带有深红色图标或反面的灰色 FAB？

标签： android floating-action-button

【解决方案1】：

灰色来自您为style.xml 中的应用主题定义的colorAccent。现在@drawable/ic_action_add 是实心圆圈内的加号。尝试改用下面的图标：

ic_add_black_24dp.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#000000"
        android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
</vector>

然后将FloatingActionButton的背景设置为深红色，图标设置为灰色：

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    app:layout_anchor="@+id/edit_layout"
    app:layout_anchorGravity="bottom|right|end"
    app:tint="#404D54"
    app:backgroundTint="#6F303A"
    app:srcCompat="@drawable/ic_add_black_24dp" />

结果：

【讨论】：

【解决方案2】：

您没有提供任何app:backgroundTint，因此它使用来自colors.xml 的默认colorAccent。

解决这个问题：

1.在colors.xml中添加新颜色

<color name="fab_tint">#33d1ac</color>

2.修改代码如下：

  <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:src="@drawable/ic_action_add"
    app:layout_anchor="@+id/edit_layout"
    app:layout_anchorGravity="bottom|right|end"         
    app:backgroundTint="@color/fab_tint"/>

【讨论】：