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

Crepuscule

Answer 1

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.

Weinstock

<dimen name="design_fab_image_size" tools:override="true">56dp</dimen> after adding above line streches the icon used as the android:src="@drawable/your_icon" – Put

You need to set drawable which you created in the first step android:src="@drawable/drawable.xml" not android:src="@drawable/your_icon" – Weinstock

But this will override the complete app dimension also it seems like a hack. If there is not correct way we should mention that given solution is a HACK – Natter

Answer 2

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:

Put

Answer 3

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>

Iatrochemistry

This is was best worked for me. In fact, I didn't include the vector_icon item in the layer-list, since it looked stretched. I, instead, simply added it via the ImageButton android:src attribute. Thumbs up. – Obsecrate

Answer 4

<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

Deal

Answer 5

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>

Petey

Answer 6

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

Farah

The given question related with Android Native which require either Java or Kotlin. Consider to give solution in Java or Kotlin. It seems you gave flutter's solution here, which isn't useful for native development. – Lackadaisical

Answer 7

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.

Shogun

Answer 8

For those who still have this problem, the simple solution to achieve this is by setting the foreground of the FAB.

Like this example below:

 <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:foreground="@drawable/circle_btn_gradient"
        />

Code for the drawable (circle_btn_gradient.xml):

<?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:startColor="#2F8FC5"
                android:endColor="#1FCEB9"
                android:angle="270"
                />

        </shape>
    </item>
    <item android:drawable="@drawable/baseline_add_24"
        android:top="15dp"
        android:left="15dp"
        android:right="15dp"
        android:bottom="15dp">
    </item>

</layer-list>

Vandalism