无法设置浮动操作按钮的渐变背景

Question

我正在尝试将浮动操作按钮的背景设置为渐变。我已经看到了很多解决方案，但没有一个对我有用。无论我尝试什么，它都会向我显示一个黑色的操作按钮。我尝试将背景设置为彩色，但这也不起作用。我正在尝试创建底部导航栏。

我的代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">

        <com.google.android.material.appbar.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <androidx.appcompat.widget.Toolbar
                        android:id="@+id/toolbar"
                        android:layout_width="match_parent"
                        android:layout_height="56dp"
                        app:titleTextColor="#000000"
                        app:title="????????????????????????????????????"
                        app:elevation="8dp"
                        />

        </com.google.android.material.appbar.AppBarLayout>


        <FrameLayout
                android:id="@+id/container"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="56dp"
                />

        <com.google.android.material.bottomappbar.BottomAppBar
                android:id="@+id/bottomAppBar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:backgroundTint="@color/colorPrimary"
                android:layout_gravity="bottom"
                app:elevation="8dp"
                app:fabAlignmentMode="center"
                app:fabCradleRoundedCornerRadius="32dp"
                app:fabCradleMargin="10dp"
                app:fabCradleVerticalOffset="18dp"
                app:buttonGravity="bottom">

                <com.google.android.material.bottomnavigation.BottomNavigationView
                    android:id="@+id/bottomNav"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="bottom"
                    app:menu="@menu/bottom_menu"
                    android:layout_marginEnd="16dp"
                    android:background="@android:color/transparent"
                    app:itemIconTint="@color/bottom_nav_selector"
                    />

        </com.google.android.material.bottomappbar.BottomAppBar>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_button"
            android:src="@drawable/fab_gradient"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_anchor="@id/bottomAppBar"
            android:contentDescription="TODO" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

渐变

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        
        
        <item>
                <shape android:shape="oval">
                        
                        <gradient
                                android:angle="45"
                                android:endColor="#cd337b"
                                android:startColor="#f09448" />
                </shape>
        
        </item>
        <item android:gravity="center">
                <bitmap
                        android:gravity="fill_horizontal"
                        android:src="@drawable/ic_action_add" />
        
        </item>

</layer-list>

Answer 1

在你的 theme.xml 中创建一个样式

<style name="Floating" parent="Widget.Design.FloatingActionButton">
    <!---rest of your style-->
    <item name="android:foreground">@drawable/gradient</item>
</style>

并在您的 FloatingActionButton 中应用此样式：

   <com.google.android.material.floatingactionbutton.FloatingActionButton
    style="@style/Floating"
    android:id="@+id/fab_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@id/bottomAppBar"
    android:contentDescription="TODO" />

更新：

使图标居中：在 API 23 及更高版本中：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <gradient
                android:angle="45"
                android:endColor="#cd337b"
                android:startColor="#f09448" />
        </shape>
    </item>
    <item
        android:drawable="@drawable/common_full_open_on_phone"
        android:gravity="center"
        android:width="24dp"
        android:height="24dp">
    </item>
</layer-list>

对于 API 23 及以下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <gradient
                android:angle="45"
                android:endColor="#cd337b"
                android:startColor="#f09448" />
        </shape>
    </item>
    <item
        android:drawable="@drawable/common_full_open_on_phone"
        android:top="15dp"
        android:right="15dp"
        android:left="15dp"
        android:bottom="15dp" />
</layer-list>