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.

Solution 1

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.

Solution 2

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 3

If anyone comes across this the fix is fairly straightforward.

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

Solution 4

Try below line:

 app:backgroundTint="@null"

Solution 5

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

View more solutions