How to add badges on Toolbar MenuItem Icons

Question

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?

Goerke

There are plenty of examples here already on how to make badges. What problems are you having, exactly? – Magalymagan

Answer 1

Here is step by step functionality:

add 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/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"?>
    <RelativeLayout xmlns: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">

     <ImageView
         android: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" />

     <TextView xmlns: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

 @Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.menu, menu);

    final View notificaitons = menu.findItem(R.id.actionNotifications).getActionView();

    txtViewCount = (TextView) notificaitons.findViewById(R.id.txtCount);
    updateHotCount(count++);
    txtViewCount.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            updateHotCount(count++);
        }
    });
    notificaitons.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
    //    TODO
        }
    });


    return true;
}

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

    public void updateHotCount(final int new_hot_number) {
    count = new_hot_number;
    if (count < 0) return;
    runOnUiThread(new Runnable() {
        @Override
        public void run() {
            if (count == 0)
                txtViewCount.setVisibility(View.GONE);
            else {
                txtViewCount.setVisibility(View.VISIBLE);
                txtViewCount.setText(Integer.toString(count));
                // supportInvalidateOptionsMenu();
            }
        }
    });
}      

Hannibal

You only meant to say in your lower code: if (count == 0) txtViewCount.setVisibility(View.GONE); – Francescafrancesco

Yes if count == 0 then View.Gone. – Hannibal

So, how can I align menu item to left of toolbar? (As image above) – Bergmann

<3<3<3<3<3<3<3<3 – Bicephalous

Answer 2

I think it is possible with :

<ImageView
        android:id="@+id/counterBackground"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/unread_background" /> <!-- your icon -->

    <TextView
        android: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://mcmap.net/q/157631/-actionbar-notification-count-icon-badge-like-google-has

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://mcmap.net/q/666093/-flip-arrow-on-android-spinner-in-toolbar

Caro

Answer 3

MaterialToolbar has ability to add BadgeDrawable:

For example in your Activity you can add the badge like this:

val toolbar: MaterialToolbar = findViewById(R.id.toolbar)
val badgeDrawable = BadgeDrawable.create(this).apply {
    isVisible = true
    backgroundColor = neededBadgeColor
    number = neededNumber
}
BadgeUtils.attachBadgeDrawable(badgeDrawable, toolbar, R.id.item_in_toolbar_menu)

Morven