How to make Floating Action Button background Gradient?

Question

The code for FAB:

Answer 1

The accepted answer is working fine but after adding the below line, it stretches the icon added on FAB

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

I am sharing the screenshots:

Previous FAB button

After adding design_fab_image_size in dimen.xml and adding android:src="@drawable/gradient", the icon get stretched:

To deal with this I replaced my gradient.xml with the following code:

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

Output:

Answer 2

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

So, yo do not need to override dimen

Answer 3

This method works also. Create a shape called fab_background.xml in drawable where you can do all the customization you want

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

Create a layout called custom_fab.xml in layout then set the backround and fab icon using the image view

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

You can then reference it using include

Example

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

Answer 4

Step 1. Create a new drawable.xml and add this code to it

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

Step 2.) Now in your dimens.xml add this line of code,

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

Step 3.) Finally set this drawable.xml in FAB using *android:src="@drawable/drawable.xml"*

P.S. - Make sure your_icon is a PNG, JPEG.

Answer 5

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

Answer 6

Use a CardView instead with ripple effect:

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

The above answers are not working with SVGs and you might also see stretched icons etc. This is a neat way I used for my app according to material design for fab:

Tip: If it does not appear above the layer you want, play with the elevation attribute.