How To Add Badges On Toolbar Menuitem Icons

I tried to find an answer for myself but couldn't find it. I need make badge on the MenuItem icon in the Toolbar, like this: How can I make this?

Solution 1:

Here is step by step functionality:

add menu.xml

<?xml version="1.0" encoding="utf-8"?><menuxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"><itemandroid:id="@+id/actionNotifications"android:icon="@drawable/ic_info_outline_white_24dp"android:menuCategory="secondary"android:orderInCategory="1"android:title="Cart"app:actionLayout="@layout/notification_layout"app:showAsAction="always" /></menu>

Then add notification_layout.xml, this layout will be used as the notification icons layout

<?xml version="1.0" encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"style="@android:style/Widget.ActionButton"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_gravity="center"android:background="@android:color/transparent"android:clickable="true"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/hotlist_bell"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="0dp"android:contentDescription="Notification Icon"android:gravity="center"android:src="@drawable/ic_info_outline_white_24dp" /><TextViewxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/txtCount"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginBottom="@dimen/x5dp"android:layout_marginLeft="@dimen/x10dp"android:layout_marginRight="0dp"android:background="@drawable/pointer_"android:gravity="center"android:minWidth="17sp"android:text="0"android:textColor="#ffffffff"android:textSize="12sp" /></RelativeLayout>

now inside Activity

@OverridepublicbooleanonCreateOptionsMenu(Menu menu) {
    MenuInflaterinflater= getMenuInflater();
    inflater.inflate(R.menu.menu, menu);

    finalViewnotificaitons= menu.findItem(R.id.actionNotifications).getActionView();

    txtViewCount = (TextView) notificaitons.findViewById(R.id.txtCount);
    updateHotCount(count++);
    txtViewCount.setOnClickListener(newView.OnClickListener() {
        @OverridepublicvoidonClick(View v) {
            updateHotCount(count++);
        }
    });
    notificaitons.setOnClickListener(newView.OnClickListener() {
        @OverridepublicvoidonClick(View v) {
    //    TODO
        }
    });


    returntrue;
}

You can put following function (taken from stackoverflow) inside the activity to update counter:

publicvoidupdateHotCount(finalint new_hot_number) {
    count = new_hot_number;
    if (count < 0) return;
    runOnUiThread(newRunnable() {
        @Overridepublicvoidrun() {
            if (count == 0)
                txtViewCount.setVisibility(View.GONE);
            else {
                txtViewCount.setVisibility(View.VISIBLE);
                txtViewCount.setText(Integer.toString(count));
                // supportInvalidateOptionsMenu();
            }
        }
    });
}      

Solution 2:

I think it is possible with :

<ImageViewandroid:id="@+id/counterBackground"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/unread_background" /><!-- your icon --><TextViewandroid:id="@+id/count"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="1"android:textSize="8sp"android:layout_centerInParent="true"android:textColor="#FFFFFF" />

And then using it for that icon as background.also, you need to remove/disable the default icon too.

You may want to take a look:

Remove App Icon from Navigation Drawer ActionBar Does not work

Remove the navigation drawer icon and use the app icon to open

https://stackoverflow.com/a/29160904/4409113

Also, in the android-sdk/platforms/android-22/data/res, there should be that icon. You just need to find that and use it for your purpose (for example, adding that ImageView and adding it asbackground)

Take a look:https://stackoverflow.com/a/34999691/4409113