如何去除BottomNavigationView中图标的背景颜色并在android studio flamigo中激活时将文本颜色设置为白色？

Question

刚刚开始使用一些教程从头开始创建底部导航视图，但我的导航似乎看起来有所不同，可能是因为 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/主题/thems.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/thems.xml（夜间）

<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>

我的底部导航视图如下所示

我想要的是删除图标的白色背景，并且如果文本处于活动状态或被选中，则将文本设置为白色，就像我在 youtube 上找到的本教程中一样。

Answer 1

对于那些可能想知道为什么会这样的人，我发现它实际上非常简单——这一切都归结为导航风格。您可以选择在 theme.xml 中自行自定义样式，也可以简单地利用 MaterialComponents 中的样式，如下所示

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/black"
        style="@style/Widget.MaterialComponents.BottomNavigationView.PrimarySurface"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/menu">