NavigationView menu items with counter on the right

Question

The new NavigationView in the new Design Support Library works really great.

They use "menu-items" to display the options.

But how can I display a counter to the right of the menu item?

Like in this picture:

Or like in the GMail app.

Answer 1

Starting from version 23 of appcompat-v7 NavigationView supports action views, so it is quite easy to implement counter yourself.

1. Create counter layout, i.e. menu_counter.xml:

   <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="wrap_content"     android:layout_height="match_parent"     android:gravity="center_vertical"     android:textAppearance="@style/TextAppearance.AppCompat.Body2" /> 

2. Reference it in your drawer menu xml, i.e. menu/drawer.xml:

   <item     ...     app:actionLayout="@layout/menu_counter" /> 

Note that you should use app namespace, don't try to use android.

Alternatively you can manually set action view with MenuItem.setActionView() method.

3. Find menu item and set counter:

   private void setMenuCounter(@IdRes int itemId, int count) {     TextView view = (TextView) navigationView.getMenu().findItem(itemId).getActionView();     view.setText(count > 0 ? String.valueOf(count) : null); } 

Note, that you will need to use MenuItemCompat if you have to support Android 2.x versions.