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 ?

Bedelia

Hi, please be more specific. Do you have any code that shows the problem you're having? – Jacintojack

I need to display a count to the right of the menu item? – Bedelia

Answer 1

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

Aldrich

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. – Puffy

Simply copied from android.jlelse.eu/… No credit for him? – Towrey

Answer 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);

Brasilin

Thanks, but I already know for this solution, but if I use listview I lose some of great NavigationView funcionalities. – Bedelia

This solution dont use the Listview :) – Brasilin

@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 – Antitoxic

take a look to the accepted answer to this question, it works very well :) – Brasilin

Answer 3

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)

Amoritta