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 ?

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

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