You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在运行时修改Bottom Navigation的菜单项图标?

实现BottomNavigationView通知项图标动态变色(Java)

前提确认

先确保你的底部导航菜单资源(res/menu/bottom_nav.xml)中,Notification项的id为@+id/nav_notification,菜单结构示例:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/nav_home" android:title="Home" android:icon="@drawable/ic_home"/>
    <item android:id="@+id/nav_search" android:title="Search" android:icon="@drawable/ic_search"/>
    <item android:id="@+id/nav_notification" android:title="Notification" android:icon="@drawable/ic_notification"/>
    <item android:id="@+id/nav_profile" android:title="Profile" android:icon="@drawable/ic_profile"/>
</menu>

方法一:直接替换图标(简单直观)

准备两套图标资源:正常状态的默认图标,以及未读状态的红色图标(比如ic_notification.xml和ic_notification_red.xml),根据未读状态切换:

// 获取BottomNavigationView实例
BottomNavigationView bottomNav = findViewById(R.id.bottomNavigationView);
// 定位到Notification菜单项
MenuItem notificationItem = bottomNav.getMenu().findItem(R.id.nav_notification);

// 自定义逻辑:判断是否存在未读通知
boolean hasUnread = checkUnreadNotifications();

if (hasUnread) {
    // 设置红色图标
    notificationItem.setIcon(R.drawable.ic_notification_red);
} else {
    // 恢复默认图标
    notificationItem.setIcon(R.drawable.ic_notification);
}

方法二:动态给图标着色(无需额外图标)

借助DrawableCompat直接修改图标的颜色,无需准备多份图标资源,更灵活:

BottomNavigationView bottomNav = findViewById(R.id.bottomNavigationView);
MenuItem notificationItem = bottomNav.getMenu().findItem(R.id.nav_notification);
boolean hasUnread = checkUnreadNotifications();

if (hasUnread) {
    // 给图标着色为红色
    Drawable icon = notificationItem.getIcon();
    icon = DrawableCompat.wrap(icon); // 处理Drawable的mutable,避免影响其他菜单项
    DrawableCompat.setTint(icon, ContextCompat.getColor(this, R.color.red));
    notificationItem.setIcon(icon);
} else {
    // 恢复默认颜色(替换为你的主题默认图标颜色)
    Drawable icon = notificationItem.getIcon();
    icon = DrawableCompat.wrap(icon);
    DrawableCompat.setTint(icon, ContextCompat.getColor(this, R.color.bottom_nav_default));
    notificationItem.setIcon(icon);
}

补充说明

  • 当未读状态发生变化时(比如收到新通知、用户查看通知后),直接调用上述代码即可更新图标状态
  • 如果使用着色方法,确保R.color.red和R.color.bottom_nav_default是你项目中定义的颜色资源

内容的提问来源于stack exchange,提问作者max256

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.31 01:39:39