Adding Badge count on menu items like cart , notification etc

In every application, we decorate our MenuItem placed on ActionBar. Displaying of badge count not only decorate the ActionBar beautifully but also displays useful information like showing the number of items currently available in your cart or update you with unread notification.

We can create badge count using either a custom view or by adding a distinct drawable to display the each state of MenuItem.

Both the options have its pros and cons.

There is another approach using LayerDrawable which is more flexible and efficient than the former approaches.

Here’s what we’re going to do:

Create a LayerDrawable to display MenuItem with a badge.
Create a custom drawable let us called BadgeDrawable.
Set badge on the menu item from our Activity.

LayerDrawable

A Drawable that manages an array of other Drawables. These are drawn in array order, so the element with the largest index will be drawn on top.It can be defined in an XML file with the

It can be defined in an XML file with the <layer-list> element. Each Drawable in the layer is defined in a nested<item>

i. Creating a layer drawable to display menu item on layer one and badge on top of it.

ic_menu_cart.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/ic_cart"
        android:gravity="center" />
    
    <!-- set a place holder Drawable so android:drawable isn't null -->
    <item
        android:id="@+id/ic_badge"
        android:drawable="@drawable/ic_cart" />
</layer-list>

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item

android:drawable="@drawable/ic_cart"

android:gravity="center" />

<item

android:id="@+id/ic_badge"

android:drawable="@drawable/ic_cart" />

</layer-list>

ii. Creating menu for our activity to display the count on the menu items.

main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.example.mobikul.MainActivity" >
   
    <item
        android:id="@+id/action_cart"
        android:icon="@drawable/ic_menu_cart"
        android:title="@string/action_cart"
        app:showAsAction="always" />
</menu>

<menu xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

xmlns:app="http://schemas.android.com/apk/res-auto"

tools:context="com.example.mobikul.MainActivity" >

<item

android:id="@+id/action_cart"

android:icon="@drawable/ic_menu_cart"

android:title="@string/action_cart"

app:showAsAction="always" />

</menu>

iii. Creating a flexible and efficient custom BagdeDrawable class to draw a view that looks like a count

BagdeDrawable.java

package com.webkul.mobikul.helper;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.Typeface;
import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;

import com.webkul.mobikul.R;

public class BadgeDrawable extends Drawable {

	private Paint mBadgePaint;
	private Paint mBadgePaint1;
	private Paint mTextPaint;
	private Rect mTxtRect = new Rect();

	private String mCount = "";
	private boolean mWillDraw;

	public BadgeDrawable(Context context) {
		float mTextSize = context.getResources().getDimension(R.dimen.badge_text_size);

		mBadgePaint = new Paint();
		mBadgePaint.setColor(Color.RED);
		mBadgePaint.setAntiAlias(true);
		mBadgePaint.setStyle(Paint.Style.FILL);
		mBadgePaint1 = new Paint();
		mBadgePaint1.setColor(ContextCompat.getColor(context.getApplicationContext(), R.color.grey_ivory5));
		mBadgePaint1.setAntiAlias(true);
		mBadgePaint1.setStyle(Paint.Style.FILL);

		mTextPaint = new Paint();
		mTextPaint.setColor(Color.WHITE);
		mTextPaint.setTypeface(Typeface.DEFAULT);
		mTextPaint.setTextSize(mTextSize);
		mTextPaint.setAntiAlias(true);
		mTextPaint.setTextAlign(Paint.Align.CENTER);
	}

	@Override
	public void draw(Canvas canvas) {



		if (!mWillDraw) {
			return;
		}
		Rect bounds = getBounds();
		float width = bounds.right - bounds.left;
		float height = bounds.bottom - bounds.top;

		// Position the badge in the top-right quadrant of the icon.

	        /*Using Math.max rather than Math.min */

		float radius = ((Math.max(width, height) / 2)) / 2;
		float centerX = (width - radius - 1) +5;
		float centerY = radius -5;
		if(mCount.length() <= 2){
			// Draw badge circle.
			canvas.drawCircle(centerX, centerY, (int)(radius+7.5), mBadgePaint1);
			canvas.drawCircle(centerX, centerY, (int)(radius+5.5), mBadgePaint);
		}
		else{
			canvas.drawCircle(centerX, centerY, (int)(radius+8.5), mBadgePaint1);
			canvas.drawCircle(centerX, centerY, (int)(radius+6.5), mBadgePaint);
//	        	canvas.drawRoundRect(radius, radius, radius, radius, 10, 10, mBadgePaint);
		}
		// Draw badge count text inside the circle.
		mTextPaint.getTextBounds(mCount, 0, mCount.length(), mTxtRect);
		float textHeight = mTxtRect.bottom - mTxtRect.top;
		float textY = centerY + (textHeight / 2f);
		if(mCount.length() > 2)
			canvas.drawText("99+", centerX, textY, mTextPaint);
		else
			canvas.drawText(mCount, centerX, textY, mTextPaint);
	}

	/*
    Sets the count (i.e notifications) to display.
     */
	public void setCount(String count) {
		mCount = count;

		// Only draw a badge if there are notifications.
		mWillDraw = !count.equalsIgnoreCase("0");
		invalidateSelf();
	}

	@Override
	public void setAlpha(int alpha) {
		// do nothing
	}

	@Override
	public void setColorFilter(ColorFilter cf) {
		// do nothing
	}

	@Override
	public int getOpacity() {
		return PixelFormat.UNKNOWN;
	}
}

100

101

102

103

104

105

106

107

108

109

110

package com.webkul.mobikul.helper;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.ColorFilter;

import android.graphics.Paint;

import android.graphics.PixelFormat;

import android.graphics.Rect;

import android.graphics.Typeface;

import android.graphics.drawable.Drawable;

import android.support.v4.content.ContextCompat;

import com.webkul.mobikul.R;

public class BadgeDrawable extends Drawable {

private Paint mBadgePaint;

private Paint mBadgePaint1;

private Paint mTextPaint;

private Rect mTxtRect = new Rect();

private String mCount = "";

private boolean mWillDraw;

public BadgeDrawable(Context context) {

float mTextSize = context.getResources().getDimension(R.dimen.badge_text_size);

mBadgePaint = new Paint();

mBadgePaint.setColor(Color.RED);

mBadgePaint.setAntiAlias(true);

mBadgePaint.setStyle(Paint.Style.FILL);

mBadgePaint1 = new Paint();

mBadgePaint1.setColor(ContextCompat.getColor(context.getApplicationContext(), R.color.grey_ivory5));

mBadgePaint1.setAntiAlias(true);

mBadgePaint1.setStyle(Paint.Style.FILL);

mTextPaint = new Paint();

mTextPaint.setColor(Color.WHITE);

mTextPaint.setTypeface(Typeface.DEFAULT);

mTextPaint.setTextSize(mTextSize);

mTextPaint.setAntiAlias(true);

mTextPaint.setTextAlign(Paint.Align.CENTER);

}

@Override

public void draw(Canvas canvas) {

if (!mWillDraw) {

return;

}

Rect bounds = getBounds();

float width = bounds.right - bounds.left;

float height = bounds.bottom - bounds.top;

// Position the badge in the top-right quadrant of the icon.

/*Using Math.max rather than Math.min */

float radius = ((Math.max(width, height) / 2)) / 2;

float centerX = (width - radius - 1) +5;

float centerY = radius -5;

if(mCount.length() <= 2){

// Draw badge circle.

canvas.drawCircle(centerX, centerY, (int)(radius+7.5), mBadgePaint1);

canvas.drawCircle(centerX, centerY, (int)(radius+5.5), mBadgePaint);

}

else{

canvas.drawCircle(centerX, centerY, (int)(radius+8.5), mBadgePaint1);

canvas.drawCircle(centerX, centerY, (int)(radius+6.5), mBadgePaint);

// canvas.drawRoundRect(radius, radius, radius, radius, 10, 10, mBadgePaint);

}

// Draw badge count text inside the circle.

mTextPaint.getTextBounds(mCount, 0, mCount.length(), mTxtRect);

float textHeight = mTxtRect.bottom - mTxtRect.top;

float textY = centerY + (textHeight / 2f);

if(mCount.length() > 2)

canvas.drawText("99+", centerX, textY, mTextPaint);

else

canvas.drawText(mCount, centerX, textY, mTextPaint);

}

Sets the count (i.e notifications) to display.

public void setCount(String count) {

mCount = count;

// Only draw a badge if there are notifications.

mWillDraw = !count.equalsIgnoreCase("0");

invalidateSelf();

}

@Override

public void setAlpha(int alpha) {

// do nothing

}

@Override

public void setColorFilter(ColorFilter cf) {

// do nothing

}

@Override

public int getOpacity() {

return PixelFormat.UNKNOWN;

}

Setting up altogether

We can get the icon of the menu using getIcon() method.

MenuItem itemCart = menu.findItem(R.id.action_cart);
LayerDrawable icon = (LayerDrawable) itemCart.getIcon();
setBadgeCount(this, icon, "9");

MenuItem itemCart = menu.findItem(R.id.action_cart);

LayerDrawable icon = (LayerDrawable) itemCart.getIcon();

setBadgeCount(this, icon, "9");

Here is our method setBadgeCount(). We can pass LayerDrawable which we get from meniItem and setBadge from anywhere from the application.

public static void setBadgeCount(Context context, LayerDrawable icon, String count) {

		BadgeDrawable badge;

		// Reuse drawable if possible
		Drawable reuse = icon.findDrawableByLayerId(R.id.ic_badge);
		if (reuse != null && reuse instanceof BadgeDrawable) {
			badge = (BadgeDrawable) reuse;
		} else {
			badge = new BadgeDrawable(context);
		}

		badge.setCount(count);
		icon.mutate();
		icon.setDrawableByLayerId(R.id.ic_badge, badge);
	}

public static void setBadgeCount(Context context, LayerDrawable icon, String count) {

BadgeDrawable badge;

// Reuse drawable if possible

Drawable reuse = icon.findDrawableByLayerId(R.id.ic_badge);

if (reuse != null && reuse instanceof BadgeDrawable) {

badge = (BadgeDrawable) reuse;

} else {

badge = new BadgeDrawable(context);

}

badge.setCount(count);

icon.mutate();

icon.setDrawableByLayerId(R.id.ic_badge, badge);

}

Shubham Agarwal 30 June 2023

. . .

Discuss on Helpdesk

39 comments

Saurabh Awasthi May 14, 2016 at 11:25 am

Its works like charm….thanxx a lot for this useful tutorial….
I have a question how to remove badge on click menu item for showing notification read???

Shubham Agarwal May 17, 2016 at 8:15 am
use this

setBadgeCount(this, icon,”0″)

This will set mWillDraw to false if the count is “0”. Thus This will not draw the badge or simply remove the badge.

Reply

Jaydeep Joshi May 24, 2016 at 4:16 am

please give me image resources like ic_cart and ic_menu_cart

Shubham Agarwal Jul 12, 2016 at 7:18 am
You can generate it easily checkout this link: https://romannurik.github.io/AndroidAssetStudio/index.html

Reply

Darshan J May 29, 2016 at 2:00 pm

if (reuse != null && reuse instanceof BadgeDrawable) {
badge = (BadgeDrawable) reuse;
}
else {
badge = new BadgeDrawable(context);
}

here if I get reuse as null;the onDraw() method of BadgeDrawable is not called at all(so no badge) since the bounds are 0; how do I fix this; sometimes badge will get drawn as sometimes not and it entirely depends on reuse variable (if its null no badge and if its not null, I can see the badge).
Thanks, any help will be greatly appreciated 😉

Shubham Agarwal Jul 12, 2016 at 7:17 am
Please check the edits we have updated the blog. If you are still having any issues let us know.

Reply
Jawed Aftab Mar 13, 2019 at 7:13 pm
the solution is

icon.mutate();
icon.setDrawableByLayerId(R.id.ic_badge, badge);
badge.setCount(count); //shifted down

Reply

Srikanth Kancheti Jun 29, 2016 at 6:39 am

java.lang.ClassCastException: android.graphics.drawable.BitmapDrawable cannot be cast to android.graphics.drawable.LayerDrawable
at com.example.srikanth.badgesample.MainActivity.onCreateOptionsMenu(MainActivity.java:26)

Getting the above ClassCastException

Shubham Agarwal Jul 12, 2016 at 7:15 am
Please compare with the ic_menu_cart.xml file are you using LayerDrawable of BitmapDrawable. Please check edits and share your file if you are having any problem

Reply

gokul kalagara Jul 8, 2016 at 7:47 am

It Not getting in Nexus and Goto G2

Shubham Agarwal Jul 12, 2016 at 7:19 am
We have updated the blog. Does this work for other device. Because the problem may not be because of device.

Reply

Jeevan Prasad Aug 4, 2016 at 9:53 am

Jeevan Prasad Aug 4, 2016 at 9:54 am

I am using this code but getting an error i.e java.lang.ClassCastException: android.support.v7.view.menu.MenuItemImpl cannot be cast to android.graphics.drawable.LayerDrawable

Vinod Kumar Aug 25, 2016 at 8:47 am
First you should inflate the menu and then

MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main, menu);
MenuItem itemCart = menu.findItem(R.id.action_cart);
LayerDrawable icon = (LayerDrawable)itemCart.getIcon();
setBadgeCount(this, icon, “9”);
return super.onCreateOptionsMenu(menu);

Reply
- Jeevan Prasad Aug 26, 2016 at 5:02 am
  Thank u vinod kumar
  
  Reply
  - Vinod Kumar Aug 26, 2016 at 6:57 am
    you are welcome …
    
    Reply

tofa riyadi Oct 12, 2016 at 7:27 pm

i like it.
thanks…

Somnath Pal Oct 26, 2016 at 7:21 am

How to change batch text in onCreate() using the method setBadgeCount?

Ninte Shilpi Oct 28, 2016 at 7:22 pm

this example shows how it can be done http://logicchip.com/display-count-notification-in-menu-item-and-launcher-icon/

vikygeek Dec 3, 2016 at 6:45 pm

I have to change the number in the badge on a button click in a Fragment. Eg. When I click the “Add to Cart” Button the badge must get incremented. I got trouble in Sending the Arugument of LayerDrawable. I can’t fetch the menu while creating the LayerDrawable object in onCickEventListener() method. How to Do this?

Prasanna Dec 14, 2016 at 9:02 am

Can we use it using ImageButton instead of actionbar

Shubham Agarwal Dec 14, 2016 at 9:09 am
It’s a drawable so i am sure it will work for ImageButton as well

Reply

pavan Jan 7, 2017 at 2:24 pm

Link to view the source code isn’t working. Please check?

Rahul Pahuja Mar 13, 2017 at 3:44 am

Thanks alot, very helpful article

Mostafa Anter Apr 2, 2017 at 4:12 pm

thank you very much 🙂

Ari Garasuthan Apr 24, 2017 at 4:57 am

Thank You

adi May 14, 2017 at 10:05 am

link dead, please sent my email : [email protected]

Kuldeep Dubey May 16, 2017 at 4:25 am

Hello Thank you for the article. I used it and it was working very comfortably in API versions below 23. But in 23 and above the cart image gets expanded. Could you help. Image: https://i.stack.imgur.com/pG8Hc.png

Shubham Agarwal Jun 15, 2017 at 8:20 am
@kuldeepdubey:disqus first of all, it seems like you are setting badge below the cart icon.
In case you are having problem with the badge setting badge bound in onDraw().
This is a simple drawable i am not sure it is dependent on android api version.
If you still have some problem please share sample git project reproducing the problem. We will help you out.

Reply
Manikandan Aug 17, 2017 at 12:12 pm
@kuldeepdubey:disqus did you get solution to your problem. If so let me know. or kindly share at [email protected]

Reply