Créer une notification axée sur la progression

notification de progression dans le volet supérieur
Figure 1. Notification axée sur la progression en haut du volet

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. Header - Subtext

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 API appropriées et suivez les bonnes pratiques pour offrir la meilleure expérience utilisateur possible pour les mises à jour de progression.

  • Définissez les champs appropriés pour répondre aux exigences de visibilité 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 du véhicule et utiliser la couleur la plus précise du véhicule dans la notification à l'aide de Notification#setLargeIcon.
  • Utilisez un langage concis et clair 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.
  • Proposez des actions utiles et pertinentes dans la notification pour simplifier le parcours utilisateur. Par exemple, proposer les options "Pourboire" et "Ajouter un plat" à une commande de livraison de repas qui vient d'être 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, comme la préparation des repas, la livraison et la prise en charge des passagers.
  • Mettez à jour l'expérience de progression pour refléter précisément la progression réelle du parcours. Par exemple, les changements de 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'application exemple pour tester ces API.