Cómo crear un diseño de notificación personalizado

A fin de garantizar que tus notificaciones se vean lo mejor posible en las diferentes versiones de Android, siempre deberías usar la plantilla de notificación estándar para compilarlas. Sin embargo, si las plantillas del sistema no se adaptan a tus necesidades, puedes crear tu propio diseño para la notificación.

Si deseas proporcionar más contenido en tu notificación, procura usar una de las plantillas de notificación expandibles en lugar de compilar un diseño personalizado.

Precaución: Cuando uses un diseño de notificación personalizado, presta especial atención a fin de garantizar que este funcione en las diferentes orientaciones y resoluciones de los dispositivos. Si bien este consejo se aplica a todos los diseños de IU, es particularmente importante para las notificaciones porque el espacio del panel lateral de notificaciones es muy limitado. La altura disponible para un diseño de notificación personalizado depende de la vista de la notificación. Por lo general, el límite de los diseños de vista contraída es de 64 dp y el de los de vista expandida es de 256 dp.

Cómo crear un diseño personalizado para el área de contenido

Si necesitas un diseño personalizado, puedes aplicar NotificationCompat.DecoratedCustomViewStyle a tu notificación. Esta API te permite proporcionar un diseño de vista personalizado para el área de contenido que, por lo general, ocupa el título y el contenido del texto, y al mismo tiempo usar decoraciones el sistema para el ícono de notificación, la marca de tiempo, el subtexto y los botones de acciones.

Esta API funciona de manera similar a las plantillas de notificación expandibles, ya que puedes compilar sobre el diseño de una notificación básica de la siguiente manera:

  1. Crea una notificación básica con NotificationCompat.Builder.
  2. Llama a setStyle() y pasa una instancia de NotificationCompat.DecoratedCustomViewStyle.
  3. Aumenta tu diseño personalizado como una instancia de RemoteViews.

  4. Llama a setCustomContentView() para configurar el diseño de la notificación contraída.

    De manera opcional, también puedes llamar a setCustomBigContentView() a fin de configurar diferentes diseños para la notificación expandida.

Por ejemplo:

Kotlin

    // Get the layouts to use in the custom notification
    val notificationLayout = RemoteViews(packageName, R.layout.notification_small)
    val notificationLayoutExpanded = RemoteViews(packageName, R.layout.notification_large)

    // Apply the layouts to the notification
    val customNotification = NotificationCompat.Builder(context, CHANNEL_ID)
            .setSmallIcon(R.drawable.notification_icon)
            .setStyle(NotificationCompat.DecoratedCustomViewStyle())
            .setCustomContentView(notificationLayout)
            .setCustomBigContentView(notificationLayoutExpanded)
            .build()

Java

    // Get the layouts to use in the custom notification
    RemoteViews notificationLayout = new RemoteViews(getPackageName(), R.layout.notification_small);
    RemoteViews notificationLayoutExpanded = new RemoteViews(getPackageName(), R.layout.notification_large);

    // Apply the layouts to the notification
    Notification customNotification = new NotificationCompat.Builder(context, CHANNEL_ID)
            .setSmallIcon(R.drawable.notification_icon)
            .setStyle(new NotificationCompat.DecoratedCustomViewStyle())
            .setCustomContentView(notificationLayout)
            .setCustomBigContentView(notificationLayoutExpanded)
            .build();

Ten en cuenta que el color de fondo de la notificación puede variar entre los diferentes dispositivos y versiones. Por lo tanto, siempre debes aplicar estilos de la biblioteca de compatibilidad como TextAppearance_Compat_Notification para el texto y TextAppearance_Compat_Notification_Title en el título de tu diseño personalizado. Estos estilos se adaptan a las variaciones de color de manera que no aparezca texto negro en un fondo negro ni texto blanco en un fondo blanco. Por ejemplo:

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="@string/notification_title"
        android:id="@+id/notification_title"
        style="@style/TextAppearance.Compat.Notification.Title" />

Además, evita configurar una imagen de fondo en el objeto RemoteViews, ya que es posible que el color del texto no sea legible.

Cómo crear un diseño de notificación totalmente personalizado

Si no quieres que tu notificación incluya el ícono ni el encabezado de una notificación estándar, sigue los pasos que aparecen más arriba a fin de usar setCustomBigContentView(), pero no llames a setStyle().

Para admitir versiones posteriores a Android 4.1 (API nivel 16), también deberás llamar a setContent() y pasar el mismo objeto RemoteViews.

Para ver más códigos de ejemplo que usan notificaciones, consulta este ejemplo de notificaciones de Android.