How to Display Badges with Menu Items that are displayed in the overflow menu

Question

I am Working on Android Menu Items. I can able to add Badges with the Items that are displayed in the Action Bar .But i want to show the same Badges with the Overflow Menu Items. Is there any solutions to Add Badges to Menu Items in overflow menu Like the Sample Image and

Any help would greatly appreciated..!!!

default menu item won't work for you, try popup window or popup menu for more customization — Shrenik Shah, Feb 27 '17 at 05:05
Show 'PopupWindow' with your custom layout when clicked on menu. — Harin, Feb 27 '17 at 08:56

score 2 · Answer 1 · answered Feb 27 '17 at 05:07

can you please try following.

main.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@+id/badge"
        android:actionLayout="@layout/badge_layout"
        android:title="Badges"
        android:showAsAction="always">
    </item>
</menu>

Here badge_layout is you menu item layout with the badge.

and following are code to implement in activity.

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        RelativeLayout badgeLayout = (RelativeLayout) menu.findItem(R.id.badge).getActionView();
        mCounter = (TextView) badgeLayout.findViewById(R.id.counter);
        return true;
    }

This is for android:showAsAction="always" But I need a solution for android:showAsAction="never" — RAJESH KUMAR ARUMUGAM, Feb 27 '17 at 06:33

score 1 · Accepted Answer · edited Feb 27 '17 at 15:12

Finally i did it with the Help ofCustom PopUp Window + BadgeView

Here what i have Done.

Created Custom Layout For PopUp Window - custom_popup.xml

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:background="@drawable/icon_menu_facebook"
        android:text="Icon" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Notifications" />

    <TextView
        android:id="@+id/badge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="" />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView

        android:layout_width="36dp"
        android:layout_height="36dp"
        android:background="@drawable/icon_menu_facebook"
        android:text="Icon" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Notifications" />

    <TextView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="" />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView

        android:layout_width="36dp"
        android:layout_height="36dp"
        android:background="@drawable/icon_menu_facebook"
        android:text="Icon" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Notifications" />

    <TextView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="" />
</LinearLayout>

2.Added Menu Item with Custom Icon (Overflow Menu Icon)- options_menu.xml

  <?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">
    <item
        android:id="@+id/ViewSource"
        android:icon="@drawable/ic_action_viewsource"
        android:title="ViewSource"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/about"
        android:icon="@drawable/ic_action_about"
        android:title="About"
        app:showAsAction="ifRoom">
        <!-- "file" submenu -->
        <menu>
            <item
                android:id="@+id/github"
                android:icon="@drawable/icon_menu_github"
                android:title="Github" />
            <item
                android:id="@+id/linkedin"
                android:icon="@drawable/icon_menu_linkedin"
                android:title="LinkedIn" />
            <item
                android:id="@+id/twitter"
                android:icon="@drawable/icon_menu_twitter"
                android:title="Twitter" />
            <item
                android:id="@+id/facebook"
                android:icon="@drawable/icon_menu_facebook"
                android:title="Facebook" />
        </menu>
    </item>

    <item
        android:id="@+id/notifications"
        android:icon="@drawable/ic_action_name"
        android:title="More"
        app:showAsAction="always"></item>

</menu>

In MainActivity.java Added the following Code with in onOptionsItemSelected(MenuItem item)

      case R.id.notifications:
            LayoutInflater layoutInflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
            View CustomPopUp = layoutInflater.inflate(R.layout.custom_popup, null);
            popupWindow = new PopupWindow(CustomPopUp, ActionBar.LayoutParams.WRAP_CONTENT,
                    ActionBar.LayoutParams.WRAP_CONTENT);
            if (Build.VERSION.SDK_INT >= 21) {
                popupWindow.setElevation(5.0f);
            }
            ViewGroup actionBar = getActionBar(getWindow().getDecorView());
            TextView tv_badge = (TextView) CustomPopUp.findViewById(R.id.badge);
            BadgeView badge = new BadgeView(activity);
            badge.setTargetView(tv_badge);
            badge.setBadgeCount(45);
            popupWindow.showAtLocation(actionBar, Gravity.TOP | Gravity.RIGHT, 0, -70);
            popupWindow.setAnimationStyle(R.style.Animation);
            linearlatout.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    popupWindow.dismiss();
                }
            });
            return true;
       default:
            return super.onOptionsItemSelected(item);

Thats all..!!! Happy Coding...!!!

How to Display Badges with Menu Items that are displayed in the overflow menu

2 Answers2