how can i add notification badges in the app?

Question

I want to add a notification badge in the application like the following one:

How to implement badges. Please Guide.

Answer 1

This is called badges. You can use this library for badge support. Leolin Shortcut Badger and this is also Android ActionItem Badged I think its not possible for all devices. although Samsung used it. You can read here the Posts seems same as yours.

Answer 2

If you want to add badge to Icon

BadgeDrawable is a custom drawable

package com.wisilica.cms.utitlty.viewHelper;

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.wisilica.cms.R;

/**
 * Created by Godwin Joseph on 02-11-2016 11:49 for Cms_Android application.
 */


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.white));
    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;
}
}

And Add code { 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(mContext);
    }
    badge.setCount(count);
    icon.mutate();
    icon.setDrawableByLayerId(R.id.ic_badge, badge);

 }

You can set Drwabale in any view

Answer 3

 <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="5dp"
           >

            <Button
                android:id="@+id/button1"

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:layout_gravity="center"

                android:background="@null"

                android:text="Button" />

            <FrameLayout
                android:id="@+id/badgecountlayout"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_gravity="left"
                android:layout_marginLeft="8dp"
                android:layout_marginTop="10dp">

                <TextView
                    android:id="@+id/badgecount"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/round_notification"
                    android:gravity="center"
                    android:text="99" />
            </FrameLayout>

        </FrameLayout>

round_notification.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    <gradient android:startColor="@color/yellow_dark" android:endColor="@color/yellow_dark"
        android:angle="270"/>
</shape>