Crea una notificación centrada en el progreso

Notificación centrada en el progreso del panel superior
Figura 1: Es una notificación centrada en el progreso que se muestra en la parte superior del panel.

Android 16 presenta una nueva plantilla de notificación para ayudar a los usuarios a hacer un seguimiento sin problemas de los viajes de extremo a extremo 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 el uso compartido de viajes, la entrega y la navegación. Dentro de esa clase, puedes denotar estados y etapas importantes en el recorrido del usuario con puntos y segmentos.

Clases pertinentes

Las siguientes clases contienen las diferentes APIs que usas para crear 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: Hora

Notification.Builder#setWhen()

C. Título del contenido

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 del vehículo para el ícono del dispositivo de rastreo y usar segmentos y puntos para indicar la experiencia de viaje compartido y los hitos.

Prácticas recomendadas

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

  • Establece los campos correctos para cumplir con la visibilidad promocionada 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 "Propina" y "Agregar plato" a un pedido de comida a domicilio recién iniciado son acciones útiles antes de la entrega.
  • Usa segmentos y puntos para denotar estados. Por ejemplo, los segmentos pueden colorear el estado y la duración del tráfico en un viaje de uso compartido. Los puntos representan estados para los hitos, como la preparación de la comida, la entrega y la recogida de pasajeros.
  • Actualiza la experiencia de progreso para reflejar con precisión el avance real del recorrido. Por ejemplo, los cambios en las condiciones del tráfico pueden reflejarse en los cambios en los colores de los tramos y las actualizaciones en el texto.

En el siguiente fragmento de código, se muestra cómo se podría usar una notificación de ProgressStyle en el contexto de un 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][8]{:.external} para experimentar con estas APIs.