代码之家 › 专栏 › 技术社区 › Tarun Deep Attri

从浮动操作按钮中删除背景色

floating-action-button android

Tarun Deep Attri · 技术社区 · 8 年前

我在应用程序中使用几个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"/>

Where plus。png是一个带有透明背景的小加号图像。

我知道FloatingActionButton在默认情况下以颜色拾取应用程序集的colorPrimary。xml

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

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

但我们能去除颜色吗?我的意思是我们可以在FloatingActionButton中有一个背景颜色的图像吗,

我试过使用

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

但它仍然在图像周围显示黑色阴影。我们怎样才能去掉这个,只显示没有任何背景的图像呢。 ?

这是app:backgroundTint=“@android:color/transparent”和style:style=“?android:attr/borderlessButtonStyle”使其看起来像:

由于阴影,请在周围寻找透明的圆。就是在这里,我无法摆脱阴影,但我希望阴影围绕在图像周围。

6 回复 | 直到 8 年前

Tarun Deep Attri 8 年前

我自己找到了解决方案,希望与大家分享。

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

但如果我们希望较小尺寸的图像出现在FloatingActionButton中,而不存在背景,则需要删除以下内容:

删除应用程序:backgroundTint以使FloatingActionButton透明。
移除应用程序:rippleColor可移除涟漪效果,并使阴影出现在较小的图像周围,而不是浮动动作按钮周围(错误效果如所示)。

最后的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"/>

我希望这有帮助。

Zulqarnain 7 年前

添加以下内容:

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

Lee Bailey - LeeDrOiD 6 年前

如果有人遇到这种情况,那么解决方法相当简单。

android:backgroundTint=“@颜色/透明” android:outlineProvider=“无”

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

David rakar 8 年前

尝试以下行:

 app:backgroundTint="@null"

Abandoned Cart 4 年前

要将FAB转换为浮动图标,有三个参数:

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

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

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

将这三者结合在一起,你会得到一个浮动图标,它具有作为一个工厂的所有优势。