浮动动作按钮显示为正方形

Question

我目前正在使用Android应用并使用最新添加的浮动操作按钮。但是，在编译了必要的库并将fab添加到我的xml文件中之后，它看起来像一个正方形，而我希望它是一个圆形，就像其他地方一样。

我使用相同的基本代码来实现在线发现的工厂，我的结果是一个正方形，他们是一个很好的圆形工厂。

这是我的代码：

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

以下是显示内容的屏幕截图：

如何以圆形显示工厂（在此处添加联系人）？

谢谢，

Answer 1

尝试为您的fab或父级布局设置一个appcompat主题：android:theme="@style/Theme.AppCompat"

Answer 2

即使您的活动扩展了AppCompatActivity，您也可能需要先构建项目（Ctrl + F9），然后才能正确呈现预览。

Answer 3

试试这个XML代码，这是Android studio从模板

自动生成的代码

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

希望这有帮助。

Answer 4

我不知道这是什么解决方案，但是我停止了另一个项目的开发工作，而我的另一个项目也没有这个问题。

如果您的活动扩展了Activity而不是AppCompatActivity，则AndroidStudio似乎会创建一个方形fab。

Answer 5

请务必仔细检查您的XML文件是否指向其上下文（活动的Java部分），我刚刚花了30分钟的时间试图解决此问题，这就是因为这个原因。

Answer 6

您可以将材质 FAB 与 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" />

结果如下

发生这种情况的原因是，您为应用使用的主题不同于 FAB 使用的主题。就我而言，我为我的应用使用 Theme.AppCompat.Light.NoActionBar，但 FAB 不支持。