如何消除BottomAppBar与FloatingActionButton间的间隙/凹槽并保持FAB位置

问题描述 #

使用如下XML实现BottomAppBar与FloatingActionButton（FAB）关联时，两者之间存在间隙/凹槽；添加app:fabAnchorMode="embed"后间隙消失，但FAB位置下移，不符合悬浮在Bar上方的需求：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment
        android:id="@+id/nav_host_fragment_activity_main"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/mobile_navigation" />

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinator_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!--
        Workaround: android:layout_gravity="bottom" is required so that bottom bar stays at bottom
        most.
        -->
        <com.google.android.material.bottomappbar.BottomAppBar
            android:layout_gravity="bottom"
            
            android:backgroundTint="#ffff00"
            
            android:id="@+id/bottom_app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <!--
            Workaround: android:layout_marginEnd="16dp" is required to balance the mystery
            marginStart.
            -->
            <!--
            Workaround: app:elevation="0dp" and app:backgroundTint="@android:color/transparent" is
            used due to the following reason :-
            https://stackoverflow.com/questions/63518075/android-problem-in-transparent-bottom-navigation-inside-the-bottom-app-bar
            -->
            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:layout_marginEnd="16dp"
                app:elevation="0dp"
                app:backgroundTint="@android:color/transparent"

                android:id="@+id/nav_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:menu="@menu/bottom_nav_menu" />
        </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:contentDescription="@string/app_name"
            android:src="@drawable/ic_android_black_24dp"
            app:layout_anchor="@id/bottom_app_bar" />
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
    
</LinearLayout>

解决方案 #

通过调整BottomAppBar的fabCradleMargin属性即可解决，无需使用embed模式：

修改后的核心代码 #

在BottomAppBar标签中添加app:fabCradleMargin="0dp"，同时保持默认的锚定模式（无需显式设置fabAnchorMode）：

<com.google.android.material.bottomappbar.BottomAppBar
    android:layout_gravity="bottom"
    android:backgroundTint="#ffff00"
    android:id="@+id/bottom_app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fabCradleMargin="0dp"> <!-- 新增此属性消除间隙 -->
    
    <!-- 内部的BottomNavigationView代码保持不变 -->
</com.google.android.material.bottomappbar.BottomAppBar>

原理说明 #

• app:fabCradleMargin：控制FAB与BottomAppBar凹槽边缘的间距，默认值不为0，设置为0dp即可消除两者间的间隙。
• 保持默认的fabAnchorMode="default"（无需显式声明）：此模式下FAB会悬浮在BottomAppBar上方，不会像embed模式那样嵌入Bar内部导致位置下移。
• 原BottomNavigationView的android:layout_marginEnd="16dp"可保留，用于平衡BottomAppBar凹槽占用的左侧空间，确保导航菜单居中显示。

内容的提问来源于stack exchange，提问作者Cheok Yan Cheng