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

Question

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"/>

score 9 · Accepted Answer · answered Jul 20 '20 at 06:14

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>

score 1 · Answer 2 · answered Jul 20 '20 at 03:38

FloatingActionButton does not provide shapes other than rounded see this Request: allow to set the shape of FAB

Yet there are many ways other than this to do But one which I personally recommend is using customFloatingActionButton library by robertlevonyan, It is easy to use and customizable.

Square Shape

Add the following line of code to your module(app) level Gradle file

implementation 'com.robertlevonyan.view:CustomFloatingActionButton:3.0.1'

Now add the following code to activity_main.xml

<com.robertlevonyan.views.customfloatingactionbutton.FloatingActionButton
       android:id="@+id/custom_fab"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom|end" />

You can customize it in XML too by adding app:fabType="square" but I prefer MainActivity.java

Then customize floatingactionbutton in MainActivity.java

public class MainActivity extends AppCompatActivity {
    private FloatingActionButton floatingActionButton;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        floatingActionButton = findViewById(R.id.custom_fab);

        floatingActionButton.setFabType(FabType.FAB_TYPE_SQUARE); //set button type to square
        floatingActionButton.setFabIcon(getResources().getDrawable(R.drawable.ic_baseline_add_btn_24, null));

    }
}

Output

It is not correct. The official FAB supports shaping with the `ShapeAppearanceModel` and you can define a custom `CornerTreatment` not only a `RoundedCornerTreatment` or `CutCornerTreatment`. In this case a `RoundedCornerTreatment` is enough, just use `0dp` as you can check in my answer. — Gabriele Mariotti, Jul 20 '20 at 13:43

score 0 · Answer 3 · answered Jul 20 '20 at 03:23

You'd better use this library customFloatingActionButton by Robertlevonyan.

<com.robertlevonyan.examples.customfloatingactionbutton.view.FloatingLayout
        android:id="@+id/floating_layout"
        app:fabType="square"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

3 Answers3

Output