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

Para que tus notificaciones se vean lo mejor posible en las diferentes versiones de Android, usa la plantilla de notificaciones estándar a fin de compilarlas. Si deseas proporcionar más contenido en tu notificación, considera usar una de las plantillas de notificación expandibles.

Sin embargo, si las plantillas del sistema no satisfacen tus necesidades, puedes usar tu propio diseño para la notificación.

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 personalizado para el área de contenido que normalmente ocupa el título y el contenido de texto, y, al mismo tiempo, usar decoraciones del sistema para el ícono de notificación, la marca de tiempo, el subtexto y los botones de acción.

Esta API funciona de manera similar a las plantillas de notificación expandibles, ya que se basa en el diseño de notificación básica de la siguiente manera:

  1. Compila una notificación básica con NotificationCompat.Builder.
  2. Llama a setStyle() y pásale 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.
  5. De manera opcional, también puedes llamar a setCustomBigContentView() a fin de establecer un diseño diferente para la notificación expandida.

Cómo preparar los diseños

Necesitas un diseño de small y large. Para este ejemplo, el diseño de small podría verse de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/notification_title"
        style="@style/TextAppearance.Compat.Notification.Title"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Small notification, showing only a title" />
</LinearLayout>

Y el diseño de large podría verse de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/notification_title"
        style="@style/TextAppearance.Compat.Notification.Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Large notification, showing a title and a body." />

    <TextView
        android:id="@+id/notification_body"
        style="@style/TextAppearance.Compat.Notification.Line2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="This is the body. The height is manually forced to 300dp." />
</LinearLayout>

Compila y muestra la notificación

Una vez que los diseños estén listos, puedes usarlos como se muestra en el siguiente ejemplo:

Kotlin

val notificationManager = getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager

// 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()

notificationManager.notify(666, customNotification)

Java

NotificationManager notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);

// 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();

notificationManager.notify(666, customNotification);

Ten en cuenta que el color de fondo de la notificación puede variar según el dispositivo y la versión. Aplica estilos de la biblioteca de compatibilidad, como TextAppearance_Compat_Notification para el texto y TextAppearance_Compat_Notification_Title para el título en tu diseño personalizado, como se muestra en el siguiente ejemplo. Estos estilos se adaptan a las variaciones de color para que no termine con texto negro sobre negro o blanco sobre blanco.

<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" />

Evita configurar una imagen de fondo en tu objeto RemoteViews, ya que es posible que el texto no se pueda leer.

Cuando activas una notificación mientras el usuario usa una app, el resultado es similar al de la Figura 1:

Una imagen que muestra una notificación contraída
Figura 1: Aparecerá un pequeño diseño de notificación mientras se usan otras apps.

Cuando se presiona la flecha de expansión, se expande la notificación, como se muestra en la figura 2.

Una imagen que muestra una notificación expandida en la barra del sistema
Figura 2: Aparecerá un diseño de notificación grande mientras se usan otras apps.

Una vez que se agote el tiempo de espera de la notificación, solo se podrá ver la notificación en la barra del sistema, que es similar a la Figura 3:

Una imagen que muestra una notificación contraída en la barra del sistema
Figura 3: Cómo aparece el diseño de notificación pequeña en la barra del sistema

Cuando se presiona la flecha de expansión, se expande la notificación, como se muestra en la figura 4.

Una imagen que muestra una notificación expandida en la barra del sistema
Figura 4: Aparecerá un diseño de notificación grande en la barra del sistema.

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

Si no quieres que tu notificación se decore con el ícono ni el encabezado de la notificación estándar, sigue los pasos anteriores, pero no llames a setStyle().