androidfloating-action-buttonmaterial-components-androidmaterial-componentsandroid-shapedrawable

How do I use a floating action button as a square?


There are tons of SO threads saying their button is appearing as a square do to a bug

Floating Action Button with square shape

Square FloatingActionButton with Android Design Library

Floating Action Button appearing as a square

However my goal is to USE a square button. How would I change the circle floating action button into a square one?

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"     
        android:backgroundTint="@color/standardBlue"
        app:srcCompat="@drawable/ic_3d_model"/>

Solution

  • You can do it with the official FloatingActionButton in the Material Components Library using the shapeAppearanceOverlay attribute.

    Just use:

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            app:shapeAppearanceOverlay="@style/fab_square"
    

    with

    <style name="fab_square" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">0dp</item>
    </style>
    

    enter image description here