Notificaciones BigStyle

Big Notifications Title Notification

Según la documentación de Google sobre Material Design:

Puedes decidir cuántos detalles mostrarán las notificaciones de tu aplicación. Las notificaciones pueden mostrar las primeras líneas de un mensaje o la vista previa de una imagen más grande.

A través de la información adicional, se proporciona más contexto al usuario y, en algunos casos, se puede permitir que el usuario lea todo el mensaje.

¿Cómo se utilizan?

I. En tu archivo build.gradle añade la última versión de la librería appcompat.

dependencies {  
    compile 'com.android.support:appcompat-v7:X.X.X' 
    // X.X.X especifica la versión
}

II. Obtén una instancia de NotificationCompat.Builder.

NotificationCompat.Builder builder =  
    new NotificationCompat.Builder(context);

III. Aplica un estilo a la notificación pasándole el NotificationCompat.Builder

final NotificationCompat.BigTextStyle style = new NotificationCompat.BigTextStyle(builder);  

IV. Configura el estilo concreto.

// Big Text Style
NotificationCompat.BigTextStyle style  
    = new NotificationCompat.BigTextStyle(builder);
// Big Picture Style
NotificationCompat.BigPictureStyle style  
    = new NotificationCompat.BigPictureStyle(builder);
// Inbox Style
NotificationCompat.InboxStyle style  
    = new NotificationCompat.InboxStyle(builder);

V. Construye una Notification usando el NotificationCompat.Builder

Notification notification = builder  
    .setContentTitle("Title")
    .setContentText("This is a notification!")
    .setSmallIcon(R.drawable.ic_notifications_white_small)
    .build();

VI. Muestra la Notification con el método notify del NotificationManagerCompat asignándole un id de tu elección.

NotificationManagerCompat notificationManager =  
    NotificationManagerCompat.from(context);

notificationManager.notify(0x1234, notification);  

Nota: El título, el texto y el icono pequeño son obligatorios para que la notificación pueda mostrarse.

Big Text Style

Big Text Style Compressed Notification

I. Aplica el estilo llamando a NotificationCompat.BigTextStyle

NotificationCompat.BigTextStyle style =  
    new NotificationCompat.BigTextStyle(builder);

II. Añade el texto grande que quieras ponerle a la forma expandida.

style.bigText("The path of..." /* texto largo aquí */ );  

NOTA: Para la forma comprimida se mostrará el texto configurado con el método setContentText de NotificationCompat.Builder.

III. Utiliza el método setBigContentTitle de NotificationCompat.BigTextStyle si quieres un título diferente para la forma expandida.

style.bigText("The path of..." /* texto largo aquí */)  
     .setBigContentTitle("Expanded title");

NOTA: Si este método no se utiliza se utilizara como título el valor asignado al método setContentTitle de NotificationCompat.Builder.

IV. Añade si quieres un sumario al final de la notificación expandida.

style.bigText("The path of..." /* texto largo aquí */ )  
     .setBigContentTitle("Expanded title")
     .setSummaryText("Summary text");

NOTA: BigTextStyle se usa para mostrar grandes cantidades de texto. Aproximadamente su cuerpo puede albergar unos 450 caracteres. El resto del texto se cortará sin usar una elipsis.

Big Picture Style

Big Picture Style Expanded

I. Crea una instancia de NotificationCompat.BigPictureStyleque toma como parámetro un objeto NotificationCompat

NotificationCompat.BigPictureStyle style  
    = new NotificationCompat.BigPictureStyle(builder);

NOTA Para consultar como se utilizan las instancias de NotificationCompat.Builder echa un vistazo al artículo de notificaciones básicas.

II. Añade la imágen que quieras poner para el formato expandido. El formato que acepta BigPictureStyle.bigPicture es Bitmap.

style.bigPicture(BitmapFactory.decodeResource(getResources(), R.drawable.conga));  

III. Añade un nuevo LargeIcon si quieres cambiarlo. En otro caso se utilizará el que hayas definido en NotificationCompat.Builder.setLargeIcon(Bitmap).

style.bigPicture(  
     BitmapFactory.decodeResource(
         getResources(), R.drawable.conga))

    .bigLargeIcon(
         BitmapFactory.decodeResource(
             getResources(), R.drawable.koala_avatar));

IV. Añade un nuevo título para la notificación expandida.

style.bigPicture(  
    BitmapFactory.decodeResource(
        getResources(), R.drawable.conga))

    .bigLargeIcon(
        BitmapFactory.decodeResource(
            getResources(), R.drawable.koala_avatar))

    .setBigContentTitle("Expanded title")

V. Añade un texto que resuma la información de la notificación.

style.bigPicture(  
    BitmapFactory.decodeResource(
        getResources(), R.drawable.conga));

   .bigLargeIcon(
        BitmapFactory.decodeResource(
             getResources(), R.drawable.koala_avatar));

   .setBigContentTitle("Expanded title")
   .setSummaryText("Summary text");

NOTA: BigPictureStyle se utiliza para mostrar contenido rico en imágenes. Los límites de la imagen es la longitud del teléfono en anchura por 256dp de altura. El resto de la imagen se recortará con un cropCenter.

Inbox Style

I. Aplica el estilo llamando a NotificationCompat.BigPictureStyle.

NotificationCompat.BigPictureStyle style =  
    new NotificationCompat.BigPictureStyle(builder);

II. Añade tantas líneas a la notificación como necesites.

style.addLine("This is line #" + i);  

III. Añade si quieres un título diferente para la forma expandida con el método setBigContentTitle.

style.addLine("This is line #" + i)  
    .setBigContentTitle("Expanded title");

IV. Añade si quieres un sumario al final de la notificación expandida.

style.addLine("This is line #" + i)  
    .setBigContentTitle("Expanded title")
    .setSummaryText("Summary text");

NOTA: El Inbox Style permite que una notificación se componga de varias líneas con texto corto. Este estilo acepta hasta 7 líneas. Por encima de esas líneas, la notificación provocará una elipsis con una linea adicional con "..."

Trucos y buenas prácticas

I. Las guías insisten en que cada app debería producir una única notificación para no copar la lista de notificaciones. Utiliza InboxStyle para fusionar varias notificaciones en una sola y evitar eso sin renunciar al histórico.

II. Las notificaciones expandidas se verán automáticamente cuando la lista de notificaciones esté vacía, en otro caso se mostrará la versión comprimida aunque el usuario pueda expandirlas a voluntad. Asegurate de que jugar con el LargeIcon y el BigPictureStyle para picar la curiosidad de tu usuario en ambos casos.

III. Si tu notificación no requiere de imágenes y solo hay una, utiliza por defecto un BigTextStyle para asegurarte de que acomodas el máximo texto y proporcionas a tu usuario el máximo contexto.

Errores de compatibilidad

I. Las notificaciones tienen otro aspecto en Holo.

II. Las notificaciones expandidas están disponibles únicamente a partir de Jelly Bean 4.1 (API 16). El soporte anterior está limitado a notificaciones clásicas.