从 FloatingActionButton 中删除背景颜色答案

【问题标题】：Remove background colour from FloatingActionButton从 FloatingActionButton 中删除背景颜色
【发布时间】：2017-12-22 02:22:17
【问题描述】：

我在我的应用程序中使用了几个 FloatingActionButton：

    <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" 的样子：

寻找周围的透明圆圈，因为有阴影。正是在这里，我无法摆脱阴影，但我希望图像周围有阴影。

【问题讨论】：

标签： android floating-action-button

【解决方案1】：

我自己找到了解决方案并愿意分享。

所以 FloatingActionButton 有三种尺寸：普通、迷你和自动。

但是如果我们希望在不存在背景的情况下在 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"/>

希望对你有帮助。

【讨论】：

@null 产生黑色背景。你真正想要的是@android:color/transparent

【解决方案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" />

【讨论】：

【解决方案3】：

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

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

【讨论】：

只需要第一个。

【解决方案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"/>

【讨论】：

【解决方案5】：

试试下面一行：

 app:backgroundTint="@null"

【讨论】：

它有效@David。谢谢虽然我认为它在图像周围添加了一个白色背景。你怎么看？
如果它在图像周围添加白色背景如何正确？他希望它透明

【解决方案6】：

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

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

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

app:borderWidth="0dp"
去掉半透明的外圈

将这三者结合起来，你会得到一个浮动图标，它具有作为 FAB 的所有优点。

【讨论】：