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:
- Compila una notificación básica con
NotificationCompat.Builder
. - Llama a
setStyle()
y pásale una instancia deNotificationCompat.DecoratedCustomViewStyle
. - Aumenta tu diseño personalizado como una instancia de
RemoteViews
. - 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 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](https://developer.android.google.cn/static/images/ui/notifications/custom_notification_small_inapp.png?authuser=5&hl=es)
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](https://developer.android.google.cn/static/images/ui/notifications/custom_notification_large_inapp.png?authuser=5&hl=es)
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](https://developer.android.google.cn/static/images/ui/notifications/custom_notification_small_system.png?authuser=5&hl=es)
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](https://developer.android.google.cn/static/images/ui/notifications/custom_notification_large_system.png?authuser=5&hl=es)
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()
.