浮动操作按钮图标不在中心

Question

SO 上 other answers 的

None 帮助了我。

这是我的 FAB xml:

<com.google.android.material.floatingactionbutton.FloatingActionButton xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fabTransfer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    app:fabCustomSize="@dimen/fab_size_normal"
    android:layout_margin="16dp"
    app:srcCompat="@drawable/ic_add_white_24dp" />

这是图标xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
<path
    android:fillColor="#FFFFFFFF"
    android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
 </vector>

然而我的图标看起来像这样！

知道发生了什么事吗？我也尝试过其他图标（png 和矢量），但还是一样。

Answer 1

尝试将此属性 android:layout_gravity="bottom|end" 更改为 android:layout_gravity="center"

Answer 2

因为你写的是：android:layout_gravity="bottom|end"，所以最后放在最下面。

您应该将其替换为"center"

如果它不起作用，请简单地尝试：

android:重力="center"

Answer 3

解决方案是向 FAB 添加一个样式，它扩展 Widget.MaterialComponents.FloatingActionButton

<style name="MyFabStyle" parent="Widget.MaterialComponents.FloatingActionButton">
        <item name="backgroundTint">@color/fab_background</item>
        <item name="rippleColor">#0d9bed</item>
</style>

Answer 4

在之后，您应该尝试将 app:fabCustomSize 设置为 24dp，看看效果是否更好。

Answer 5

app:fabCustomSize="48dp"

Answer 6

这可能是因为布局样式覆盖了浮动按钮样式。要解决它，请确保重新建立定义为您自己的样式，如下所示：

在styles.xml

    <style name="AppTheme.NoActionBar" parent="Theme.MaterialComponents.Light.Bridge">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="colorPrimary">@color/colorPrimaryDark</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorPrimaryDark</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@color/black_app</item>
        <item name="android:textColor">@color/white</item>
        <item name="floatingActionButtonStyle">@style/FabButtonStyle</item>
    </style>

    <style name="FabButtonStyle" parent="Widget.MaterialComponents.FloatingActionButton">
        <item name="backgroundTint">@color/teal_200</item>
        <item name="tint">@color/white</item>
    </style>

然后确保视图的布局符合样式：

在AndroidManifiest.xml

<activity
            android:name=".OnBoardingActivity"
            android:configChanges="orientation"
            android:screenOrientation="portrait"
            android:theme="@style/AppTheme.NoActionBar"
            tools:ignore="LockedOrientationActivity" />

浮动操作按钮图标不在中心

Floating Action Button icon not in the center

xml

android

android-layout

floating-action-button