Android Studio Flamingo中移除BottomNavigationView图标背景并设置选中文字为白色

跟着教程从零搭建BottomNavigationView，但因Android Studio版本或依赖差异，实际效果与预期不符：图标带有白色背景，选中项文字未变为白色。附上效果截图及相关代码，目标是实现移除图标白色背景、选中时文字变为白色的效果。

当前效果：
目标效果：

相关代码如下：

activity_main.xml #

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity">
    
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/settingBg"
        app:menu="@menu/navigation_items"
        app:itemRippleColor="@color/white"
        app:itemIconTint="@color/icon_color"/>

</RelativeLayout>

res/color/icon_color.xml #

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white" android:state_checked="true"/>
    <item android:color="@color/black" android:state_checked="false"/>
</selector>

navigation_items.xml #

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:title="Drive"
        android:id="@+id/navDrive"
        android:icon="@drawable/baseline_drive_eta_24"
        />
    <item
        android:title="LIGHT"
        android:id="@+id/navLight"
        android:icon="@drawable/baseline_flashlight_on_24"
        />
    <item
        android:title="DASH"
        android:id="@+id/navDash"
        android:icon="@drawable/baseline_dashboard_customize_24"
        />
    <item
        android:title="Settings"
        android:id="@+id/navSettings"
        android:icon="@drawable/baseline_settings_24"
        />
</menu>

res/themes/theme.xml（原文件名拼写错误，应为theme.xml） #

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.BottomNavigationBar" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your light theme here. -->
        <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
    </style>

    <style name="Theme.BottomNavigationBar" parent="Base.Theme.BottomNavigationBar" />
</resources>

res/themes/theme.xml (night) #

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.BottomNavigationBar" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your dark theme here. -->
        <!-- <item name="colorPrimary">@color/my_dark_primary</item> -->
    </style>
</resources>

1. 移除图标白色背景 #

Material3主题下，BottomNavigationView默认给选中项图标添加了背景高亮，直接通过app:itemBackground="@null"属性移除该背景。

2. 实现选中项文字变白 #

当前仅设置了图标颜色选择器，需添加app:itemTextColor属性关联同一个颜色选择器，让文字跟随选中状态变色。

修改后的activity_main.xml #

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity">
    
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/settingBg"
        app:menu="@menu/navigation_items"
        app:itemRippleColor="@color/white"
        app:itemIconTint="@color/icon_color"
        app:itemTextColor="@color/icon_color" <!-- 新增：绑定文字颜色选择器 -->
        app:itemBackground="@null" /> <!-- 新增：移除图标背景 -->

</RelativeLayout>

额外注意事项 #

• 检查图标资源：确保@drawable下的图标是透明背景的矢量图或PNG图，避免图标自带白色背景。
• 修正主题文件名：将原thems.xml改为theme.xml，避免系统识别异常。

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