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 xm

Solution 1:

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

Solution 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.

Solution 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.

Solution 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.

Solution 5:

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.