'Remove background colour from FloatingActionButton

I am using several FloatingActionButton in my application as :

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/loc_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="123dp"
        android:layout_marginEnd="@dimen/mini_fab_margin"
        android:src="@drawable/plus"
        app:backgroundTint="@android:color/black"
        app:elevation="2dp"
        app:fabSize="mini"/>

Where plus.png is a small plus image with transparent background.

I know FloatingActionButton by default picks up colorPrimary of your applicaytion set in colors.xml

I know we can change the colour via tag :

    app:backgroundTint="@android:color/black"

But can we remove colour? I mean can we have an Image with background colour in FloatingActionButton,

I tried using

    app:backgroundTint="@android:color/transparent"

But it still displays black shadow around image. How can we remove this and display just the image without any background. ?

This is what app:backgroundTint="@android:color/transparent" and style : style="?android:attr/borderlessButtonStyle" makes it look like :

Look for transparent circle around because of shadow. It is here that I can not get rid of shadow but I want shadow to be around image.

android floating-action-button

Solution 1:^[1]

Add this:

android:elevation="0dp" 
app:elevation="0dp"

It's will be like

 <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="@dimen/cart_amount_height"
            android:layout_height="@dimen/cart_amount_height"
            android:layout_gravity="bottom|end"
            android:layout_margin="40dp"
            android:background="@null"
            app:backgroundTint="@android:color/transparent"
            android:elevation="0dp"
            app:elevation="0dp"
            android:src="@drawable/your_icon" />

Solution 2:^[2]

If anyone comes across this the fix is fairly straightforward.

android:backgroundTint="@color/transparent" android:outlineProvider="none"

Solution 3:^[3]

Setting the android:outlineProvider to none and the app:backgroundTint to null can help achieve this.

At the end of the day the whole thing should look this way

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="40dp"
    android:background="@null"
    android:outlineProvider="none" 
    app:backgroundTint="@android:color/transparent"
    android:src="@drawable/your_icon"/>

Solution 4:^[4]

Try below line:

 app:backgroundTint="@null"

Solution 5:^[5]

To convert a FAB into a floating icon, there are three parameters:

app:backgroundTint="@android:color/transparent"
removes the background color

android:outlineProvider="none"
removes the shadow and glow effects

app:borderWidth="0dp"
removes the translucent outer ring

Combine all three and you get a floating icon that has all the advantages of being a FAB.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Zulqarnain
Solution 2	Lee Bailey - LeeDrOiD
Solution 3	Mubarak Tahir
Solution 4	David
Solution 5	Abandoned Cart

'Remove background colour from FloatingActionButton

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]