Floating Action Button appearing as a square

问题

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,

回答1:

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

回答2:

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.

回答3:

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

回答4:

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.

来源：https://stackoverflow.com/questions/50587736/floating-action-button-appearing-as-a-square