Material You(M3)底部导航栏激活与未激活状态图标切换实现问题

方案实现逻辑 #

不需要额外编写业务代码，仅通过XML配置即可完成效果，核心逻辑如下：

• 你需要准备同一图标的轮廓版、填充版两份矢量图资源，推荐使用官方Material Icons对应风格的资源，避免显示比例不协调。
• 不需要直接在menu资源中关联两个图标，而是通过「状态选择器（StateListDrawable）」封装两个图标，再将状态选择器作为menu项的图标资源即可。

具体操作步骤 #

1. 在res/drawable目录下创建对应导航项的状态选择器文件，例如下单首页导航的选择器ic_home_nav.xml，配置内容如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 选中状态对应填充图标 -->
    <item android:drawable="@drawable/ic_home_filled" android:state_checked="true" />
    <!-- 未选中默认状态对应轮廓图标 -->
    <item android:drawable="@drawable/ic_home_outline" />
</selector>

2. 在底部导航对应的menu资源文件中，将对应菜单项的android:icon属性设置为上面创建的状态选择器即可，示例如下：

<item
    android:id="@+id/navigation_home"
    android:icon="@drawable/ic_home_nav"
    android:title="@string/title_home" />

补充说明 #

• 只要你使用的是官方Material Components库的BottomNavigationView控件，无需额外写Java/Kotlin代码，控件本身会自动处理选中状态切换，状态选择器会自动匹配对应状态的图标。
• 该配置完全兼容Jetpack Navigation组件绑定底部导航的场景，不需要额外适配。
• 如果你使用的是1.6版本以上的Material Components库，也可以选择单矢量图方案：通过控制矢量图路径的填充属性状态实现切换，不需要准备两份图标，但对矢量图的制作规范要求更高，新手更推荐上述双图标+状态选择器的方案，兼容性更好、不易出问题。

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