BottomAppBar搭配BottomNavigationView和FloatingActionButton底部出现白条UI异常

问题根源 #

• 布局层级冗余：根ConstraintLayout内部额外嵌套了无意义的layout_constraint ConstraintLayout层和CoordinatorLayout，这两层都设置了@color/White背景，多余的白色区域就是这两层的背景导致
• 底部组件高度不匹配：BottomNavigationView设置了85dp固定高度+30dp顶部内边距，而BottomAppBar使用wrap_content高度，两者的高度差区域直接显示了父布局的白色背景
• 系统栏适配冲突：DrawerLayout开启了fitsSystemWindows="true"，但底部导航组件没有适配系统导航栏Insets，导致系统导航栏区域额外出现白色留白

修复方案 #

1. 移除冗余嵌套层级
   删除中间多余的layout_constraint ConstraintLayout层，直接将CoordinatorLayout作为根ConstraintLayout的子控件，同时删除CoordinatorLayout的白色背景配置：

<!-- 移除原来的layout_constraint层，直接在根ConstraintLayout下添加如下配置 -->
<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/layout_coordinator"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <!-- 原有的BottomAppBar、BottomNavigationView、FloatingActionButton代码保持不变 -->

</androidx.coordinatorlayout.widget.CoordinatorLayout>

2. 修正FrameLayout约束
   将home_fragment_container的底部约束修改为对齐CoordinatorLayout的顶部：

<FrameLayout
    android:id="@+id/home_fragment_container"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/header"
    app:layout_constraintBottom_toTopOf="@id/layout_coordinator"/>

3. 统一底部组件高度
   将BottomAppBar高度设置为和BottomNavigationView一致的85dp，避免高度差产生的留白：

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottom_app_bar"
    style="@style/Widget.MaterialComponents.BottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="85dp"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/lighter_gray"
    app:fabAlignmentMode="center"
    app:fabCradleMargin="7dp"
    app:fabCradleRoundedCornerRadius="7dp" />

4. 适配系统导航栏（可选）
   如果你的App开启了Edge to Edge显示，在Activity的onCreate中添加如下代码，让底部导航栏自动适配系统Insets：

ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.layout_coordinator)) { view, insets ->
    val navBarInsets = insets.getInsets(WindowInsetsCompat.Type.navigationBars())
    view.setPadding(0, 0, 0, navBarInsets.bottom)
    insets
}

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