Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

FloatingActionButton no border?

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.

like image 820
Kevin Cronly Avatar asked Jun 17 '15 16:06

Kevin Cronly


People also ask

How do you add a border color to a floating action button?

There is no straightforward way to change the floating action button border color. So the idea is to NOT use the floating action button widget at all and use the combination of Material and InkWell widget. You create the FloatingActionButton looking like a widget and then change the border color.

How to style floating action button?

Add the floating action button to your layoutThe 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.

What is a floating action button in Flutter?

A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action buttons are most commonly used in the Scaffold.

How do you change the shape of the floating action button in flutter?

To change the shape of the Floating action button: You can use the shape property of FloatingActionButton() widget class. Implement BeveledRectangleBorder( ) on this property. The output will be a square floating action button, increase the border-radius value to make a circular type shape.


2 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.

like image 154
Psypher Avatar answered Oct 18 '22 19:10

Psypher


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.

like image 31
Vijayachandran Chettiar Avatar answered Oct 18 '22 20:10

Vijayachandran Chettiar