Criar um layout personalizado de notificação

Para que suas notificações tenham a melhor aparência em diferentes versões do Android, use o modelo de notificação padrão para criá-las. Se você quiser fornecer mais conteúdo na notificação, use um dos modelos de notificação expansíveis.

No entanto, se os modelos do sistema não atenderem às suas necessidades, use seu próprio layout para a notificação.

Criar layout personalizado para a área de conteúdo

Se você precisar de um layout personalizado, aplique NotificationCompat.DecoratedCustomViewStyle à sua notificação. Essa API permite fornecer um layout personalizado para a área de conteúdo normalmente ocupada pelo título e pelo conteúdo de texto, enquanto ainda usa decorações do sistema para o ícone de notificação, carimbo de data/hora, subtexto e botões de ação.

Essa API funciona de maneira semelhante aos modelos de notificação expansíveis, com base no layout de notificação básico da seguinte maneira:

  1. Crie uma notificação básica com NotificationCompat.Builder.
  2. Chame setStyle(), transmitindo uma instância de NotificationCompat.DecoratedCustomViewStyle.
  3. Inflate seu layout personalizado como uma instância de RemoteViews.
  4. Chame setCustomContentView() para definir o layout da notificação recolhida.
  5. Opcionalmente, chame setCustomBigContentView() para definir um layout diferente para a notificação expandida.

Preparar os layouts

Você precisa de um layout small e large. Para este exemplo, o layout small pode ser assim:

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

E o layout large pode ser assim:

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

Criar e mostrar a notificação

Depois que os layouts estiverem prontos, você poderá usá-los conforme mostrado no exemplo a seguir:

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)

A cor de plano de fundo da notificação pode variar entre dispositivos e versões. Aplique estilos da Biblioteca de Suporte, como TextAppearance_Compat_Notification para o texto e TextAppearance_Compat_Notification_Title para o título no layout personalizado, conforme mostrado no exemplo a seguir. Esses estilos se adaptam às variações de cor para que você não acabe com texto preto sobre preto ou branco sobre branco.

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

Evite definir uma imagem de plano de fundo no objeto RemoteViews, porque o texto pode ficar ilegível.

Quando você aciona uma notificação enquanto o usuário está usando um app, o resultado é semelhante à Figura 1:

Layout de notificação personalizada recolhido
Figura 1. Um layout de notificação pequeno aparece ao usar outros apps.

Tocar na seta do expansor expande a notificação, conforme mostrado na Figura 2:

Um layout de notificação personalizado aberto
Figura 2. Um layout de notificação grande aparece ao usar outros apps.

Depois que o tempo limite da notificação expirar, ela ficará visível apenas na barra de sistema, que se parece com a Figura 3:

Uma notificação recolhida na barra de sistema
Figura 3. Como o layout de notificação pequeno aparece na barra de sistema.

Tocar na seta do expansor expande a notificação, conforme mostrado na Figura 4:

Uma notificação aberta na barra de sistema
Figura 4. Um layout de notificação grande aparece na barra de sistema.

Criar um layout de notificação totalmente personalizado

Se você não quiser que a notificação seja decorada com o ícone e o cabeçalho de notificação padrão , siga as etapas anteriores, mas não chame setStyle().