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

Answer 1

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

Here what i have Done.

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

3. 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...!!!