Android如何为导航抽屉菜单项图标添加通知角标？

当前通过setActionView实现的角标会显示在菜单文本右侧，要实现角标在图标右上角的效果，可采用以下两种方案：

方案一：使用Material Design的BadgeDrawable（推荐） #

利用官方提供的BadgeDrawable组件直接绑定到菜单项图标，符合Material Design规范，无需自定义布局。

实现步骤： #

1. 确保项目依赖Material组件（模块级build.gradle）：

implementation 'com.google.android.material:material:1.9.0' // 可替换为最新版本

2. 角标绑定代码：

private void setIconBadge(int menuItemResourceId, int count) {
    NavigationView navigationView = findViewById(R.id.nav_view);
    MenuItem menuItem = navigationView.getMenu().findItem(menuItemResourceId);
    if (menuItem == null) return;

    // 清除之前设置的ActionView（如果存在）
    menuItem.setActionView(null);

    Drawable icon = menuItem.getIcon();
    if (icon == null) return;

    // 创建并配置角标
    BadgeDrawable badge = BadgeDrawable.create(this);
    badge.setNumber(count);
    badge.setVisible(count > 0);
    badge.setBackgroundColor(getResources().getColor(R.color.design_default_color_error));
    badge.setBadgeTextColor(getResources().getColor(android.R.color.white));

    // 将角标绑定到菜单项图标
    BadgeUtils.attachBadgeDrawable(badge, menuItem, navigationView);
}

方案二：自定义菜单item布局 #

通过自定义布局完全控制图标、文本和角标的位置，适合需要高度自定义样式的场景。

实现步骤： #

1. 创建自定义菜单item布局nav_menu_item_with_badge.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingVertical="16dp"
    android:paddingHorizontal="16dp">

    <ImageView
        android:id="@+id/nav_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_centerVertical="true"/>

    <TextView
        android:id="@+id/nav_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/nav_icon"
        android:layout_marginStart="16dp"
        android:layout_centerVertical="true"
        android:textSize="16sp"/>

    <TextView
        android:id="@+id/nav_badge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/nav_icon"
        android:layout_alignTop="@id/nav_icon"
        android:layout_marginStart="-8dp"
        android:background="@drawable/badge_oval_bg"
        android:textColor="@android:color/white"
        android:textSize="12sp"
        android:paddingHorizontal="6dp"
        android:paddingVertical="2dp"
        android:visibility="gone"/>
</RelativeLayout>

2. 创建角标背景badge_oval_bg.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/design_default_color_error"/>
    <size android:width="18dp" android:height="18dp"/>
</shape>

3. 角标更新代码：

private void setCustomMenuItemBadge(int menuItemResourceId, int count) {
    NavigationView navigationView = findViewById(R.id.nav_view);
    MenuItem menuItem = navigationView.getMenu().findItem(menuItemResourceId);
    if (menuItem == null) return;

    // 设置自定义布局为菜单项的ActionView
    menuItem.setActionView(R.layout.nav_menu_item_with_badge);
    View actionView = menuItem.getActionView();
    if (actionView == null) return;

    // 同步原菜单项的图标和文本
    ImageView iconView = actionView.findViewById(R.id.nav_icon);
    TextView titleView = actionView.findViewById(R.id.nav_title);
    TextView badgeView = actionView.findViewById(R.id.nav_badge);

    iconView.setImageDrawable(menuItem.getIcon());
    titleView.setText(menuItem.getTitle());

    // 更新角标显示状态
    if (count > 0) {
        badgeView.setText(String.valueOf(count));
        badgeView.setVisibility(View.VISIBLE);
    } else {
        badgeView.setVisibility(View.GONE);
    }
}

注意事项： #

• 方案一无需自定义布局，维护成本低，优先推荐；
• 方案二可自由调整角标的大小、位置和样式，适合特殊需求场景。

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