Créer une notification axée sur la progression

Notification axée sur la progression dans la partie supérieure de l'écran
Figure 1. Notification axée sur la progression en haut du panneau.

Android 16 introduit un nouveau modèle de notification pour aider les utilisateurs à suivre facilement les parcours qu'ils ont initiés, du début à la fin. Ces notifications sont devenues plus visibles sur les surfaces système et sont classées en tête du panneau des notifications.

Utilisez Notification.ProgressStyle pour styliser les notifications axées sur la progression. Les principaux cas d'utilisation incluent le covoiturage, la livraison et la navigation. Dans cette classe, vous pouvez indiquer les états et les étapes d'un parcours utilisateur à l'aide de points et de segments.

Classes pertinentes

Les classes suivantes contiennent les différentes API que vous utilisez pour créer une notification ProgressStyle :

Anatomie et personnalisation

Les images suivantes montrent les différentes parties qui composent les notifications ProgressStyle :

Figure 2.

A. En-tête – Sous-texte

Notification.Builder#setSubText()

B. En-tête – Heure

Notification.Builder#setWhen()

C. Titre du contenu

Notification.Builder#setContentTitle()

D. Texte du contenu

Notification.Builder#setContentText()

E. Barre de progression

Notification.ProgressStyle

F. Bouton d'action

Notification.Builder#addAction()
Figure 3. Les applications peuvent définir une image de véhicule pour l'icône de suivi et utiliser des segments et des points pour indiquer l'expérience de covoiturage et les étapes.

Bonnes pratiques

Utilisez les bonnes API et suivez les bonnes pratiques pour offrir la meilleure expérience utilisateur possible pour les mises à jour de progression.

  • Définissez les bons champs pour répondre à la visibilité promue dans le volet des notifications.
  • Utilisez les bons éléments visuels pour guider les utilisateurs. Par exemple, les applications de covoiturage doivent définir une image de véhicule et utiliser la couleur la plus précise du véhicule dans la notification à l'aide de Notification#setLargeIcon.
  • Utilisez un langage clair et concis pour définir la progression du parcours utilisateur. L'heure d'arrivée, le nom du conducteur et l'état du trajet sont des informations importantes que la notification doit communiquer.
  • Fournissez des actions utiles et pertinentes dans la notification qui simplifient le parcours utilisateur. Par exemple, fournir les actions "Laisser un pourboire" et "Ajouter un plat" à une commande de livraison de repas nouvellement lancée sont des actions utiles avant la livraison.
  • Utilisez des segments et des points pour indiquer les états. Par exemple, les segments peuvent colorer l'état et la durée du trafic lors d'un trajet en covoiturage. Les points représentent les états des étapes telles que la préparation des aliments, la livraison et la prise en charge des passagers.
  • Mettez à jour l'expérience de progression pour refléter avec précision la progression réelle du trajet. Par exemple, les changements dans les conditions de circulation peuvent être reflétés par des changements de couleur des segments et des mises à jour du texte.

L'extrait de code suivant montre comment une notification ProgressStyle peut être utilisée dans un contexte de covoiturage :

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

Consultez l'exemple d'application pour tester ces API.