Android界面Toolbar及底部导航栏被系统栏遮挡问题求解

问题核心原因 #

1. 布局层级不合理：底部导航栏放在Fragment布局中，而Fragment的容器占满整个Activity高度，导致底部导航直接顶到系统导航栏下方被遮挡；Toolbar没有适配状态栏高度，自然会被状态栏遮挡。
2. 硬编码固定尺寸：Activity的Fragment容器、Fragment内的卡片、底部导航等控件全部写死了固定dp值，不同手机屏幕尺寸、分辨率存在差异，硬编码尺寸必然会出现适配问题。
3. android:fitsSystemWindows 属性配置错误：该属性需要配置在根布局以及需要适配系统栏的直接父布局上，且需要配合主题配置才能生效，单独给控件设置不会起作用。

修复步骤 #

步骤1：调整Activity布局，统一管理公共导航控件 #

把底部导航移到Activity层级，Fragment容器约束在顶部和底部导航之间，移除所有硬编码的固定宽高：

<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true"
    tools:context=".HomeActivity">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragmentContainerView"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavbar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:navGraph="@navigation/nav_home_acitvity" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        app:itemIconTint="@drawable/bottom_nav_icon_color"
        app:itemTextColor="#00B8B4"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_nav" />

</androidx.constraintlayout.widget.ConstraintLayout>

步骤2：修改Fragment布局，移除冗余控件修正约束 #

删掉Fragment里的底部导航代码，修正所有硬编码宽度，给AppBarLayout添加适配状态栏的属性：

<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"
    tools:context="fragments.homeUi">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="?attr/actionBarTheme" />
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="230dp"
        android:layout_marginHorizontal="1dp"
        android:layout_marginTop="16dp"
        app:cardCornerRadius="10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/appBarLayout">

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPagerHome"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </androidx.cardview.widget.CardView>

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/home"
        android:layout_marginTop="24dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cardView" />

    <Button
        android:id="@+id/signOutButton"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_marginTop="24dp"
        android:text="@string/signout"
        android:textAllCaps="false"
        android:textColor="#736B3B"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView4" />

</androidx.constraintlayout.widget.ConstraintLayout>

步骤3：检查主题配置 #

找到你应用使用的主题文件（路径res/values/themes），添加以下配置保证系统栏适配生效：

<!-- 允许绘制系统栏背景 -->
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<!-- 设置状态栏颜色和Toolbar配套 -->
<item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
<!-- 如果需要状态栏文字显示为深色，再加下面这行 -->
<item name="android:windowLightStatusBar">true</item>

注意事项 #

不要在通用布局中写死固定宽高数值（比如409dp、867dp这类），不同设备的屏幕尺寸、显示密度差异很大，硬编码固定尺寸一定会出现布局错位、被遮挡的问题，优先用match_parent、wrap_content配合约束布局的0dp占比来做适配。

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