从FloatingActionButton中移除背景颜色

Question

我在我的应用程序中使用了多个浮动操作按钮，如下：

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/loc_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="123dp"
        android:layout_marginEnd="@dimen/mini_fab_margin"
        android:src="@drawable/plus"
        app:backgroundTint="@android:color/black"
        app:elevation="2dp"
        app:fabSize="mini"/>

其中 plus.png 是一个带有透明背景的小加号图片。

我知道 FloatingActionButton 默认会选择在 colors.xml 中设置的应用程序 colorPrimary 颜色。

我知道我们可以通过标签来更改颜色：

    app:backgroundTint="@android:color/black"

但是我们能够去除颜色吗？我的意思是，在FloatingActionButton中，我们能够拥有一个带有背景颜色的图像吗？

我尝试使用

    app:backgroundTint="@android:color/transparent"

但是它仍然在图像周围显示黑色阴影。我们如何去除此阴影并仅显示没有任何背景的图像。 这就是 app:backgroundTint="@android:color/transparent" 和 style:style="?android:attr/borderlessButtonStyle" 的效果：

寻找透明的圆形，因为阴影而出现。在这里，我无法消除阴影，但我希望阴影出现在图像周围。

- Tarun Deep Attri

Answer 1

我自己找到了解决方案，现在想分享一下。

FloatingActionButton 有三种尺寸：normal、mini 和 auto。

但是，如果我们希望在 FloatingActionButton 中出现更小的图像，而不需要背景存在，我们需要删除以下内容：

• 删除 app:backgroundTint 以使 FloatingActionButton 透明。
• 删除 app:rippleColor 以去除涟漪效果，并使阴影出现在我们更小的图像周围，而不是在 FloatingActionButton 周围（问题中显示的错误效果）。

因此，最终的 FloatingActionButton 如下所示：

<android.support.design.widget.FloatingActionButton
    android:id="@+id/my_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/center_small"
    app:rippleColor="@null"
    app:backgroundTint="@null"
    app:fabSize="mini"/>

我希望它能够帮助。

- Tarun Deep Attri

---

@null results in a black background. What you actually want is @android:color/transparent - Abandoned Cart

Answer 2

添加以下内容：

android:elevation="0dp" 
app:elevation="0dp"

这将会像是：

 <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="@dimen/cart_amount_height"
            android:layout_height="@dimen/cart_amount_height"
            android:layout_gravity="bottom|end"
            android:layout_margin="40dp"
            android:background="@null"
            app:backgroundTint="@android:color/transparent"
            android:elevation="0dp"
            app:elevation="0dp"
            android:src="@drawable/your_icon" />

- Zulqarnain

Answer 3

如果有人遇到这个问题，解决方法非常简单。

android:backgroundTint="@color/transparent" android:outlineProvider="none"

- Lee Bailey - LeeDrOiD

---

只需要第一个。 - Sam Chen

Answer 4

将 android:outlineProvider 设置为none，将 app:backgroundTint 设置为null 可以帮助实现这一目标。

到最后整个东西应该看起来像这样。

<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="40dp"
    android:background="@null"
    android:outlineProvider="none" 
    app:backgroundTint="@android:color/transparent"
    android:src="@drawable/your_icon"/>

- Mubarak Tahir

Answer 5

请尝试以下代码行：

 app:backgroundTint="@null"

- David

---

它可以工作，@David。谢谢。 虽然我认为它会在图像周围添加白色背景。你觉得呢？ - Tarun Deep Attri

如果在图像周围添加白色背景，那么正确的做法是什么？他希望它是透明的。 - Kingsley Mitchell

Answer 6

将 FAB 转换为浮动图标，需要三个参数：

app:backgroundTint="@android:color/transparent"
移除背景色

android:outlineProvider="none"
移除阴影和发光效果

app:borderWidth="0dp"
移除半透明的外环

将这三个参数组合起来，你就得到了一个具有 FAB 所有优点的浮动图标。

- Abandoned Cart