Badge notification android

Si nosotros estamas actualizando informacion es muy importante que le avisemos al usuario a través de nuestra aplicación, la notificación es como un !Hey tengo algo nuevo¡
Esta es la notificación que queremos hacer:

Para poderla crear vamos a dividirla en dos

En android podemos hacer uso del atributo layer-list con este nosotros crearemos dos capas en las cuales colocaremos el icono y el círculo rojo.

Primero tenemos que crear un archivo nos vamos a res/drawable/ damos clic derecho New/drawable resource file el nombre del archivo será notification.xml dentro de este crearemos el siguiente código:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item
       android:drawable="@drawable/bell" /><!--Aquí colocamos el icono -->
   <item
       android:id="@+id/ic_badge" <!--Agregamos un id para poder modificar esta capa y colocar el círculo rojo con el número -->
       android:drawable="@drawable/bell" /><!--Aquí colocamos el icono -->
</layer-list>

Como les mencione layer-list nos servirá para crear capas en la primera capa colocamos el icono este lo puedes obtener en la siguiente página Material Design Icons en la segunda capa colocaremos la misma imagen pero le colocaremos un id ya que en este agregaremos el círculo rojo con el número.

Ahora nos vamos a res damos clic derecho New/Directory colocamos el siguiente nombre menu y dentro de esta carpeta vamos a crear un archivo damos clic derecho New/drawable resource file el archivo se llamará menu_main.xml y dentro de este crearemos el siguiente código:

<?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/action_notification"
       android:icon="@drawable/notification" 
       android:title="Notificación"
       app:showAsAction="always" />
</menu>

Antes de esto te recomiendo leer el siguiente articulo Posición De Diseño para poder entender como se posiciona el icono.

Ahora vamos a crear una clase nos vamos a JAVA clic derecho New/Java class el nombre será Circle y crearemos el siguiente código:

public class Circle extends Drawable {
//Declaramos una variable tipo Paint para nuestro circulo 
   private Paint circlePaint;
//Declaramos una variable para el texto que irá dentro del círculo 
   private Paint textPaint;
//Declaramos una variable tipo Rect para manejar el tamaño del círculo
   private Rect rect = new Rect();
//Declaramos una variable para guardar el número de notificaciones 
   private String count;

//Creamos una bandera saber si debemos de pintar o no el círculo
   private boolean draw = false;

   public Circle(){
//Le agregamos las características a nuestro círculo
       circlePaint=new Paint();
       circlePaint.setColor(Color.RED);
//Con este atributo vamos a evitar que se pixelado nuestro círculo
       circlePaint.setAntiAlias(true);
       circlePaint.setStyle(Paint.Style.FILL);

       textPaint=new Paint();
       textPaint.setColor(Color.WHITE);
       textPaint.setTypeface(Typeface.DEFAULT_BOLD);
       textPaint.setTextSize(25);
//Con este atributo vamos a evitar que se pixelado nuestro círculo
       textPaint.setAntiAlias(true);
       textPaint.setTextAlign(Paint.Align.CENTER);
   }

   @Override
   public void draw(Canvas canvas) {

//Validamos si debemos de pintar o no
       if(!draw)
           return;
//Con getBounds obtendremos datos del lienzo
       Rect bounds=getBounds();
/*Para poder entender cómo funciona esta parte es necesario que veas el siguiente articulo  https://codigofacilito.com/articulos/articulo_16_10_2019_16_38_48 */
       float width=bounds.right-bounds.left;
       float radius=width/3;
       float x = bounds.right;
       float y = bounds.top+9;

//Dibujamos el círculo en el lienzo
       canvas.drawCircle(x,y,radius,circlePaint);


       textPaint.getTextBounds(count,0,count.length(),rect);
       float height = rect.bottom-rect.top;
       float textY=y + (height/2);
//Dibujamos el texto en el círculo
       canvas.drawText(count,x,textY,textPaint);

   }

   @Override
   public void setAlpha(int alpha) {

   }

   @Override
   public void setColorFilter(ColorFilter colorFilter) {

   }

   @Override
   public int getOpacity() {
//Colocamos en opacidad desconocida
       return PixelFormat.UNKNOWN;
   }

/*Este método nos servirá para poder agregar y modificar el número de la notificación */

   public void setCount(String count){
       this.count=count;
/*Convertimos a entero y verificamos si hay alguna notificación si no hay entonces no dibujamos nada */
       draw = Integer.parseInt(count)>0;
   }
}

Nos vamos a MainActivity y vamos agregar el método onCreateOptionsMenu con este método podremos mostrar la notificación en el AppBar y crearemos otro método llamado setBadgeCount en este recibiremos dos parámetros uno será el icono y otro el número de notificaciones (LayerDrawable icon, String count) nuestro MainActivity quedaría de la siguiente manera:

public class MainActivity extends AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
   }

   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
//Llamamos el archivo xml que creamos anteriormente en la carpeta menu 
       getMenuInflater().inflate(R.menu.menu_main, menu);
//En esta parte llamaremos nuestro item que creamos en menu
       MenuItem item = menu.findItem(R.id.action_notification);
/*Llamamos nuestro método setBadgeCount y enviamos los argumentos que seria el icono y el número de notificaciones */
       setBadgeCount((LayerDrawable) item.getIcon(), "1");
       return true;
   }

   private  void setBadgeCount(LayerDrawable icon, String count){
//Creamos una instancia de nuestra clase Circle   
       Circle circle=new Circle();
//Llamamos nuestro método setCount y enciamos el numero de notificaciones
       circle.setCount(count);
/*Mutable no compartirá su estado con ningún otro sorteo.*/
       icon.mutate();
/*como les mencione anteriormente creamos dos capas una para la notificación y otra para agregar el circulo rojo en esta línea llamamos la capa y agregamos el circulo*/
       icon.setDrawableByLayerId(R.id.ic_badge, circle);
   }
}

Ejecutamos y el resultado sería el siguiente :