Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

NavigationView menu items with counter on the right

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:

enter image description here

Or like in the GMail app.

like image 508
chrisonline Avatar asked May 31 '15 17:05

chrisonline


1 Answers

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.

  1. 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.

like image 93
Alex Vasilkov Avatar answered Oct 18 '22 02:10

Alex Vasilkov