Remove background colour from FloatingActionButton

Question

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.

score 13 · Accepted Answer · answered Dec 29 '17 at 13:16

I found the solution myself and would like to share same.

So FloatingActionButton comes in three sizes : normal and mini and auto.

But if we want smaller size images to appear in FloatingActionButton without background being present, we need to remove following things :

remove app:backgroundTint to make FloatingActionButton transparent.
remove app:rippleColor to remove ripple effect and make shadow appear around our smaller image and not around FloatingActionButton(error effect Shown in Image in question).

so final FloatingActionButton looks like following :

<android.support.design.widget.FloatingActionButton
    android:id="@+id/my_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/center_small"
    app:rippleColor="@null"
    app:backgroundTint="@null"
    app:fabSize="mini"/>

I hope it helps.

`@null` results in a black background. What you actually want is `@android:color/transparent` — Abandoned Cart, Feb 15 '22 at 04:34

score 8 · Answer 2 · answered Jan 07 '19 at 07:33

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

score 4 · Answer 3 · answered May 09 '20 at 00:10

4

If anyone comes across this the fix is fairly straightforward.

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

answered May 09 '20 at 00:10

Lee Bailey - LeeDrOiD

251
3
7

Just need the first one. – Sam Chen Aug 02 '20 at 19:18

score 3 · Answer 4 · answered Aug 20 '20 at 23:54

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

score 2 · Answer 5 · answered Dec 22 '17 at 02:26

2

Try below line:

 app:backgroundTint="@null"

answered Dec 22 '17 at 02:26

David

15,894
22
55
66

It works @David. Thanks Though I think it adds a white background around image. What do you think? – Tarun Deep Attri Dec 22 '17 at 02:41
How is it correct if it adds a white background around the image?He wants it transparent – Kingsley Mitchell Dec 27 '17 at 21:39

score 0 · Answer 6 · answered Feb 15 '22 at 06:41

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.

Remove background colour from FloatingActionButton

6 Answers6

Linked