How to make Floating Action Button background Gradient?
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>
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:
<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
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.