如何使浮动操作按钮背景渐变？答案

【问题标题】：How to make Floating Action Button background Gradient?如何使浮动操作按钮背景渐变？
【发布时间】：2018-09-18 02:31:12
【问题描述】：

FAB 的代码：

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right|end"
        android:layout_margin="16dp"
        android:src="@drawable/add_chat"
        android:tint="@android:color/white" />
</android.support.design.widget.CoordinatorLayout>

渐变背景代码：

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="oval">
<gradient
    android:angle="90"
    android:endColor="#e4849f"
    android:startColor="#d96e30" />
</shape>

android:backgroundTint="" 或 app:backgroundTint="" 都只使用颜色资源。谁能建议如何做到这一点？谢谢！！

【问题讨论】：

标签： android floating-action-button

【解决方案1】：

第 1 步。 创建一个新的 drawable.xml 并将此代码添加到其中

 <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">


        <item>
            <shape xmlns:android="http://schemas.android.com/apk/res/android"
                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/your_icon"
                android:gravity="fill_horizontal" />

        </item>

    </layer-list>

第 2 步。）现在在您的 dimens.xml 中添加这行代码，

<dimen name="design_fab_image_size" tools:override="true">56dp</dimen>

第 3 步。) 最后使用 *android:src="@drawable/drawable.xml"* 在 FAB 中设置这个 drawable.xml

附： - 确保 your_icon 是 PNG、JPEG。

【讨论】：

<dimen name="design_fab_image_size" tools:override="true">56dp</dimen> 在添加上面的行后拉伸用作android:src="@drawable/your_icon"的图标
你需要设置你在第一步中创建的drawable android:src="@drawable/drawable.xml" 而不是android:src="@drawable/your_icon"

【解决方案2】：

接受的答案工作正常，但添加以下行后，它会拉伸添加在 FAB

上的图标

<dimen name="design_fab_image_size" tools:override="true">56dp</dimen>

我正在分享截图：

上一个FAB按钮

在dimen.xml中添加design_fab_image_size并添加android:src="@drawable/gradient"后，图标被拉伸：

为了解决这个问题，我用以下代码替换了我的 gradient.xml：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
        <gradient
            android:angle="90"
            android:startColor="#00FF00"
            android:endColor="#000000" />
        <size
            android:width="56dp"
            android:height="56dp" />
    </shape>
</item>
<item
    android:left="10dp"
    android:right="10dp">
    <shape android:shape="line">
        <stroke
            android:width="2dp"
            android:color="#ffffff" />
    </shape>
</item>
<item
    android:left="10dp"
    android:right="10dp">
    <rotate
        android:fromDegrees="90">
        <shape android:shape="line">
            <stroke
                android:width="2dp"
                android:color="#ffffff" />
        </shape>
    </rotate>
</item>

输出：

【讨论】：

【解决方案3】：

<style name="FullFABStyle">
    <item name="fabSize">normal</item>
    <item name="maxImageSize">@dimen/fab_size</item>
    <item name="fabCustomSize">@dimen/fab_size</item>
</style>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="@dimen/fab_size"
    android:layout_height="@dimen/fab_size"
    style="@style/FullFABStyle"
    app:srcCompat="@drawable/your_background" />

所以，你不需要覆盖维度

【讨论】：

【解决方案4】：

我尝试了很多不同的答案，但都有自己的缺点或不适用于material FAB。当我意识到这不是它的意思时，我只是将其替换为ImageView。这很好用，看起来一模一样。

<ImageButton
    android:id="@+id/floatingActionButton"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:background="@drawable/fab_gradient"
    android:elevation="6dp"
    ... />

fab_gradient.xml：

<ripple android:color="?attr/colorControlHighlight"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item>
                <shape android:shape="oval">
                    <gradient
                        android:type="linear"
                        android:angle="90"
                        android:startColor="@color/startColor"
                        android:endColor="@color/endColor" />
                </shape>
            </item>
            <item android:drawable="@drawable/vector_icon" android:gravity="center" />
        </layer-list>
    </item>
</ripple>

【讨论】：

这对我来说效果最好。事实上，我没有在图层列表中包含 vector_icon 项，因为它看起来被拉伸了。相反，我只是通过 ImageButton android:src 属性添加了它。竖起大拇指。

【解决方案5】：

这个方法也有效。在 drawable 中创建一个名为 fab_background.xml 的形状，您可以在其中进行所需的所有自定义

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"   xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:width="150dp" android:height="150dp"/>
    <gradient android:startColor="@color/colorAccentDark" android:endColor="@color/colorAccent"/>
</shape>

在布局中创建一个名为 custom_fab.xml 的布局，然后使用图像视图设置背景和 fab 图标

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:gravity="center"
    android:background="@drawable/fab_background"
    >

    <android.appcompat.widget.AppCompatImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/right" />
</LinearLayout>

然后您可以使用 include 引用它

示例

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    android:orientation="vertical">



    <include layout="@layout/custom_fab"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="32dp"/>
</RelativeLayout>

【讨论】：

【解决方案6】：

floatingActionButton: FloatingActionButton(
    child: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30),
          gradient: LinearGradient(
              begin: Alignment.bottomLeft,
              end: Alignment.topRight,
              colors: [
                Color.fromRGBO(55, 59, 68, 1),
                Color.fromRGBO(66, 134, 244, 1)
              ]),
        ),
        child: Icon(Icons.add)),
    onPressed: () => _startAddNewTransaction(context),
  ),

Here is the image of the FloatingActionButton

【讨论】：

与 Android Native 相关的给定问题需要 Java 或 Kotlin。考虑用 Java 或 Kotlin 给出解决方案。看来你这里给出了flutter的解决方案，对原生开发没用。

【解决方案7】：

使用CardView 代替涟漪效果：

<androidx.cardview.widget.CardView
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:clickable="true"
    android:focusable="true"
    android:foreground="?android:attr/selectableItemBackground"
    app:cardCornerRadius="28dp"
    app:cardElevation="12dp"
    app:cardUseCompatPadding="false">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/fab_gradient">

        <ImageView
            android:layout_width="24dp"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/icon_svg"
            app:tint="@color/white" />

    </RelativeLayout>

</androidx.cardview.widget.CardView>

上述答案不适用于 SVG，您可能还会看到拉伸图标等。根据 fab 的材料设计，这是我用于我的应用程序的一种简洁方式：

提示：如果它没有出现在您想要的图层上方，请使用elevation 属性。

【讨论】：