Creare un indicatore di avanzamento

Gli indicatori di avanzamento mostrano visivamente lo stato di un'operazione. Utilizzano il movimento per attirare l'attenzione dell'utente sulla fase di completamento del processo, ad esempio il caricamento o l'elaborazione dei dati. Possono anche indicare che l'elaborazione è in corso, senza fare riferimento a quanto manca al completamento.

Considera questi tre casi d'uso in cui potresti utilizzare un indicatore di avanzamento:

  • Caricamento di contenuti: durante il recupero di contenuti da una rete, ad esempio il caricamento di un'immagine o di dati per il profilo di un utente.
  • Caricamento file: fornisci all'utente un feedback sul tempo necessario per il caricamento.
  • Elaborazione lunga: mentre un'app elabora una grande quantità di dati, comunicate all'utente la percentuale di completamento del totale.

In Material Design esistono due tipi di indicatori di avanzamento:

  • Determinato: mostra esattamente il progresso compiuto.
  • Indeterminate: l'animazione viene visualizzata continuamente, indipendentemente dall'avanzamento.

Analogamente, un indicatore di avanzamento può avere una delle due seguenti forme:

  • Lineare: una barra orizzontale che si riempie da sinistra a destra.
  • Circolare: un cerchio il cui tratto aumenta di lunghezza fino a comprendere la circonferenza completa del cerchio.

Compatibilità delle versioni

Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.

Dipendenze

Creare determinati indicatori

Un determinato indicatore riflette esattamente il livello di completezza di un'azione. Utilizza i composabili LinearProgressIndicator o CircularProgressIndicator e passa un valore per il parametro progress.

Lo snippet seguente fornisce un esempio relativamente dettagliato. Quando l'utente preme il pulsante, l'app mostra l'indicatore di avanzamento e avvia una coroutine che aumenta gradualmente il valore di progress. Di conseguenza, l'indicatore di avanzamento viene visualizzato in ordine crescente.

Risultati

Quando il caricamento è parzialmente completato, l'indicatore lineare nell'esempio precedente viene visualizzato come segue:

Analogamente, l'indicatore circolare viene visualizzato come segue:

Crea indicatori indefiniti

Un indicatore indeterminato non riflette il livello di completamento di un'operazione. Utilizza piuttosto il movimento per indicare all'utente che l'elaborazione è in corso, anche se senza specificare alcun grado di completamento.

Per creare un indicatore di avanzamento indeterminato, utilizza il composable LinearProgressIndicator o CircularProgressIndicator, ma non passare un valore per progress. L'esempio seguente mostra come attivare/disattivare un indicatore indeterminato premendo un pulsante.

Risultati

Di seguito è riportato un esempio di questa implementazione quando l'indicatore è attivo:

Di seguito è riportato un esempio della stessa implementazione, ma conLinearProgressIndicator anziché CircularProgressIndicator.

Punti chiave

Sebbene esistano diversi composabili che puoi utilizzare per creare indicatori di avanzamento in linea con Material Design, i relativi parametri non differiscono molto. Tra i parametri chiave da tenere presenti, figurano i seguenti:

  • progress: l'avanzamento corrente visualizzato dall'indicatore. Passa un valore Float compreso tra 0.0 e 1.0.
  • color: il colore dell'indicatore, ovvero la parte del componente che riflette l'avanzamento e che lo racchiude completamente al termine dell'avanzamento.
  • trackColor: il colore del canale su cui viene disegnato l'indicatore.

Raccolte che contengono questa guida

Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:

Scopri come le funzioni composable possono aiutarti a creare facilmente magnifici componenti dell'interfaccia utente basati sul sistema di progettazione Material Design.
Elenchi e griglie consentono alla tua app di mostrare le raccolte in un formato piacevole dal punto di vista visivo e facilmente fruibile dagli utenti.

Domande o feedback

Visita la nostra pagina delle domande frequenti e scopri le guide rapide o contattaci per farci sapere cosa ne pensi.