Square FloatingActionButton with Android Design Library

Question

The new android design library provides the android.support.design.widget.FloatingActionButton to make it easier to implement a floating action button.

But the button is always a circle.

I received from the company designer a square floating button concept, but I can't find any reference to change the background of the android.support.design.widget.FloatingActionButton to have a square background.

Note: If I use a custom custom drawable the background still have the circle, like this:

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_filter"
    app:layout_anchor="@+id/appbar"
    app:layout_anchorGravity="bottom|right|end" />

enter image description here

I try to use a simple Button, but it seems to break the toolbar size when it was collapsed:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:elevation="10dp"
    android:background="@drawable/button_filter"
    app:layout_anchor="@+id/appbar"
    app:layout_anchorGravity="bottom|right|end" />

enter image description here

Is possible to have a square button using the FloatingActionButton with the new Android Design Library?

score 3 · Answer 1 · answered Jun 09 '15 at 18:57

The problem is the "android:background", look at the template below and notice the "app:backgroundTint", use it as template and it should work:

<android.support.design.widget.FloatingActionButton
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/your_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="@dimen/floating_button_margin_bottom"
        android:layout_marginRight="@dimen/floating_button_margin_right"
        app:elevation="@dimen/floating_button_elevation"
        app:borderWidth="0dp"
        app:rippleColor="@color/your_ripple_color"
        app:backgroundTint="@color/your_bg_color" />

score 0 · Accepted Answer · answered Jun 08 '15 at 17:32

Alright, using use the attribute app:borderWidth="0dp" in the FloatingActionButton solved the problem.

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_filter"
    app:layout_anchor="@+id/appbar"
    app:borderWidth="0dp"
    app:layout_anchorGravity="bottom|right|end" />

Square FloatingActionButton with Android Design Library

2 Answers2

Linked