Créer un indicateur de progression

Les indicateurs de progression affichent visuellement l'état d'une opération. Ils utilisent le mouvement pour attirer l'attention de l'utilisateur sur le degré d'avancement du processus, par exemple le chargement ou le traitement de données. Ils peuvent également indiquer que le traitement est en cours, sans référence à son achèvement.

Voici trois cas d'utilisation dans lesquels vous pouvez utiliser un indicateur de progression:

  • Chargement de contenu: lors de la récupération de contenu à partir d'un réseau, par exemple lors du chargement d'une image ou de données pour un profil utilisateur.
  • Importation de fichier: indiquez à l'utilisateur la durée approximative de l'importation.
  • Traitement long: lorsqu'une application traite une grande quantité de données, indiquez à l'utilisateur la part du total qui est terminée.

Dans Material Design, il existe deux types d'indicateurs de progression:

  • Déterminer: indique exactement la progression.
  • Indéterminée: s'anime continuellement, sans tenir compte de la progression.

De même, un indicateur de progression peut se présenter sous l'une des deux formes suivantes:

  • Linéaire: barre horizontale qui se remplit de gauche à droite.
  • Circulaire: cercle dont le trait s'allonge jusqu'à ce qu'il englobe toute la circonférence.

Compatibilité des versions

Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.

Dépendances

Créer des indicateurs déterminés

Un indicateur déterminé reflète exactement le niveau d'avancement d'une action. Utilisez les composables LinearProgressIndicator ou CircularProgressIndicator et transmettez une valeur pour le paramètre progress.

L'extrait de code suivant fournit un exemple relativement détaillé. Lorsque l'utilisateur appuie sur le bouton, l'application affiche à la fois l'indicateur de progression et lance une coroutine qui augmente progressivement la valeur de progress. L'indicateur de progression s'itère alors à la hausse.

Résultats

Lorsque le chargement est partiellement terminé, l'indicateur linéaire de l'exemple précédent s'affiche comme suit:

De même, l'indicateur circulaire s'affiche comme suit:

Créer des indicateurs indéterminés

Un indicateur indéterminé ne reflète pas le degré d'avancement d'une opération. Il utilise plutôt le mouvement pour indiquer à l'utilisateur que le traitement est en cours, mais sans spécifier de degré d'avancement.

Pour créer un indicateur de progression indéterminé, utilisez le composable LinearProgressIndicator ou CircularProgressIndicator, mais ne transmettez pas de valeur pour progress. L'exemple suivant montre comment activer/désactiver un indicateur indéterminé en appuyant sur un bouton.

Résultats

Voici un exemple de cette implémentation lorsque l'indicateur est actif:

Vous trouverez ci-dessous un exemple de la même implémentation, mais avec LinearProgressIndicator au lieu de CircularProgressIndicator.

Points essentiels

Bien qu'il existe plusieurs composables que vous pouvez utiliser pour créer des indicateurs de progression conformes à Material Design, leurs paramètres ne diffèrent pas beaucoup. Voici quelques-uns des paramètres clés à prendre en compte:

  • progress: progression actuelle affichée par l'indicateur. Transmettez un Float compris entre 0.0 et 1.0.
  • color: couleur de l'indicateur, c'est-à-dire la partie du composant qui reflète la progression et qui l'englobe entièrement lorsque la progression est terminée.
  • trackColor: couleur du tracé sur lequel l'indicateur est dessiné.

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:

Découvrez comment les fonctions composables peuvent vous permettre de créer facilement de beaux composants d'interface utilisateur basés sur le système de conception Material Design.
Les listes et les grilles permettent à votre application d'afficher des collections sous une forme visuellement attrayante et facile à utiliser pour les utilisateurs.

Vous avez des questions ou des commentaires ?

Consultez notre page des questions fréquentes et découvrez les guides rapides, ou contactez-nous pour nous faire part de vos commentaires.