Home » Android » android – FloatingActionButton no border?

android – FloatingActionButton no border?

Posted by: admin June 15, 2020 Leave a comment

Questions:

I cannot find a way to get a FAB with no border. For example when I try:

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/fab"
    android:background="@android:color/transparent"
    android.support.design:fabSize="normal"
    android:adjustViewBounds="true"
    style="@style/Fab"/>

I get:

Screenshot

Notice the border still around the FAB. I have tried adjustViewBounds=”true” and android:background=”@android:color/transparent” both of which are the suggested solutions for getting rid of the border on an ImageView (which FAB extends) but neither work. How can I get rid of this border?

Note: all @style/Fab does is position the button, nothing to do with border.

How to&Answers:

Just add app:borderWidth="0dp" in your layout file:

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/fab"
    app:borderWidth="0dp"
    android:background="@android:color/transparent"
    android.support.design:fabSize="normal"
    android:adjustViewBounds="true"
    style="@style/Fab"/>

There is also added advantage of adding this, it fixes the problem of square FAB in API<15.

Update: The latest update for android support does not need borderwidth=0dp to fix the square FAB.

Answer:

Answer to comment by @Zvi

To make background of the button transparent, use this line :

app:backgroundTint="#00FFFFFF"

The hash code for transparent background is : #00FFFFFF

To change the color of the icon inside the button, use this :

android:tint="#800080"  

#800080 is the hash code for purple

For accessing hash codes for different colors, go here: http://www.color-hex.com/color-palettes/

Just copy the hash codes and paste it wherever you want it.

Answer:

Turns out it was

app:borderWidth="0dp"

How stupid of me. Thank you @Ranjith.

This somehow also added a shadow under the button:

enter image description here