Insignias De Notificaciones En Android

Finalizamos esta guía viendo cómo modificar las insignias de notificaciones (notification badges) que el sistema provee desde la versión 8.0 de Android (API 26). Como bien sabes, las insignias aparecen como puntos en el icono de la App en el Launcher:

Si haces un click prolongado sobre el icono se desplegará un pequeño menú con las notificaciones activas:

Nota: Esta es la quinta parte de la guía de notificaciones (todo). Te recomiendo leer los anteriores apartados para comprender conceptos acumulados y entender el contexto de los ejemplos propuestos.

---

Ejemplo De Insignias De Notificaciones

En este pequeño ejemplo veremos varios métodos para deshabilitar las insignias, cambiar el contador de notificaciones y modificar su icono.

Al igual que en los anteriores tutoriales, usaremos un botón que inicia las notificaciones desde la actividad MainActivity.

Puedes descargar el código desde el siguiente enlace:

Ejecuta el módulo P5_Badges para visualizar las modificaciones realizadas a las insignias de nuestra notificación de ejemplo.

---

Desactivar Insignias

Las insignias están habilitadas por defecto en el momento en que creas un canal para tus notificaciones. No obstante, hay ciertos tipos de notificaciones que no son consistentes con el uso de insignias, tales como:

• Notificaciones en curso
• Recordatorios
• Eventos de alarmas o reloj

Por lo que para desactivar las insignias desde la creación de tu canal, usa el método setShowBadge() con el valor de false.

Por ejemplo:

Desactivemos las badges para un canal de notificaciones que muestra recordatorios de nuestra App.

Para ello modificamos el método createChannel() en nuestra definición de objeto NotificationUtil, para que reciba como último parámetro un booleano que determine si se muestran o no las badges:

object NotificationUtil {

    @RequiresApi(Build.VERSION_CODES.O)
    fun createChannel(
        context: Context,
        importance: Int,
        name: String,
        description: String,
        showBadges: Boolean
    ) {
        val id = "${context.packageName}.channels.$name"
        val channel = NotificationChannel(id, name, importance).apply {
            this.description = description
            setShowBadge(showBadges)
        }

        val nm: NotificationManager =
            context.getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
        nm.createNotificationChannel(channel)
    }
}

Y luego creamos el canal para los recordatorios desde la actividad principal pasando el argumento false:

private fun createNotificationChannels() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {   
        NotificationUtil.createChannel(
            this,
            NotificationManagerCompat.IMPORTANCE_DEFAULT,
            "Tutoriales",
            "Produce notificaciones cuando se publica un nuevo tutorial",
            true
 // Los tutoriales usarán insignias
        )
        NotificationUtil.createChannel(
            this,
            NotificationManagerCompat.IMPORTANCE_DEFAULT,
            "Recordatorios",
            "Recordatorios sobre tareas agendadas",
            false
 // Los recordatorios no tendrán insignias
        )
    }
}

Con esto, al presionar generar una notificación de recordatorio, esta no aparecerá en el menú de pulsación larga.

Desactivar Insignias Desde Ajustes

Adicionalmente, el usuario puede entrar en la pantalla de configuración de notificaciones de la App, ir al detalle del canal y desactivar la preferencia Mostrar punto de notificación:

---

Personalizar Contador De Notificaciones

El menú que se despliega al realizar click prolongado sobre el icono de la App muestra en la parte superior derecha la cantidad de notificaciones activas:

Es posible cambiar el número de elementos que representa una notificación con el método setNumber(). Aspecto que será de utilidad si estás realizando una agrupación de notificaciones a partir de un resumen general de su cantidad.

Por ejemplo:

Proyectar la publicación de 3 nuevos tutoriales con tan solo una notificación y actualizar el menú de las insignias con esta cantidad:

fun createNotificationWithBadgeNumber(context: Context) {
    val channelId = "${context.packageName}.channels.Tutoriales"

    val notification = NotificationCompat.Builder(context, channelId)
        .setSmallIcon(R.drawable.ic_tutorial)
        .setContentTitle("¡Nuevo tutorial publicado!")
        .setContentText("Hay 3 nuevos tutoriales")
        .setNumber(3)
        .addAction(0, "Ver más tarde", null)
        .build()

    showNotification(context, notification, 3)
}

El resultado sería:

---

Modificar Icono Del Menú De Insignias

Cada notificación mostrada en el menú de insignias muestra en su layout el icono asociado a la notificación:

fun createTutorialNotification(context: Context) {
    val channelId = "${context.packageName}.channels.Tutoriales"
    val largeIcon = BitmapFactory.decodeResource(context.resources, R.drawable.develou)

    val notification = NotificationCompat.Builder(context, channelId)
        .setBadgeIconType(NotificationCompat.BADGE_ICON_SMALL)
        .setSmallIcon(R.drawable.ic_tutorial)
        .setLargeIcon(largeIcon)
        .setContentTitle("¡Nuevo tutorial publicado!")
        .setContentText("Insignias De Notificaciones En Android")
        .addAction(0, "Ver más tarde", null)
        .build()

    showNotification(context, notification, 1)
}

Para modificar su apariencia, usa el método setBadgeIconType() en la construcción de la notificación. Este recibe como argumento uno de los siguiente valores:

• BADGE_ICON_SMALL: Reemplaza la insignia por el icono proveído por setSmallIcon() en la construcción de la notificación.

• BADGE_ICON_LARGE: Usa el icono de setLargeIcon() como icono de la insignia. Este es el valor por defecto.

---

Más Contenidos Android

En este tutorial aprendiste a modificar las insignias de notificaciones que son presentados en el Launcher de tu dispositivo Android. Con esto concluimos la guía de notificaciones.

Dirígete a la página de tutoriales para interfaz de usuario en Android (todo) para ver más componentes visuales.

También puedes revisar la guía completa de desarrollo Android donde encontrarás todos los temas.

O ve y explora entre diferentes cursos online para certificar tus conocimientos.