使用CoordinatorLayout时BottomAppBar底部出现空白的原因及解决咨询

空白区域出现的原因 #

1. 初始空白：Android 10及以上的手势导航模式下，系统会自动为布局预留底部导航栏的内边距，而你的BottomAppBar默认未适配该系统Insets，导致底部出现空白。
2. 添加fitsSystemWindows="true"后空白变大：给CoordinatorLayout设置该属性时，它会将系统窗口的内边距（含顶部状态栏、底部导航栏间距）应用到自身，导致整个布局向上偏移，BottomAppBar随之移动，空白区域进一步扩大。

实现无空白布局的解决方案 #

要让BottomAppBar完全贴合底部手势栏，需让BottomAppBar自身处理系统Insets，而非给父布局CoordinatorLayout设置fitsSystemWindows。具体步骤如下：

1. 修改布局代码 #

给BottomAppBar添加android:fitsSystemWindows="true"属性，同时确保CoordinatorLayout不设置该属性。修改后的完整布局代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraint_layout_root_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <FrameLayout
            android:id="@+id/frame_layout_login_config"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_margin="16dp"
            android:background="@drawable/background"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraint_layout_login_config"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/frame_layout_login_config">

            <include
                android:id="@+id/layout_include_login_config_normal"
                layout="@layout/fragment_login_config_normal" />

            <include
                android:id="@+id/layout_include_login_config_loading"
                layout="@layout/fragment_login_config_loading"
                android:visibility="gone" />

            <include
                android:id="@+id/layout_include_login_config_success"
                layout="@layout/fragment_login_config_success"
                android:visibility="gone" />

            <include
                android:id="@+id/layout_include_login_config_failure"
                layout="@layout/fragment_login_config_failure"
                android:visibility="gone" />
        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:layout_behavior="com.google.android.material.bottomappbar.BottomAppBar$Behavior"
        android:layout_gravity="bottom">

    </com.google.android.material.bottomappbar.BottomAppBar>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

2. 配置主题（关键可选步骤） #

确保App主题设置透明导航栏，让BottomAppBar能延伸到手势栏下方。在styles.xml或themes.xml中添加：

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- 其他主题属性 -->
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <!-- Android 11+允许布局延伸到导航栏下方 -->
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style>

3. 代码层面手动处理Insets（若布局修改后仍有问题） #

如果上述操作后空白仍存在，可在Activity中手动处理Insets：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.your_layout)
    
    val bottomAppBar = findViewById<BottomAppBar>(R.id.bottom_app_bar)
    ViewCompat.setOnApplyWindowInsetsListener(bottomAppBar) { view, insets ->
        val systemInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
        view.setPadding(0, 0, 0, systemInsets.bottom)
        insets
    }
}

效果说明 #

• 初始问题状态：BottomAppBar与底部手势栏之间存在明显空白
• 添加CoordinatorLayout的fitsSystemWindows="true"后：整个布局上移，BottomAppBar与手势栏的空白进一步扩大

通过上述修改，BottomAppBar会自动适配系统手势栏的Insets，完全贴合底部，消除空白。

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