Android:渐变FAB背景

问题描述 投票:-2回答:1

有人可以分享如何为浮动操作按钮实现渐变背景吗?

我想实现这样的目标:

Gradient FAB

我尝试使用以下可绘制对象:

<?xml version="1.0" encoding="utf-8"?>

<item>
    <shape android:shape="oval">
        <gradient
            android:type="linear"
            android:angle="0"
            android:startColor="#f6ee19"
            android:endColor="#115ede" />
    </shape>

</item>
<item android:gravity="center"
    >
    <bitmap android:src="@drawable/ic_close_accent"
        android:gravity="fill_horizontal" />

</item>

然后在我的活动中,我将android:src设置为此可绘制对象,但它没有用

我也尝试设置android:backgroundTint和android:background,但它们也无法正常工作。

有人可以帮忙吗?

android android-layout gradient floating-action-button
1个回答
0
投票

我尝试了许多解决方案,但无法更改可以将drawable用作资源的背景。

因此尝试在下面使用可能对您有帮助。

Layout.xml

...
...
    <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/floatingActionButton"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="end|bottom"
            android:backgroundTint="@color/transparent"
            android:scaleType="fitCenter"
            android:src="@drawable/fab_scr"
            app:elevation="0dp"
            app:fabSize="normal"
            app:pressedTranslationZ="0dp" />
...
...

我将android:src设置为可绘制的并删除背景(即透明)

fab_src.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <stroke
                android:width="1dp"
                android:color="#38260D" />
            <padding
                android:bottom="20dp"
                android:left="20dp"
                android:right="20dp"
                android:top="20dp" />
            <corners
                android:bottomLeftRadius="8dip"
                android:bottomRightRadius="8dip"
                android:topLeftRadius="8dip"
                android:topRightRadius="8dip" />

            <gradient
                android:angle="45"
                android:centerX="50"
                android:centerY="50"
                android:endColor="#B9FFA6"
                android:gradientRadius="100"
                android:startColor="#EB77FF"
                android:type="linear" />

        </shape>
    </item>
    <item>
        <shape android:shape="line">
            <stroke
                android:width="2dp"
                android:color="@android:color/white" />

        </shape>
    </item>
    <item>
        <rotate
            android:fromDegrees="90"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="-90">
            <shape android:shape="line">
                <stroke
                    android:width="2dp"
                    android:color="@android:color/white" />

            </shape>
        </rotate>
    </item>

</layer-list>

结果:

SS

注意:试图找到一种方法来去除外圈(黄色,是您找到一种方式做评论,我会改善答案)

© www.soinside.com 2019 - 2024. All rights reserved.