Android Studio中BottomAppBar与BottomNavigationView布局问题求助

一、修复BottomNavigationView未覆盖BottomAppBar的问题 #

调整布局代码里的BottomAppBar内边距和BottomNavigationView的布局属性即可解决，修改后的完整布局如下：

<?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:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- BottomAppBar with BottomNavigationView -->
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:padding="0dp"
        app:backgroundTint="#157177"
        app:hideOnScroll="true"
        app:fabCradleMargin="0dp"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        app:contentInsetRight="0dp"
        app:contentInsetEnd="0dp">

        <!-- BottomNavigationView -->
        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#157177"
            app:menu="@menu/nav_bar"/>

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

    <!-- Floating Action button -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:tint="#157177"
        android:clickable="true"
        app:fabSize="normal"
        app:layout_anchor="@id/bar"
        app:layout_anchorGravity="center_horizontal"
        app:srcCompat="@drawable/circle"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

关键修改点 #

• 给BottomAppBar添加android:padding="0dp"和app:contentInset*系列属性，移除控件默认的内边距
• 将BottomNavigationView的android:layout_height从wrap_content改为match_parent，让它填满BottomAppBar的高度
• 移除BottomNavigationView的android:layout_gravity="bottom"，避免不必要的布局偏移

二、修复未选中图标暗淡的问题 #

默认未选中图标使用主题次要色调，通过自定义颜色选择器可以灵活修改：

1. 创建颜色选择器文件 #

在res/drawable目录下新建bottom_nav_icon_tint.xml，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 选中状态的图标/文字颜色 -->
    <item android:color="#FFFFFF" android:state_checked="true"/>
    <!-- 未选中状态的图标/文字颜色，可根据需求调整 -->
    <item android:color="#E0FFFFFF" android:state_checked="false"/>
</selector>

2. 给BottomNavigationView应用颜色选择器 #

在布局的BottomNavigationView中添加以下属性：

app:itemIconTint="@drawable/bottom_nav_icon_tint"
app:itemTextColor="@drawable/bottom_nav_icon_tint" <!-- 菜单项有文字时添加 -->

修改后的BottomNavigationView代码片段：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#157177"
    app:itemIconTint="@drawable/bottom_nav_icon_tint"
    app:itemTextColor="@drawable/bottom_nav_icon_tint"
    app:menu="@menu/nav_bar"/>

你可以根据底部栏背景色，调整颜色选择器里的色值，确保未选中图标和背景有足够对比度。

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