从 FloatingActionButton 中移除背景颜色

Question

我在我的应用程序中使用了几个 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" 的样子喜欢：

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

Answer 1

尝试以下行：

 app:backgroundTint="@null"

Answer 2

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

所以 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"/>

希望对您有所帮助。

Answer 3

添加这个：

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" />

Answer 4

如果有人遇到此问题，修复非常简单。

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

Answer 5

将 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"/>

Answer 6

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

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

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

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

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

从 FloatingActionButton 中移除背景颜色

Remove background colour from FloatingActionButton

android

floating-action-button