Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 because of shadow

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.

like image 542
Tarun Deep Attri Avatar asked Dec 22 '17 02:12

Tarun Deep Attri


People also ask

How do I change the background color on FloatingActionButton?

To change background color of Floating Action Button in Kotlin Android, set the backgroundTint attribute (in layout file) or backgroundTintList property (in Kotlin file) of FAB with the required color.

How do I remove the floating action button background color in android?

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

How do I change the color SRC on my floating action button?

To change icon color of Floating Action Button in Kotlin Android we have to set the tint attribute (in layout file) or imageTintList parameter (in Kotlin program) of FAB with the required color.

How do I change the icon on my floating action button?

Add the floating action button to your layout The size of the FAB, using the app:fabSize attribute or the setSize() method. The ripple color of the FAB, using the app:rippleColor attribute or the setRippleColor() method. The FAB icon, using the android:src attribute or the setImageDrawable() method.


2 Answers

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.

like image 130
Tarun Deep Attri Avatar answered Oct 03 '22 00:10

Tarun Deep Attri


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" />
like image 23
Zulqarnain Avatar answered Oct 02 '22 23:10

Zulqarnain