How to make Floating Action Button background Gradient?

Question

The code for 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>

The code for gradient background:

<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="" or app:backgroundTint="" both uses color resources only.Can anyone suggest how to do this? Thanks !!

Answer 1

I tried a bunch of different answers but all had their shortcomings or didn't work with the material FAB. When I realized this is not what it is meant for I simply replaced it with an ImageView. This works great and looks identical.

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

Answer 2

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 3

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: