Crea una notificación centrada en el progreso

notificación centrada en el progreso en la parte superior del panel
Figura 1: Una notificación centrada en el progreso en la parte superior del panel

Android 16 presenta una nueva plantilla de notificación para ayudar a los usuarios a hacer un seguimiento fluido de los viajes de principio a fin iniciados por el usuario. Estas notificaciones tienen una visibilidad mejorada en las plataformas del sistema y una clasificación superior en el panel lateral de notificaciones.

Usa Notification.ProgressStyle para estilizar las notificaciones centradas en el progreso. Entre los casos de uso clave, se incluyen los viajes compartidos, las entregas y la navegación. Dentro de esa clase, puedes indicar estados y eventos importantes en el recorrido del usuario con puntos y segmentos.

Clases pertinentes

Las siguientes clases contienen las diferentes APIs que usas para construir una notificación de ProgressStyle:

Anatomía y personalización

En las siguientes imágenes, se muestran las diferentes partes que componen las notificaciones de ProgressStyle:

Figura 2:

A. Encabezado: Subtexto

Notification.Builder#setSubText()

B. Encabezado: Tiempo

Notification.Builder#setWhen()

C. Content Title

Notification.Builder#setContentTitle()

D. Texto del contenido

Notification.Builder#setContentText()

E. Barra de progreso

Notification.ProgressStyle

F. Botón de acción

Notification.Builder#addAction()

Figura 3. Las apps pueden establecer una imagen de vehículo para el ícono de seguimiento y usar segmentos y puntos para indicar la experiencia de viaje compartido y los hitos.

Prácticas recomendadas

Usa las APIs correctas y sigue las prácticas recomendadas para proporcionar la mejor experiencia del usuario en las actualizaciones de progreso.

  • Establece los campos correctos para que la visibilidad de la notificación sea destacada en el panel de notificaciones.
  • Usa los elementos visuales adecuados para guiar a los usuarios. Por ejemplo, las apps de viajes compartidos deben establecer una imagen del vehículo y usar el color más preciso del vehículo en la notificación con Notification#setLargeIcon.
  • Usa un lenguaje claro y conciso para definir el progreso del recorrido del usuario. La hora de llegada, el nombre del conductor y el estado del viaje son textos importantes que debe comunicar la notificación.
  • Proporciona acciones útiles y pertinentes en la notificación que optimicen el recorrido del usuario. Por ejemplo, proporcionar las opciones "Propina" y "Agregar plato" a un pedido de entrega de comida recién iniciado son acciones útiles antes de la entrega.
  • Usa segmentos y puntos para indicar los estados. Por ejemplo, los segmentos pueden colorear el estado y la duración del tráfico en un viaje de transporte privado con conductor. Los puntos representan estados para hitos, como la preparación de comida, la entrega y la recogida de pasajeros.
  • Actualiza la experiencia de progreso para reflejar con precisión el avance real del viaje. Por ejemplo, los cambios en las condiciones de tráfico se pueden reflejar en cambios en los colores de los segmentos y actualizaciones en el texto.

En el siguiente fragmento de código, se muestra cómo se podría usar una notificación de ProgressStyle para un contexto de viaje compartido:

var ps =
    Notification.ProgressStyle()
        .setStyledByProgress(false)
        .setProgress(456)
        .setProgressTrackerIcon(Icon.createWithResource(appContext, R.drawable.ic_car_red))
        .setProgressSegments(
            listOf(
                Notification.ProgressStyle.Segment(41).setColor(Color.BLACK),
                Notification.ProgressStyle.Segment(552).setColor(Color.YELLOW),
                Notification.ProgressStyle.Segment(253).setColor(Color.WHITE),
                Notification.ProgressStyle.Segment(94).setColor(Color.BLUE)
            )
        )
        .setProgressPoints(
            listOf(
                Notification.ProgressStyle.Point(60).setColor(Color.RED),
                Notification.ProgressStyle.Point(560).setColor(Color.GREEN)
            )
        )

Consulta la app de ejemplo para experimentar con estas APIs.