如何移除Android中BottomNavigationView的额外白色背景

我在开发Android项目时，已经在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/lt_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    android:fitsSystemWindows="true">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:clickable="false"
        app:fabAlignmentMode="center" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:clickable="false"
            app:menu="@menu/bottom_nav_menu" />
    </FrameLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/bottom_bar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

解决方案 #

核心问题在于BottomNavigationView的每个菜单项默认有独立背景，仅设置整个组件的android:background无法覆盖item级别的背景。解决方法如下：

1. 直接添加item背景属性
   给BottomNavigationView添加app:itemBackground="@android:color/transparent"，这个属性专门控制每个菜单项的背景，设置为透明即可消除白色区域。

2. 优化布局层级
   原布局中用FrameLayout包裹BottomNavigationView是多余的，可以直接将BottomNavigationView设置在CoordinatorLayout下，保留android:layout_gravity="bottom"即可，减少不必要的层级。

修改后的完整布局：

<?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/lt_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    android:fitsSystemWindows="true">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:clickable="false"
        app:fabAlignmentMode="center" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@android:color/transparent"
        android:clickable="false"
        app:itemBackground="@android:color/transparent"
        app:menu="@menu/bottom_nav_menu" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/bottom_bar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

3. 主题样式全局控制（可选）
   如果需要在整个应用中统一BottomNavigationView的item背景，可以在主题中添加自定义样式：

<style name="CustomBottomNavigationStyle" parent="Widget.MaterialComponents.BottomNavigationView">
    <item name="itemBackground">@android:color/transparent</item>
</style>

然后在布局中给BottomNavigationView设置style="@style/CustomBottomNavigationStyle"即可。

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