Remove background colour from FloatingActionButton

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.


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

If anyone comes across this the fix is fairly straightforward.

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