How to make an icon in the action bar with the number of notification? [duplicate]

Question

I would like to make a notification icon in the action bar to inside the number of notifications.

For example (Google Adsence) :

I found this answer on stackoverflow, but it does not fully answer my question because in this case it is only the number and not an icon with a number: Actionbar notification icon with count

Answer 1

After a lot of trying of nearly all resources on SO I turned to blogs; successfully. I want to share what worked for me (Api >= 13).

Let's start with the way it's used in code:

 public boolean onCreateOptionsMenu(Menu menu) {     //inflate menu     getMenuInflater().inflate(R.menu.menu_my, menu);      // Get the notifications MenuItem and LayerDrawable (layer-list)     MenuItem item = menu.findItem(R.id.action_notifications);     LayerDrawable icon = (LayerDrawable) item.getIcon();      // Update LayerDrawable's BadgeDrawable     Utils2.setBadgeCount(this, icon, 2);      return true; } 

The menu_my.xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     tools:context=".MainActivity">     <item         android:id="@+id/action_notifications"         android:icon="@drawable/ic_menu_notifications"         android:title="Notifications"         app:showAsAction="always" /> </menu> 

This class that conveniently makes a BadgeDrawable:

public class BadgeDrawable extends Drawable {      private float mTextSize;     private Paint mBadgePaint;     private Paint mTextPaint;     private Rect mTxtRect = new Rect();      private String mCount = "";     private boolean mWillDraw = false;      public BadgeDrawable(Context context) {         //mTextSize = context.getResources().getDimension(R.dimen.badge_text_size);         mTextSize = 12F;          mBadgePaint = new Paint();         mBadgePaint.setColor(Color.RED);         mBadgePaint.setAntiAlias(true);         mBadgePaint.setStyle(Paint.Style.FILL);          mTextPaint = new Paint();         mTextPaint.setColor(Color.WHITE);         mTextPaint.setTypeface(Typeface.DEFAULT_BOLD);         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.         float radius = ((Math.min(width, height) / 2) - 1) / 2;         float centerX = width - radius - 1;         float centerY = radius + 1;          // Draw badge circle.         canvas.drawCircle(centerX, centerY, radius, 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);         canvas.drawText(mCount, centerX, textY, mTextPaint);     }      /*     Sets the count (i.e notifications) to display.      */     public void setCount(int count) {         mCount = Integer.toString(count);          // Only draw a badge if there are notifications.         mWillDraw = count > 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;     } } 

This class that helps to set the number.

public class Utils2 {     public static void setBadgeCount(Context context, LayerDrawable icon, int 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);     }   } 

And mui importante a drawable (like a layout) in res/drawable:

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

Good luck!