Not able to set gradient background of floating action button

I am trying to set the background of the floating action button as a gradient. I have already seen many solutions but none of them are working out for me. whatever I try it is showing me a black action button. I have tried setting the background to colour but that also didn't work. I am trying to create the bottom navigationBar.

My code

<?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>

gradient

<?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>

In your theme.xml Create a style

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

and in your FloatingActionButton apply this style :

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

UPDATE:

to center the icon: in API 23 and above:

<?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>

and for API 23 and less :

<?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>

Not able to set gradient background of floating action button

1 Answers