To place a red dot badge on NavigationView's MenuItem, this is what I have performed.

<!-- res/layout/badged_settings_menu.xml -->
<FrameLayout xmlns:android=";
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <!-- This TextView will serve as the badge -->
    <TextView
        android:id="@+id/menu_badge"
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:background="@drawable/badge_background"
        android:gravity="center"
        android:visibility="visible" />
</FrameLayout>

<!-- res/drawable/badge_background.xml -->
<shape xmlns:android=";
    android:shape="oval">
    <solid android:color="#F44336" /> <!-- Red color -->
</shape>

private void updateSettingsMenuBadge() {
    if (navigationView != null) {
        Menu menu = navigationView.getMenu();

        MenuItem settingsMenuItem = menu.findItem(R.id.nav_settings);

        // Inflate the custom action view if not already set
        if (settingsMenuItem.getActionView() == null) {
            settingsMenuItem.setActionView(R.layout.badged_settings_menu);
        }
    }
}

This is how it looks like.

However, what I wish to achieve, is to place the red dot near the Settings icon (gear icon)

May I know, how I can achieve so?

Thanks.

To place a red dot badge on NavigationView's MenuItem, this is what I have performed.

<!-- res/layout/badged_settings_menu.xml -->
<FrameLayout xmlns:android="http://schemas.android/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <!-- This TextView will serve as the badge -->
    <TextView
        android:id="@+id/menu_badge"
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:background="@drawable/badge_background"
        android:gravity="center"
        android:visibility="visible" />
</FrameLayout>

<!-- res/drawable/badge_background.xml -->
<shape xmlns:android="http://schemas.android/apk/res/android"
    android:shape="oval">
    <solid android:color="#F44336" /> <!-- Red color -->
</shape>

private void updateSettingsMenuBadge() {
    if (navigationView != null) {
        Menu menu = navigationView.getMenu();

        MenuItem settingsMenuItem = menu.findItem(R.id.nav_settings);

        // Inflate the custom action view if not already set
        if (settingsMenuItem.getActionView() == null) {
            settingsMenuItem.setActionView(R.layout.badged_settings_menu);
        }
    }
}

This is how it looks like.

However, what I wish to achieve, is to place the red dot near the Settings icon (gear icon)

May I know, how I can achieve so?

Thanks.

• java
• android

• Those items are actually TextViews and the icons are compound drawables. The simplest thing would probably be to wrap the drawable with an overlay and re-set the item's icon to toggle it, but those drawables are tinted internally, so the badge would end up the same color as the icon. The next simplest is probably to create an overlay for the whole TextView. Though it is a bit hacky because there's no explicit access, it's pretty easy, if you wanna give it a try: drive.google/…. Looks like: i.sstatic/MkezwSpB.png. – Mike M. Commented Apr 2 at 4:07

1 Answer 1

1. Updated XML Layout for Badge (res/layout/badged_settings_menu.xml)

Make sure the red dot (badge) is properly positioned relative to the settings icon.

<FrameLayout xmlns:android="http://schemas.android/apk/res/android"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content">
      <!-- Settings Icon (Placeholder for your actual icon if needed) -->
     <ImageView
         android:id="@+id/menu_icon"
         android:layout_width="24dp"
         android:layout_height="24dp"
         android:src="@drawable/ic_settings" />
      <!-- Red Dot Badge -->
     <TextView
         android:id="@+id/menu_badge"
         android:layout_width="10dp"
         android:layout_height="10dp"
         android:layout_gravity="end|top"
         android:layout_marginEnd="2dp"
         android:layout_marginTop="2dp"
         android:background="@drawable/badge_background"
         android:visibility="gone" />
 </FrameLayout>

2. Badge Background (res/drawable/badge_background.xml)

This ensures the red dot appears as expected.

<shape xmlns:android="http://schemas.android/apk/res/android"
     android:shape="oval">
     <solid android:color="#F44336" />
 <!-- Red color -->
     <size android:width="10dp" android:height="10dp"/>
     <corners android:radius="5dp"/>
 </shape>

3. Java/Kotlin Code for Badge Handling

Modify your method to make the badge visible when needed.

private void updateSettingsMenuBadge(boolean showBadge) {
     if (navigationView != null) {
         Menu menu = navigationView.getMenu();
         MenuItem settingsMenuItem = menu.findItem(R.id.nav_settings);
          // Inflate custom action view if not set
         if (settingsMenuItem.getActionView() == null) {
             settingsMenuItem.setActionView(R.layout.badged_settings_menu);
         }
          View actionView = settingsMenuItem.getActionView();
         TextView badge = actionView.findViewById(R.id.menu_badge);
          if (showBadge) {
             badge.setVisibility(View.VISIBLE);
         } else {
             badge.setVisibility(View.GONE);
         }
          actionView.setOnClickListener(v -> navigationView.performItemAction(settingsMenuItem, 0));
     }
 }

private fun updateSettingsMenuBadge(showBadge: Boolean) {
     navigationView?.menu?.findItem(R.id.nav_settings)?.let { settingsMenuItem ->
         if (settingsMenuItem.actionView == null) {
             settingsMenuItem.actionView = LayoutInflater.from(this).inflate(R.layout.badged_settings_menu, null)
         }
          val actionView = settingsMenuItem.actionView
         val badge = actionView.findViewById<TextView>(R.id.menu_badge)
          badge.visibility = if (showBadge) View.VISIBLE else View.GONE
          actionView.setOnClickListener {             navigationView?.performItemAction(settingsMenuItem, 0)
         }
     }
 }

4. Call updateSettingsMenuBadge(true) When Needed

Use it when you want to show or hide the red dot:

updateSettingsMenuBadge(true);  // Show badge
updateSettingsMenuBadge(false); // Hide badge