Usar Plantillas Para Notificaciones

Las plantillas para notificaciones son clases de estilo que se usan frecuentemente en Apps Android. Estas te facilitan la construcción de estructuras visuales desde el mismo builder de la notificación con el método setStyle().

En este tutorial verás cómo usar las siguientes plantillas:

• Texto largo
• Imagen grande
• Controles multimedia
• Bandeja de entrada
• Conversación
• Progreso

Nota: Este es el cuarto tutorial de la guía de notificaciones, por lo que te recomiendo leer las partes anteriores para comprender sobre la creación, manejo y configuración de notificaciones.

---

Ejemplo De Plantillas Para Notificaciones

Con el fin de experimentar las plantillas para notificaciones, creamos un nuevo módulo en el proyecto Android Studio llamado P4_Plantillas. Puedes descargar el código final desde el siguiente enlace:

Al abrir el módulo verás que se simplificó el lanzamiento de cada notificación añadiendo un Spinner al layout de la actividad principal. Y que las opciones de este, serán los estilos a proyectar cuando el botón existente sea presionado.

Con esto en mente, comencemos con la primera plantilla.

---

Notificación Con Texto Largo

Esta plantilla te permite crear una notificación que despliega grandes cantidades de texto cuando se expande:

Usa la clase auxiliar NotificationCompat.BigTextStyle y sus métodos de configuración para generar el estilo.

Por ejemplo:

Aplicamos esta plantilla para dotar a nuestra notificación básica de nuevos tutoriales con la revelación de su descripción SEO:

fun createBigTextNotification(context: Context) {
    val resources = context.resources

    val title = "Plantillas Para Notificaciones"
    val description = resources.getString(R.string.post_big_text)
    val bigTextStyle = NotificationCompat.BigTextStyle() // (1)
        .setBigContentTitle(title) // (2)
        .setSummaryText("Android") // (3)
        .bigText(description) // (4)

    val notification = NotificationCompat.Builder(context, CHANNEL_ID)
        .setSmallIcon(R.drawable.ic_circle_notifications)
        .setContentTitle(title)
        .setContentText(description)
        .setStyle(bigTextStyle) // (5)
        .build()

    showNotification(context, notification)
}

El código anterior:

1. Creamos un objeto del tipo BigTextStyle con su constructor público
2. Establecemos el título de la sección de contenido con setBigContentTitle(). Este valor es equivalente al valor usado en setContentTitle() del builder de la notificación. No obstante, seguiremos usándolo para sostener compatibilidad con versiones inferiores al nivel de SDK 16.
3. Usamos setSummaryText() para asignar el texto de la cabecera. Misma acción que realiza setSubText() de la notificación.
4. Asignamos el texto largo que será mostrado cuando se expanda la notificación con bigText()
5. Aplicamos al objeto de estilo bigTextStyle en el builder de la notificación con setStyle()

---

Notificación Con Imagen Grande

De forma similar al desplegar más texto, también podemos aplicarlo con imágenes. Es decir, mostrar una vista previa más grande de la miniatura en una notificación:

Lograr este efecto al expandir lo consigues con plantilla NotificationCompat.BigPictureStyle.

Por ejemplo:

Mostremos una notificación hipotética donde un amigo de una red social ha publicado una foto:

fun createBigPictureNotification(context: Context) {
    val forestBitmap = BitmapFactory.decodeResource( // (1)
        context.resources,
        R.drawable.forest
    )
    val bigPictureStyle = NotificationCompat.BigPictureStyle() // (2)
        .bigPicture(forestBitmap) // (3)
        .bigLargeIcon(null) // (4)

    val notification = NotificationCompat.Builder(context, CHANNEL_ID)
        .setSmallIcon(R.drawable.ic_image_published)
        .setLargeIcon(forestBitmap) // (5)
        .setContentTitle("Miguel ha subido una foto")
        .setContentText("¡Hermoso!")
        .addAction(0, "Comentar", null)
        .setStyle(bigPictureStyle) // (6)
        .build()

    showNotification(context, notification)
}

En el código anterior:

1. Creamos un objeto Bitmap a partir de un recurso drawable. En un caso de uso real, la imagen vendría del servidor donde esté alojado el servicio que maneja las interacciones sociales
2. Creamos un objeto BigPictureStyle con su constructor público
3. Designamos la imagen grande que actuará como vista previa con bigPicture()
4. Sobreescribimos el icono grande del contenido con bigLargeIcon(). Pasamos null como argumento para remover su aparición al ser expandida la notificación
5. Asignamos el icono grande con setLargeIcon() como de costumbre para mostrar la miniatura de la imagen en el estado de contracción
6. Finalizamos asignando la plantilla con setStyle()

---

Notificación Con Controles Multimedia

Es estilo multimedia despliega hasta tres acciones para los controles de reproducción y un espacio para una miniatura relacionada al elemento actual:

Si quieres aplicar este formato, entonces usa la clase NotificationCompat.MediaStyle. A fin de acceder a esta clase, debes añadir la siguiente dependencia con su última versión en tu archivo build.gradle del módulo:

dependencies {
    // MediaStyle
    implementation "androidx.media:media:ultima-version"

    //...
}

Debido a que su nombre produce una colisión con NotificationCompat del androidx.core, usaremos el siguiente alias en el import:

import androidx.media.app.NotificationCompat as MediaNotificationCompat

Con esto, ya es posible crear la notificación con estilo de reproductor de la siguiente forma:

fun createMediaNotification(context: Context) {
    val albumCoverBitmap = BitmapFactory.decodeResource( // (1)
        context.resources,
        R.drawable.album_cover
    )
    val mediaStyle = MediaNotificationCompat.MediaStyle() // (2)
        .setShowActionsInCompactView(1, 2, 3) // (3)

    val notification = NotificationCompat.Builder(context, CHANNEL_ID)
        .setVisibility(NotificationCompat.VISIBILITY_PUBLIC) // (4)
        .setSmallIcon(R.drawable.ic_music)
        .addAction(R.drawable.ic_thumb_down, "No me gusta", null) // (5)
        .addAction(R.drawable.ic_previous, "Anterior", null)
        .addAction(R.drawable.ic_pause, "Pausa", null)
        .addAction(R.drawable.ic_next, "Siguiente", null)
        .addAction(R.drawable.ic_thumb_up, "Me gusta", null)
        .setStyle(mediaStyle) // (6)
        .setContentTitle("Music Festival")
        .setContentText("01. Peace melody")
        .setLargeIcon(albumCoverBitmap) // (7)
        .build()

    showNotification(context, notification)
}

El código anterior consta de:

1. Creamos un Bitmap para la imagen asociada a la reproducción. En este caso usaremos un cover de un albúm de música
2. Creamos un objeto MediaStyle con su constructor público
3. Determinamos los índices de las acciones que serán mostradas en la vista contraída de la notificación con el métodosetShowActionsInCompactView() . Ya que son cinco, tomaremos a «Anterior», «Pausar» y «Siguiente»
4. Establecemos la visibilidad pública para mostrar los controles de reproducción en la pantalla de bloqueo
5. Añadimos las acciones para controlar la reproducción con addAction().
6. Asignamos el estilo multimedia
7. Determinamos el icono grande para que el estilo difumina su aparición en un gradiente asociado al background de la notificación

---

Notificación Con Bandeja De Entrada

La utilidad de este estilo es mostrar hasta seis líneas de texto en la notificación, para proyectar el resumen de múltiples elementos:

La clase NotificationCompat.InboxStyle será la que te permite añadir las líneas del resumen:

fun createInboxNotification(context: Context) {
    val inboxStyle = NotificationCompat.InboxStyle() // (1)
        .addLine("Maria12f:  ¿El USB es 3.0?") // (2)
        .addLine("FerM:  ¿Tienen unidades disponibles?")
        .addLine("Villegaz_a:  Necesito 30 unidades, ¿es posible?")
        .addLine("Albeiro83:  ¿En donde están ubicados?")

    val notification = NotificationCompat.Builder(context, CHANNEL_ID)
        .setSmallIcon(R.drawable.ic_new_questions)
        .setContentTitle("Tienes 4 preguntas sobre \"Mouse USB\"")
        .setContentText("Posibles clientes están esperándote")
        .setStyle(inboxStyle) // (3)
        .build()

    showNotification(context, notification)
}

El código anterior:

1. Creamos el objeto InboxStyle
2. Invocamos al método addLine() para insertar la cantidad de líneas que serán proyectadas
3. Asignamos el estilo de bandeja de entrada

---

Notificación Con Conversación

Si tienes una característica de mensajería en tu App, entonces la plantilla de conversación te vendrá muy bien para mostrar múltiples líneas compuestas por el nombre del remitente y su mensaje:

Añade este flujo de comunicación en tiempo real con la clase de utilidad NotificationCompat.MessagingStyle:

fun createMessagingNotification(context: Context) {
    val fernanda = Person.Builder().setName("Fernanda Montes").build() // (1)
    val me = Person.Builder().setName("Yo").build()

    val message1 = NotificationCompat.MessagingStyle.Message( // (2)
        "Hola, recuerda que mañana es nuestra reunión",
        Calendar.getInstance().timeInMillis,
        fernanda
    )
    val message2 = NotificationCompat.MessagingStyle.Message(
        "Hola, vale",
        Calendar.getInstance().timeInMillis,
        me
    )
    val message3 = NotificationCompat.MessagingStyle.Message(
        "Asegúrate de traer tus documentos",
        Calendar.getInstance().timeInMillis,
        fernanda
    )

    val messagingStyle = NotificationCompat.MessagingStyle(me) // (3)
        .addMessage(message1)// (4)
        .addMessage(message2)
        .addMessage(message3)
    val notification = NotificationCompat.Builder(context, CHANNEL_ID)
        .setSmallIcon(R.drawable.ic_new_message)
        .setStyle(messagingStyle) // (5)
        .build()
    showNotification(context, notification)
}

El código anterior:

1. Creamos dos participantes para la comunicación en tiempo a partir de la clase Person del framework. Usamos su builder con el objetivo de añadir solo el nombre para cada persona con setName(). Sin embargo, puedes añadir más atributos como icono, URI, clave, etc.
2. Creamos tres mensajes para probar el contenido de la notificación. Usa la clase Message y pásale como estado inicial el String de mensaje, el momento en milisegundos en que ocurrió y al remitente
3. Creamos un objeto MessagingStyle
4. Añadimos cada mensaje con addMessage()
5. Aplicamos el estilo de notificación con conversación

Nota: Es posible agregar una acción para contestar directamente desde la notificación. La guía oficial te explica los pasos para ello.

---

Notificación Con Progreso

En el caso que desees mostrar una barra de progreso para una operación de larga duración en segundo plano, existe una propiedad que le permite a la notificación proyectar una ProgressBar:

A diferencias de los estilos anteriores, el progreso puede establecerse con el método setProgress(), el cual recibe tres parámetros: el progreso máximo, el progreso actual y un booleano que determina si es determinado o indeterminado:

fun createProgressNotification(context: Context) {
    val notification = NotificationCompat.Builder(context, CHANNEL_ID)
        .setSmallIcon(R.drawable.ic_devices)
        .setContentTitle("Buscando recursos")
        .setProgress(0, 0, true)
        .addAction(0, "Cancelar", null)
        .build()

    showNotification(context, notification)
}

Claramente es necesario que sostengas el ID de la notificación para actualizarla cada vez que su progreso cambie.

Por otro lado, si deseas expresar que ya se terminó el trabajo realizado, desapareciendo la barra de progreso, entonces muestra la notificación pero con setProgress(0, 0, false).

---

Badges De Notificación

En este tutorial aprendiste sobre el uso de plantillas para notificaciones en Android con el objetivo de agilizar la construcción de patrones visuales que se utilizan con regularidad.

Terminaremos esta guía explorando la modificación la aparición de views de insignia (badges) (todo) asociados a nuestras notificaciones.

---

Más Contenidos Android

• Configuración de notificaciones
• Guía de desarrollo Android
• Cursos de desarrollo Android