How to set badge in NavigationView? [duplicate]

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?

Answer 1

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