How to set badge in NavigationView?

Question

I use NavigationDrawer from desin lib

compile 'com.android.support:design:24.0.0'

There is XML

....

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main_second"
    app:menu="@menu/activity_third_drawer" />

....

There is point where i am setting menu

app:menu="@menu/activity_third_drawer"

There is XML of menu

<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:android="http://schemas.android.com/apk/res/android">

<group android:checkableBehavior="single">
    <item
        android:id="@+id/nav_inbox"
        android:icon="@drawable/ic_mail_outline_white"
        android:title="@string/inbox" />
    <item
        android:id="@+id/nav_gallery"
        android:icon="@drawable/ic_close_24dp"
        android:title="@string/gallery" />
    <item
        android:id="@+id/nav_slideshow"
        android:icon="@drawable/ic_close_24dp"
        android:title="@string/slideshow" />
    <item
        android:id="@+id/nav_manage"
        android:icon="@drawable/ic_close_24dp"
        android:title="@string/tools" />
</group>

<item android:title="@string/about_app">
    <menu>
        <item
            android:id="@+id/nav_about"
            android:icon="@drawable/ic_close_24dp"
            android:title="@string/about1" />
    </menu>
</item>
</menu>

Eventually it is looks like this

but I need when message is caming to inbox it should be marked in NavigationDrawer.

Like this

There are a lot of deffirent libs that can help with this issue, I chose this one.

This lib can attach badge wherever you want, but there are no one sample hoe to attach it to <item> . The closest sample is how to attach to XML

<com.readystatesoftware.viewbadger.BadgeView
            android:id="@+id/badge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="OK" />

but i still can't think out how to attach it to <item>

Maybe there are another solution how to make it?

I have tryed this way

View menuItemView = MenuItemCompat.getActionView(navigationView.getMenu().findItem(R.id.nav_inbox));
    BadgeView badge = new BadgeView(context, menuItemView);
    badge.setText("1");
    badge.show();

but every time I get menuItemView = null

then I have tried this way:

@Override
public boolean onPrepareOptionsMenu(Menu menu) {
    View menuItemView = MenuItemCompat.getActionView(menu.findItem(R.id.nav_inbox));
    BadgeView badge = new BadgeView(context, menuItemView);
    badge.setText("1");
    badge.show();

    return super.onPrepareOptionsMenu(menu);
}

but it is the same menuItemView = null:

Debag

What I am doing wrong?

EDIT

My NavigationView

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main_second"
    app:menu="@menu/activity_third_drawer" />

My menu

<?xml version="1.0" encoding="utf-8"?>
<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_inbox"
        android:icon="@drawable/ic_inbox_checked"
        android:title="Inbox"
        app:actionLayout="@layout/badge" />

</group>

<item android:title="@string/about_app">
    <menu>
        <item
            android:id="@+id/nav_about"
            android:icon="@drawable/ic_close_24dp"
            android:title="@string/about1" />
    </menu>
</item>
</menu>

My badge

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
    android:id="@+id/textMenuItemCount"
    android:layout_width="wrap_content"
    android:text="rrrr"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:textColor="@android:color/holo_blue_light"
    android:textStyle="bold"
    android:textSize="16sp"
    android:alpha="0.6"/>
</RelativeLayout>

This is my code

@Override
protected void onResume() {
    super.onResume();
    NavigationView navView = (NavigationView) findViewById(R.id.nav_view);
    MenuItem item = navView.getMenu().findItem(R.id.nav_inbox);
    MenuItemCompat.setActionView(item, R.layout.badge);
    RelativeLayout notifCount = (RelativeLayout) MenuItemCompat.getActionView(item);
    TextView tv = (TextView) notifCount.findViewById(R.id.textMenuItemCount);

    String count = "4";
    if (count != null) {
        tv.setText(count);
    }else{
        tv.setText("");
        item.setEnabled(false);
    }
}

This is screenshot debag

This is what I get finally

it is nothing, but according debug mode all is ok, without any error, but I can't see any badge.

What I am doing wrong?

Eventually i use this lib https://github.com/mikepenz/MaterialDrawer — Sirop4ik, Sep 27 '16 at 07:19

ugur · Answer 1 · 2016-09-26T17:34:20.560

use custom layout for menu items.

activity_layout.xml

<?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/myCoordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                />
        </android.support.design.widget.AppBarLayout>

        <android.support.v4.widget.DrawerLayout
            android:id="@+id/drawer_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clickable="true"
            android:focusableInTouchMode="true">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="top">

                <android.support.v7.widget.RecyclerView
                    android:layout_height="match_parent"
                    android:layout_width="match_parent"
                    android:id="@+id/rv_venues"
                    android:layout_below="@+id/linearLayout" />

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/linearLayout"
                    android:gravity="right|end"
                    android:padding="0dp"
                    android:visibility="visible"
                    android:layout_alignParentRight="false">

                    <ImageButton
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:id="@+id/btnSearchVenues"
                        android:background="@drawable/custom_btn_overlay"
                        android:src="@drawable/ic_action_search"
                        android:layout_weight="1"
                        android:paddingRight="10dp"
                        android:paddingLeft="10dp" />

                    <ImageButton
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:id="@+id/btnSort"
                        android:background="@drawable/custom_btn_overlay"
                        android:src="@drawable/ic_action_filter"
                        android:layout_weight="1"
                        android:paddingLeft="10dp"
                        android:paddingRight="10dp" />

                    <ImageButton
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:id="@+id/btnMap"
                        android:background="@drawable/custom_btn_overlay"
                        android:src="@drawable/ic_dialog_map"
                        android:layout_weight="1"
                        android:paddingLeft="10dp"
                        android:paddingRight="10dp" />

                </LinearLayout>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/poweredBy"
                    android:id="@+id/textView9"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true"
                    android:textSize="8sp"
                    android:padding="2dp"
                    android:textStyle="bold"
                    android:textColor="#793f6edc" />

            </RelativeLayout>

            <android.support.design.widget.NavigationView
                android:id="@+id/navView"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="start"
                android:background="@android:color/white"
                app:headerLayout="@layout/nav_header"
                app:menu="@menu/menu_drawer" >
        </android.support.design.widget.NavigationView>


        </android.support.v4.widget.DrawerLayout>

    </LinearLayout>


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/action_search"
            android:layout_gravity="bottom|right|end"
            android:layout_marginBottom="16dp"
            android:layout_marginRight="16dp"
            android:src="@drawable/pin_map"
            app:elevation="6dp"
            app:borderWidth="0dp"
            app:pressedTranslationZ="12dp"
            app:backgroundTint="@android:color/holo_green_light"
            app:rippleColor="@android:color/holo_green_dark"
            app:fabSize="normal"/>


    </android.support.design.widget.CoordinatorLayout>

menu_drawer.xml

  <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">

        <group android:id="@+id/group_settings_id0">
        <item android:title="@string/btnFriends"
            android:id="@+id/nav_item_friends"
            android:actionLayout="@layout/navlist"
            android:icon="@drawable/ic_action_circles"/>

        <item android:title="@string/btnPhotos"
            android:id="@+id/nav_item_photos"
            android:actionLayout="@layout/navlist"
            android:icon="@drawable/ic_action_camera"/>

        <item android:title="@string/btnCheckins"
            android:id="@+id/nav_item_checkins"
            android:actionLayout="@layout/navlist"
            android:icon="@drawable/ic_action_location"/>
        </group>

        <group android:id="@+id/group_settings_id1">
            <item android:id="@+id/nav_item_find_people"
                android:title="@string/action_find_people"
                android:icon="@drawable/ic_action_search"/>
        </group>

        <group android:id="@+id/group_settings_id2">
            <item android:id="@+id/nav_item_about"
                android:title="@string/action_about"
                android:icon="@drawable/ic_action_info"/>
            <item android:id="@+id/nav_item_help"
                android:title="@string/action_help"
                android:icon="@android:drawable/ic_menu_help"/>
            <item android:id="@+id/nav_item_logout"
                android:title="@string/action_logout"
                android:icon="@drawable/ic_action_exit"/>
        </group>
   </menu>

badge.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="48dp"
    android:layout_height="fill_parent"
    android:layout_gravity="end"
    android:gravity="center">


    <TextView
        android:id="@+id/textMenuItemCount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        android:textSize="16sp"
        android:alpha="0.6"/>

</RelativeLayout>

in your Activity:

in onCreate method:

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mNavigationView = (NavigationView) findViewById(R.id.navView);


mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.app_name,
        R.string.app_name) {

    /**
     * Called when a drawer has settled in a completely closed state.
     */
    public void onDrawerClosed(View view) {
        super.onDrawerClosed(view);
        fab.show();
    }

    /**
     * Called when a drawer has settled in a completely open state.
     */
    public void onDrawerOpened(View drawerView) {
        super.onDrawerOpened(drawerView);
        fab.hide();
    }
};

mDrawerLayout.setDrawerListener(mDrawerToggle);
mDrawerToggle.syncState();

//call whenever you want to update the badge

public void updateNavView(NavigationView navView, int resId, String count){
    MenuItem item = navView.getMenu().findItem(resId); //ex. R.id.nav_item_friends
        //MenuItemCompat.setActionView(item, R.layout.badge);
        RelativeLayout notifCount = (RelativeLayout) MenuItemCompat.getActionView(item);
        TextView tv = (TextView) notifCount.findViewById(R.id.textMenuItemCount);

        if (count != null) {
            tv.setText(count);
        }else{
            tv.setText("");
            item.setEnabled(false);
        }
}

and the result is

Yes i tryed your code, i add edit in question... What i am doing wrong? Maybe if you have code example in some project ? — Sirop4ik, Jul 14 '16 at 13:30
Could you please edit your anser for full badge.xml layout file with RelativeLayout? And also edit your actiivty-codesnippet to specify, which methods contain which code (e.g. onCreate for init, onResume for refresh of badge)? Also, you are setting the actionView in XML and in code, which shouldn't be necessary? — arne.jans, Sep 26 '16 at 12:25
@arne.jans u re correct! no need for setActionView again it should work without it. i put updateNavView method so when the badge count changes, fire an event to call this method. (i.e. with custom listener or broadcastreceiver) — ugur, Sep 26 '16 at 17:41
Thank you for updating! Also, I noticed you use actionLayout-attribute within android-namespace. I think it should be used with the app-namespace to be used correctly on older android-version. — arne.jans, Sep 27 '16 at 07:24

How to set badge in NavigationView?

1 Answers1