Android Studio中FloatingActionButton无法居中问题求助

问题描述 #

开发带底部导航栏的Android页面时，给FloatingActionButton设置app:layout_anchor="@id/bottom_navigation"后，它并未居中嵌入BottomAppBar的预留凹槽，反而对齐到右下角。尝试添加app:fabAlignmentMode="center"属性也无法解决问题，期望实现FAB居中嵌入凹槽的效果。

问题根源 #

1. 锚定目标错误：FAB被锚定到了BottomNavigationView（bottom_navigation），而非承载它的BottomAppBar（bottomAppBar），导致无法识别BottomAppBar的凹槽定位规则。
2. BottomNavigationView宽度不足：当前BottomNavigationView的宽度设为wrap_content，没有填满BottomAppBar，进一步干扰了FAB的居中定位逻辑。

修复步骤 #

1. 修正FAB的锚定目标 #

将FAB的app:layout_anchor属性值从@id/bottom_navigation改为@id/bottomAppBar，让FAB直接锚定到BottomAppBar上，自动对齐凹槽位置。

2. 调整BottomNavigationView的布局 #

将BottomNavigationView的android:layout_width设为match_parent，使其填满BottomAppBar，同时添加左右边距避开FAB的凹槽区域，避免导航项被遮挡。

3. 可选：优化FAB嵌入深度（按需调整） #

给BottomAppBar添加app:fabCradleVerticalOffset="8dp"属性，可调整FAB嵌入凹槽的深度，让视觉效果更自然。

修改后的完整代码 #

Activity_drawer（主布局） #

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawer_layout"
    tools:context=".Drawer">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white">

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

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

        <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:backgroundTint="@color/pinks"
                app:fabCradleMargin="10dp"
                app:fabCradleRoundedCornerRadius="50dp"
                app:fabCradleVerticalOffset="8dp">

                <com.google.android.material.bottomnavigation.BottomNavigationView
                    android:id="@+id/bottom_navigation"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    app:labelVisibilityMode="labeled"
                    app:menu="@menu/bottom_menu"
                    app:layout_marginStart="16dp"
                    app:layout_marginEnd="16dp"/>

            </com.google.android.material.bottomappbar.BottomAppBar>

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:backgroundTint="@color/pinks"
                android:src="@drawable/nav_add"
                android:tint="@color/pink"
                app:layout_anchor="@id/bottomAppBar"
                app:maxImageSize="40dp" />

        </androidx.coordinatorlayout.widget.CoordinatorLayout>

    </RelativeLayout>

    <com.google.android.material.navigation.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/nav_view"
        android:background="@color/pink"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu"
        app:itemIconTint="@color/white"
        app:itemTextColor="@color/white"
        android:theme="@style/ThemeOverlay.AppCompat.navTheme"/>

</androidx.drawerlayout.widget.DrawerLayout>

bottom_menu（保留空item占位） #

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/bottom_home"
        android:title="首页"
        android:icon="@drawable/bottom_home" />

    <item
        android:id="@+id/bottom_perguntas"
        android:title="问答"
        android:icon="@drawable/bottom_question" />
    <item
        android:title=""
        android:enabled="true" />
    <item
        android:id="@+id/bottom_settings"
        android:title="设置"
        android:icon="@drawable/bottom_settings" />

    <item
        android:id="@+id/bottom_profile"
        android:title="我的"
        android:icon="@drawable/bottom_profile" />

</menu>

注意事项 #

• BottomMenu中的空item必须保留，用于占据FAB对应的位置，避免导航项布局错乱
• 确保Material Components库版本足够新，避免因版本兼容问题导致布局异常

内容的提问来源于stack exchange，提问作者Ranyê Wilames