Material Design3中BottomAppBar的FAB居中后cradle效果消失求助

问题描述 #

需要将FAB（浮动操作按钮）置于BottomAppBar中央，同时保留BottomAppBar的Cradle（凹槽）效果：

• 未设置居中时，凹槽正常显示，但FAB未居中：
  
• 添加app:fabAlignmentMode="center"让FAB居中后，凹槽效果消失：
  
• 尝试改用app:layout_anchorGravity="center"让FAB居中，同样无效。当前使用Material Design 3。

原XML代码 #

<androidx.constraintlayout.widget.ConstraintLayout 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:background="@drawable/app_background"
    tools:context=".ui.main.MainActivity">

    ...

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">
        
        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="75dp"
            android:layout_gravity="bottom"
            app:fabAnchorMode="cradle"
            app:fabAlignmentMode="center"
            app:fabCradleVerticalOffset="0dp"
            app:fabCradleMargin="10dp">

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="16dp"
                app:menu="@menu/bottom_menu"/>

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

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_camera"
            app:layout_anchor="@id/app_bar"
            app:fabCustomSize="70dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.Material3.Corner.Full"/>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

解决办法 #

Material 3中app:fabAlignmentMode="center"会覆盖fabAnchorMode="cradle"的凹槽效果，需要调整属性配置：

• 移除BottomAppBar的app:fabAlignmentMode="center"：该属性会强制BottomAppBar采用居中对齐模式，屏蔽凹槽效果
• 给FAB添加app:layout_anchorGravity="center"：通过锚点重力控制FAB在BottomAppBar中央显示
• 调整fabCradleVerticalOffset属性：设置为FAB高度的负值（比如你的FAB自定义尺寸是70dp，就设置为-35dp），让凹槽正确贴合FAB底部
• 保留fabAnchorMode="cradle"和fabCradleMargin：确保凹槽的基础配置生效

修改后的完整代码 #

<androidx.constraintlayout.widget.ConstraintLayout 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:background="@drawable/app_background"
    tools:context=".ui.main.MainActivity">

    ...

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">
        
        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/app_bar"
            android:layout_width="match_parent"
            android:layout_height="75dp"
            android:layout_gravity="bottom"
            app:fabAnchorMode="cradle"
            app:fabCradleVerticalOffset="-35dp"
            app:fabCradleMargin="10dp">

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="16dp"
                app:menu="@menu/bottom_menu"/>

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

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_camera"
            app:layout_anchor="@id/app_bar"
            app:layout_anchorGravity="center"
            app:fabCustomSize="70dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearance.Material3.Corner.Full"/>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

关键修改说明 #

• 移除app:fabAlignmentMode="center"：避免屏蔽凹槽效果
• 设置app:layout_anchorGravity="center"：让FAB锚定在BottomAppBar中央
• fabCradleVerticalOffset="-35dp"：因为FAB高度是70dp，负值让凹槽向上偏移一半高度，完美贴合FAB底部，保证凹槽可见且位置正确

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