21

My question is very simple, how to add a notification value right of the item on NavigationView for Material Design Drawer like that ?

enter image description here

Is there a property in the menu items for defining the drawer?

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

    <group
        android:checkableBehavior="single">

        <item
            android:id="@+id/drawer_home"
            android:checked="true"
            android:icon="@drawable/ic_home_black_24dp"
            android:title="@string/home"/>

        <item
            android:id="@+id/drawer_favourite"
            android:icon="@drawable/ic_favorite_black_24dp"
            android:title="@string/favourite"/>
        ...

        <item
            android:id="@+id/drawer_settings"
            android:icon="@drawable/ic_settings_black_24dp"
            android:title="@string/settings"/>

    </group>
</menu>
lopez.mikhael
  • 9,943
  • 19
  • 67
  • 110
  • 1
    for that you have to make your own `listview` inside navigation view.Because `NavigationView` doens't allow much flexibility. – Moinkhan Jun 25 '15 at 12:37
  • 1
    @Moinkhan Exactly my question is whether the View navigation component to at least this flexibility. Good practice grow to use this component, so ... – lopez.mikhael Jun 25 '15 at 12:41
  • @Moinkhan Additionally, ListView is now replaced by RecyclerView. – lopez.mikhael Jun 25 '15 at 12:43
  • 1
    Oh yeah.. and may be they improved navigation view in future release. – Moinkhan Jun 25 '15 at 12:47
  • you can work with a ListView or a recycler view inflating a custom row layout with the notification count view hidden for every row and in getView() or in onBindViewHolder() you can set the count and make the count view visible – chiragjn Jun 25 '15 at 12:48
  • @Moinkhan Yes, I also think it will be !! :) – lopez.mikhael Jun 25 '15 at 12:48
  • Thank you @chiragjn it's the same proposal that Moinkhan. There is thus no property in the menu? – lopez.mikhael Jun 25 '15 at 12:53
  • There are no attributes to do what you want directly. You could have done it easily if the actionLayout for a MenuItem would be considered, but from my quick tests that doesn't happen. The only way to do it and have the default NavigationView would be to include the "notification" in the title of the MenuItem(this however would be hacky(hard to do right) as hell and not recommended at all). In the end as others pointed out use a ListView, RecyclerView etc. I don't know if you looked but maybe you could find some already made libraries(I've seen some for this navigation). – user Jun 29 '15 at 11:14
  • Thank you for your reply @Luksprog . But yes, it's very simple to do with a RecyclerView or other ListView. But the idea was really to exploit the news component of Android Material Design .. I really hope that they will improve in the next release. – lopez.mikhael Jun 29 '15 at 11:48
  • You can check this answer for similar question: http://stackoverflow.com/questions/30560663/navigationview-menu-items-with-counter-on-the-right/33607630#33607630 – Alex Vasilkov Nov 09 '15 at 11:01

5 Answers5

15

This is possible with NavigationView from Version 23 of AppCompat-V7 using action views. 1. Create a layout for the counter e.g. nav_drawer_counter.xml:

<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:textColor="@color/colorPrimary"/>
  1. Add a reference to it from each item you'd like to show a counter value for in your menu/nav_drawer.xml (ensure you use the app namespace):

    <item 
        ...
        app:actionLayout="@layout/activity_main_nav_drawer_menu_counter"
        />
    
  2. Add a method to set a value to the TextView e.g:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    ....
    setNavItemCount(R.id.nav_notifications, 10);
    }
    
    
    private void setNavItemCount(@IdRes int itemId, int count) {
    TextView view = (TextView) navigationView.getMenu().findItem(itemId).getActionView();
    view.setText(count > 0 ? String.valueOf(count) : null);
    }
    
Evans Mauta II
  • 208
  • 3
  • 9
5

Oh Yes... You can change that counter value.

From the images given by you it looks live you are using Rudson Lima's Material Design Navigation Drawer

In its library there is a function public void setNewCounterValue(int drawerItemPosition, int counterValue); inside the class NavigationLiveo.

Hope you will use its object properly to call this function.

Best of Luck... :-)

Azim Ansari
  • 1,378
  • 11
  • 20
  • You have the best answer so far on this issue, I give you so the bounty. Nevertheless, I think now it is simply not possible without using a library... I hope that Google will update its NavigationView component to enable it natively. – lopez.mikhael Jul 06 '15 at 06:32
  • Thank you... And you are correct its still not available in NavigationView support library. Hope Google will give it soon to all. – Azim Ansari Jul 06 '15 at 06:54
1

You should check exactly how it was done on the original project's github:

https://github.com/rudsonlive/NavigationDrawer-MaterialDesign/ https://play.google.com/store/apps/details?id=br.liveo.navigationliveo

Basically you create a custom view for the ListView's lines and update them accordingly.

thiagolr
  • 6,909
  • 6
  • 44
  • 64
0

From some research, I have found that, no, there is no real way to add the notifications to the drawer. However, the example shown in the Creating a Navigation Drawer tutorial at Developers shows how to force a redraw every time it is opened (and also how to implement it with the Menu XML sheets). It does not go into detail about how to add the notifications, but there are other sources for that.

This tutorial is another "how to make a navigation drawer" tutorial with the bonus of exact details on how the adapted the ListView adapters to suit a notification button. I think this is more than likely what you are looking for.

Good luck! I hope that helps.

Rose R.
  • 141
  • 11
0

You could use a library for this. Try MaterialNavigationDrawer or MaterialDrawer