真机中Floating Action Button位置异常问题求助

• 在Genymotion模拟器中，包含BottomAppBar和FloatingActionButton的Activity显示完全符合预期
• 但导出APK安装到搭载MIUI13（Android 12）的小米设备时，FloatingActionButton出现向左偏移的异常

以下是XML源码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/draw_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black">
        
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbarMain"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/red"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

        <FrameLayout
            android:id="@+id/frameMainContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <com.google.android.material.bottomappbar.BottomAppBar
                android:id="@+id/bottomAppBar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:background="@color/red"
                app:fabCradleMargin="10dp"
                app:fabCradleRoundedCornerRadius="50dp">
                <com.google.android.material.bottomnavigation.BottomNavigationView
                    android:id="@+id/bottomNavMain"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:backgroundTint="@color/red"
                    android:visibility="visible"
                    app:labelVisibilityMode="labeled"
                    app:menu="@menu/bottom_navigation_menu" />
            </com.google.android.material.bottomappbar.BottomAppBar>

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/fabCenter"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/baseline_add_circle_outline_24"
                app:layout_anchor="@id/bottomAppBar"/>
        </androidx.coordinatorlayout.widget.CoordinatorLayout>
    </RelativeLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navViewDrawer"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/black"
        app:itemIconTint="@color/white"
        app:itemTextColor="@color/white"
        android:theme="@style/ThemeOverlay.AppCompat.Dark"
        app:headerLayout="@layout/app_header"
        app:menu="@menu/drawer_navigation_menu"/>

</androidx.drawerlayout.widget.DrawerLayout>

修复方案 #

1. 修正FloatingActionButton的宽高属性 #

FAB设置match_parent宽高会导致布局计算异常，改为：

android:layout_width="wrap_content"
android:layout_height="wrap_content"

2. 添加锚点对齐属性 #

明确指定FAB相对于BottomAppBar的对齐方式，确保居中：

app:layout_anchorGravity="center"

3. 调整BottomAppBar与BottomNavigationView的布局结构 #

将BottomNavigationView从BottomAppBar内部移出，避免嵌套布局冲突，让两者同处于CoordinatorLayout下，同时调整BottomAppBar的垂直偏移属性优化FAB位置：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@color/red"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="50dp"
        app:fabCradleVerticalOffset="4dp"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavMain"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/transparent"
        android:backgroundTint="@color/red"
        android:visibility="visible"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/bottom_navigation_menu" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabCenter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/baseline_add_circle_outline_24"
        app:layout_anchor="@id/bottomAppBar"
        app:layout_anchorGravity="center"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

4. 检查MIUI系统设置 #

部分MIUI版本的导航栏/全面屏设置会影响系统UI组件适配，可尝试切换导航栏样式（如从全面屏切换为经典导航栏）后重新测试。

内容的提问来源于stack exchange，提问作者Tuan Vu