How to add badge on item in NavigationView

Question

I just start to use new component android.support.design.widget.NavigationView , before this for navigation drawer I use standard listview but right now I start using new component navigation View and having problem to implement badge on item. Does anybody now how to resolve this ?

Hi, please be more specific. Do you have any code that shows the problem you're having? — killthrush, Aug 09 '15 at 18:47

score 16 · Answer 1 · answered Mar 04 '16 at 10:39

This can be done with following steps

1. Adding "actionViewClass" attribute tot the navigation drawer menu

After creating the ‘Helloworld’ app with Navigation Drawer, look for the file ‘activity_main_drawer.xml’ (i.e. youractivityname_drawer.xml)under the folder “Menu” in the project hierarchy view. Identify the group item and add “app:actionViewClass=android.widget.TextView” as given below:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto">

<group android:checkableBehavior="single">
    <item
        android:id="@+id/nav_camera"
        android:icon="@drawable/ic_menu_camera"
        android:title="Import" />
    <item
        android:id="@+id/nav_gallery"
        app:actionViewClass="android.widget.TextView"
        android:icon="@drawable/ic_menu_gallery"
        android:title="Gallery" />
    <item
        android:id="@+id/nav_slideshow"
        app:actionViewClass="android.widget.TextView"
        android:icon="@drawable/ic_menu_slideshow"
        android:title="Slideshow" />
    <item
        android:id="@+id/nav_manage"
        android:icon="@drawable/ic_menu_manage"
        android:title="Tools" />
</group>

2. Declare the Navigation Drawer menu item and initialize the item with the badge value.

In your main Activity, declare the menu item of the Navigation Drawer as given below

//Create these objects above OnCreate()of your main activity
TextView slideshow,gallery;

//These lines should be added in the OnCreate() of your main activity
gallery=(TextView) MenuItemCompat.getActionView(navigationView.getMenu().findItem(R.id.nav_gallery));
slideshow=(TextView) MenuItemCompat.getActionView(navigationView.getMenu().findItem(R.id.nav_slideshow));

//This method will initialize the count value
initializeCountDrawer();

initializeCountDrawer() can be called where ever it’s required. It can also be used to update the count or badge value in the navigation drawer menu item.

private void initializeCountDrawer() {
    //Gravity property aligns the text
    gallery.setGravity(Gravity.CENTER_VERTICAL);
    gallery.setTypeface(null, Typeface.BOLD);
    gallery.setTextColor(getResources().getColor(R.color.colorAccent));
    gallery.setText("99+");
    slideshow.setGravity(Gravity.CENTER_VERTICAL);
    slideshow.setTypeface(null,Typeface.BOLD);                
    slideshow.setTextColor(getResources().getColor(R.color.colorAccent));

    //count is added     
    slideshow.setText("7");
}

On adding the above method, run the app. Et voila !! A simple badge count will be displayed on the ‘gallery’ and ‘slideshow’ menu item of the Navigation Drawer.

Dynamic badge values

If you need the dynamic badge values, like updating the value from an API call or SQLite database, create a reusable method and update it on the OnStart() or OnResume() method of your Activity.

Complete source code can be found here

Nevermind. I was doing navigationView.getMenu().clear(); to reset the menus. Every time I do that I have to call messagesTextView = (TextView) MenuItemCompat.getActionView(navigationView.getMenu().findItem(R.id.nav_messages)); to reset everything up so then it works. — Etienne Lawlor, Jul 23 '16 at 20:22
Simply copied from https://android.jlelse.eu/android-adding-badge-or-count-to-the-navigation-drawer-84c93af1f4d9 No credit for him? — Ken Ratanachai S., Mar 08 '18 at 23:20

score 2 · Answer 2 · answered Aug 12 '15 at 14:50

2

You still have to use ListView to set a layout.

For using the NavigationView properties, my workaround was passing a SpannableString with a different background as new title of the MenuItem.

I known is not the best solution but it works as a counter quite well. Something like this:

NavigationView navigation = (NavigationView)findViewById(R.id.navigation);
Menu menuNav = navigation.getMenu();
MenuItem element = menuNav.findItem(R.id.item5);
String before = element.getTitle().toString();

String counter = Integer.toString(5);
String s = before + "   "+counter+" ";
SpannableString sColored = new SpannableString( s );

sColored.setSpan(new BackgroundColorSpan( Color.GRAY ), s.length()-3, s.length(), 0);
sColored.setSpan(new ForegroundColorSpan( Color.WHITE ), s.length()-3, s.length(), 0);


element.setTitle(sColored);

answered Aug 12 '15 at 14:50

marco

3,193
4
28
51

Thanks, but I already know for this solution, but if I use listview I lose some of great NavigationView funcionalities. – eJoe Aug 12 '15 at 14:58
This solution dont use the Listview :) – marco Aug 12 '15 at 15:01
@Marco how can I change this to use a circle as the background? I'm trying to replace BackgroundColorSpan to RoundedBackgroundSpan, but it isn't on center – Daniel Nazareth Nov 18 '15 at 21:28
take a look to the accepted answer to this [question](http://stackoverflow.com/questions/24701762/android-spannablecontent-with-rounded-corners), it works very well :) – marco Nov 18 '15 at 22:04

score 0 · Answer 3 · answered Apr 05 '22 at 09:05

I you want to add an ImageView as a badge;

1- add actionView as below

<item
  android:id="@+id/nav_my_menu"
  android:icon="@drawable/my_nav_icon"
  android:title="@string/my_name"
  app:actionViewClass="android.widget.ImageView" />

2 - in your activity class

val yourMenu = binding.navView.menu.findItem(R.id.nav_my_menu).actionView
(yourMenu as ImageView).setImageResource(R.drawable.my_drawable)

How to add badge on item in NavigationView

3 Answers3