Android: Gradient FAB background

Question

Can someone share how to implement a gradient background to a floating action button ?

I want to achieve something like that:

I tried to use the drawable below:

<?xml version="1.0" encoding="utf-8"?>

<item>
    <shape 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/ic_close_accent"
        android:gravity="fill_horizontal" />

</item>

Then in my activity i set android:src to this drawable but it didn't work

I also tried to set android:backgroundTint and android:background but these didn't work too.

Can someone please help?

You need to use the `app` namespace not the `android` namespace. See here: [How to change FAB background color](https://stackoverflow.com/questions/34606766/how-to-change-fab-background-color) — Chris Stillwell, Nov 14 '19 at 15:58
https://stackoverflow.com/questions/12166559/how-to-add-a-gradient-to-buttons-in-android-through-xml — CodeWithVikas, Nov 14 '19 at 15:59
@CodeWithVikas android:background is not working for me. Have you tried this code on a FAB ? — Mervin Hemaraju, Nov 14 '19 at 17:08

score 0 · Answer 1 · answered Nov 15 '19 at 07:04

I tried many solution's but was not able to change the background where i can use drawable as resource.

So tried to use below might be helpful in your case.

Layout.xml

...
...
    <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/floatingActionButton"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="end|bottom"
            android:backgroundTint="@color/transparent"
            android:scaleType="fitCenter"
            android:src="@drawable/fab_scr"
            app:elevation="0dp"
            app:fabSize="normal"
            app:pressedTranslationZ="0dp" />
...
...

I am setting android:src to a drawable and removing background(i.e transparent)

fab_src.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <stroke
                android:width="1dp"
                android:color="#38260D" />
            <padding
                android:bottom="20dp"
                android:left="20dp"
                android:right="20dp"
                android:top="20dp" />
            <corners
                android:bottomLeftRadius="8dip"
                android:bottomRightRadius="8dip"
                android:topLeftRadius="8dip"
                android:topRightRadius="8dip" />

            <gradient
                android:angle="45"
                android:centerX="50"
                android:centerY="50"
                android:endColor="#B9FFA6"
                android:gradientRadius="100"
                android:startColor="#EB77FF"
                android:type="linear" />

        </shape>
    </item>
    <item>
        <shape android:shape="line">
            <stroke
                android:width="2dp"
                android:color="@android:color/white" />

        </shape>
    </item>
    <item>
        <rotate
            android:fromDegrees="90"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="-90">
            <shape android:shape="line">
                <stroke
                    android:width="2dp"
                    android:color="@android:color/white" />

            </shape>
        </rotate>
    </item>

</layer-list>

Result:

Note: trying to find a way to remove the outer ring(yellow is you find a way do comment i will improve the answer)

It's not working. I took your code like it is exactly but it renders a black FAB with no icon... — Mervin Hemaraju, Nov 15 '19 at 15:57
android:layout_width="100dp" android:layout_height="100dp" this is important part of code. — Anmol, Nov 16 '19 at 07:33

Android: Gradient FAB background

1 Answers1

Layout.xml

fab_src.xml

Result: