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

Para que tus notificaciones se vean de la mejor manera en las diferentes versiones de Android, usa la plantilla de notificación estándar para compilarlas. Si tú quieres 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, mientras sigues usando decoraciones del sistema para el ícono de notificación, la marca de tiempo, el texto secundario 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ásico 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. Expande tu diseño personalizado como una instancia de RemoteViews.
4. Llama a setCustomContentView() para establecer el diseño de la notificación contraída.
5. De manera opcional, también llama a setCustomBigContentView() para establecer un diseño diferente para la notificación expandida.

Prepara los diseños

Necesitas un diseño small y large. Para este ejemplo, el diseño small podría verse así:

<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>
notification_small.xml

Y el diseño large podría verse así:

<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>
notification_large.xml

Compila y muestra la notificación

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

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)
CustomNotification.kt

Ten en cuenta que el color de fondo de la notificación puede variar según los dispositivos y las versiones. 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 termines 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 el texto podría volverse ilegible.

Cuando activas una notificación mientras el usuario usa una app, el resultado es similar a la figura 1:

Si presionas la flecha del expansor, se expande la notificación, como se muestra en la figura 2:

Una vez que se agota el tiempo de espera de la notificación, esta solo se muestra en la barra del sistema, que se ve como la figura 3:

Si presionas la flecha del expansor, se expande la notificación, como se muestra en la figura 4:

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

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