如何为Android底部导航栏图标与文字设置不同颜色

嘿，我来帮你搞定底部导航栏选中项的颜色配置问题！针对你说的默认选中Home、切换时更新选中颜色的需求，我整理了几种简单靠谱的实现方式，你可以按需选择：

方法1：XML静态配置（推荐，最省心） #

这种方式不需要写Java/Kotlin代码，纯XML就能搞定，适合固定颜色的场景。

步骤1：创建颜色选择器 #

先在res/color目录下新建一个颜色选择器文件（比如bottom_nav_color_selector.xml），用来定义选中和未选中状态的颜色：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 选中状态的颜色，换成你想要的颜色值 -->
    <item android:color="#FF6200EE" android:state_checked="true"/>
    <!-- 未选中状态的颜色 -->
    <item android:color="#8A8A8A" android:state_checked="false"/>
</selector>

步骤2：配置底部导航菜单 #

在res/menu目录的底部导航菜单文件（比如bottom_nav_menu.xml）里，给默认选中的Home项加上android:checked="true"：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_home"
        android:title="@string/home"
        android:checked="true"/> <!-- 默认选中Home -->

    <item
        android:id="@+id/reminders"
        android:icon="@drawable/ic_reminders"
        android:title="@string/reminders"/>

    <item
        android:id="@+id/settings"
        android:icon="@drawable/ic_settings"
        android:title="@string/settings"/>
</menu>

步骤3：绑定到BottomNavigationView #

在你的Activity布局文件里，给BottomNavigationView设置app:itemIconTint和app:itemTextColor，指向刚才创建的颜色选择器：

<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"
    app:menu="@menu/bottom_nav_menu"
    app:itemIconTint="@color/bottom_nav_color_selector"
    app:itemTextColor="@color/bottom_nav_color_selector"/>

这样打开应用时Home会默认选中且颜色生效，切换其他标签时颜色会自动切换~

方法2：代码动态设置（适合需要动态修改颜色的场景） #

如果你需要在运行时根据某些条件改变选中颜色，用代码设置更灵活：

步骤1：还是先准备颜色选择器 #

和方法1一样，先创建好bottom_nav_color_selector.xml。

步骤2：在Activity里配置 #

在你的MainActivity（或者托管BottomNavigationView的Activity）里，获取控件并设置颜色：

// Kotlin示例
val bottomNav = findViewById<BottomNavigationView>(R.id.bottom_navigation)
// 获取颜色选择器
val colorStateList = ContextCompat.getColorStateList(this, R.color.bottom_nav_color_selector)
// 设置图标和文字颜色
bottomNav.itemIconTintList = colorStateList
bottomNav.itemTextColor = colorStateList
// 默认选中Home
bottomNav.selectedItemId = R.id.home

// Java示例
BottomNavigationView bottomNav = findViewById(R.id.bottom_navigation);
ColorStateList colorStateList = ContextCompat.getColorStateList(this, R.color.bottom_nav_color_selector);
bottomNav.setItemIconTintList(colorStateList);
bottomNav.setItemTextColor(colorStateList);
// 默认选中Home
bottomNav.setSelectedItemId(R.id.home);

方法3：自定义全局样式（适合统一应用内所有BottomNavigationView的风格） #

如果你的应用里有多个底部导航栏，想统一风格，可以在res/values/styles.xml里定义样式：

<style name="CustomBottomNavStyle" parent="Widget.MaterialComponents.BottomNavigationView">
    <item name="itemIconTint">@color/bottom_nav_color_selector</item>
    <item name="itemTextColor">@color/bottom_nav_color_selector</item>
    <!-- 还可以设置其他属性，比如文字大小、背景色等 -->
    <item name="itemTextAppearanceActive">@style/BottomNavTextActive</item>
</style>

<style name="BottomNavTextActive" parent="TextAppearance.MaterialComponents.Caption">
    <item name="android:textSize">12sp</item>
    <item name="android:textStyle">bold</item>
</style>

然后在布局里应用这个样式：

<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"
    app:menu="@menu/bottom_nav_menu"
    style="@style/CustomBottomNavStyle"/>

注意事项 #

• 确保你使用的是Material Components库的BottomNavigationView，因为旧的AppCompat版本可能不支持这些属性。如果还没引入，记得在build.gradle里添加依赖：

implementation 'com.google.android.material:material:1.9.0'

• 如果你用的是矢量图标，确保图标本身是支持着色的（比如用android:tint或者在XML里设置app:tint）。

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