Floating Action Button appearing as a square

Question

I am currently working on an Android app and using the latest addition of the Floating Action Button. However, after compiling the necessary libraries and adding the fab into my xml file, it appears as a square while I am expecting it to be a circle, just like everywhere else.

I use the same basic code to implement the fab as found online and my result is a square and theirs is a nice circle fab.

Here is my code:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:src="@drawable/ic_person_add_black_24dp" />

Here is an screenshot of what is displayed:

How to display the fab (add contact here) as a circle?

Thank you,

https://stackoverflow.com/questions/31202622/floating-action-button-with-square-shape/31667546 — ADM, May 29 '18 at 15:48

score 4 · Answer 1 · answered Aug 03 '18 at 15:25

4

Try to set one of appcompat themes for your fab or either for the parent layout: android:theme="@style/Theme.AppCompat"

answered Aug 03 '18 at 15:25

Luke

2,539
2
23
40

This one works for FAB. can you please state about Extended FAB? – Faizan Haidar Khan Dec 29 '20 at 10:49
Material components should probably use material themes and I presume we're talking about `com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton`. You might try `Widget.MaterialComponents.ExtendedFloatingActionButton` or `?attr/extendedFloatingActionButtonStyle` (as per deoc it's the default one). For more details you can take a lool at material styles xml source code https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/floatingactionbutton/res/values/styles.xml – Luke Dec 30 '20 at 13:54

score 1 · Accepted Answer · answered Aug 04 '18 at 23:38

I don't know if this is what solved it but I stopped working on this project for another one for a little bit & I didn't have this problem on my other project.

AndroidStudio seems to create a square fab if your activity extends Activity and not AppCompatActivity.

score 1 · Answer 3 · answered Mar 19 '19 at 16:16

1

Even if your activity extends AppCompatActivity you may also need to build the project (Ctrl+F9) before you can see the preview properly rendered.

answered Mar 19 '19 at 16:16

zmeeagain

439
4
4

score 0 · Answer 4 · answered May 29 '18 at 15:48

0

Try this XML code, This is auto-generated code by Android studio from the template

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    app:srcCompat="@android:drawable/ic_dialog_email" />

Hope this helps.

answered May 29 '18 at 15:48

Naveen T P

6,955
2
22
29

It gives me the same result. I also tried using the Design tab on Android Studio and directly clicking on the option for a fab and it is still displayed as a square. Any other idea by any chance? – ChanceVI May 29 '18 at 15:53
Which version of support library you are using? also try adding `app:borderWidth="0dp"` – Naveen T P May 29 '18 at 15:55
Here they are: compile 'com.android.support:appcompat-v7:24.2.1' compile 'com.android.support:design:24.2.1' Also, SdkVersion is set to 27 – ChanceVI May 29 '18 at 16:29

score 0 · Answer 5 · answered Dec 31 '20 at 05:50

You can use material FAB with Theme.MaterialComponents

 <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/fab_Send"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:contentDescription="@string/app_name"
            android:gravity="center"
            android:text="@string/send"
            android:theme="@style/Theme.MaterialComponents"
            android:textAllCaps="false"
            android:textColor="@color/colorWhite"
            android:textSize="@dimen/_12sdp"
            app:backgroundTint="@color/colorPrimary"
            app:borderWidth="0dp"
            android:fontFamily="@font/play_fair_display_black"
            app:useCompatPadding="true"
            tools:ignore="RelativeOverlap" />

Here is the result

The reason why this happens is that, you are using a different theme for you app other than that is used by the FAB. In my case I am using Theme.AppCompat.Light.NoActionBar for my app but FAB does not supported by this.

Floating Action Button appearing as a square

5 Answers5

Linked