Panoramica dei widget delle app

I widget sono un aspetto essenziale della personalizzazione della schermata Home. Puoi immaginarle come visualizzazioni "riepilogative" dei dati e delle funzionalità più importanti di un'app, accessibili direttamente dalla schermata Home dell'utente. Gli utenti possono spostare i widget tra i riquadri della schermata Home e, se supportato, ridimensionarli per personalizzare la quantità di informazioni nel widget in base alle proprie preferenze.

Questa documentazione illustra i diversi tipi di widget che puoi creare e i principi di progettazione da seguire. Per creare un widget per app utilizzando le API Remote View e i layout XML, consulta Creare un widget semplice. Per creare un widget utilizzando le API di stile Kotlin e Compose, consulta Jetpack Glance.

Tipi di widget

Quando pianifichi il widget, pensa al tipo di widget che vuoi creare. I widget rientrano in genere in una delle seguenti categorie:

Widget di informazioni

Esempio di widget meteo che mostra Tokyo come prevalentemente
            nuvolosa, 14 gradi e la temperatura prevista dalle
            16:00 alle 19:00
Figura 1. Un widget informativo di un'app meteo.

I widget di informazioni in genere mostrano elementi di informazioni cruciali e monitorano come queste informazioni cambiano nel tempo. Esempi di widget informativi sono i widget meteo, i widget orologio o i widget di monitoraggio dei risultati sportivi. Toccando i widget di informazioni, in genere viene lanciata l'app associata e si apre una visualizzazione dettagliata delle informazioni del widget.

Widget di raccolta

I widget di raccolta sono specializzati nella visualizzazione di più elementi dello stesso tipo, come una raccolta di immagini di un'app galleria, una raccolta di articoli di un'app di notizie o una raccolta di email o messaggi di un'app di comunicazione. I widget di raccolta possono scorrere verticalmente.

I widget delle raccolte in genere si concentrano sui seguenti casi d'uso:

  • Sfogliare la raccolta.
  • Apertura di un elemento della raccolta nella relativa visualizzazione dei dettagli nell'app associata.
  • Interazione con gli elementi, ad esempio il loro contrassegno come completati, con il supporto dei pulsanti composti in Android 12 (livello API 31).

Controllare i widget

Un widget per un'app chiamata "Elenco luci", che mostra gli interruttori di attivazione/disattivazione etichettati come "Camera da letto", "Cucina" e "Salotto", con i primi due interruttori di attivazione/disattivazione disattivati
Figura 4. Esempio di un widget di controllo.

Lo scopo principale di un widget di controllo è visualizzare le funzioni utilizzate di frequente in modo che l'utente possa attivarle dalla schermata Home senza dover aprire l'app. Puoi considerarli come telecomandi per un'app. Un esempio di widget di controllo è un widget di controllo della casa che consente agli utenti di accendere o spegnere le luci di casa.

L'interazione con un widget di controllo potrebbe aprire una visualizzazione dei dettagli associata nell'app. Ciò dipende dal fatto che la funzione del widget di controllo invii o meno dati, come nel caso di un widget di ricerca.

Widget ibridi

Un'app di musica generica che mostra i pulsanti "Non mi piace", Indietro, Riproduci/Metti in pausa, Avanti e "Mi piace". L'artista e
            la traccia sono elencati rispettivamente come "Artista" e "Musica di esempio".
Figura 5. Esempio di widget di un'app musicale.

Sebbene alcuni widget rappresentino uno dei tipi elencati nelle sezioni precedenti (informazioni, raccolta o controllo), molti sono ibridi che combinano elementi di tipi diversi. Ad esempio, un widget di un player di musica è principalmente un widget di controllo, ma mostra all'utente anche la traccia attualmente in riproduzione, come un widget informativo.

Quando pianifichi il widget, progettalo in base a uno dei tipi di base e aggiungi elementi di altri tipi, se necessario.

Integrare i widget con l'Assistente Google

L'Assistente Google può mostrare qualsiasi tipo di widget in risposta ai comandi vocali dell'utente. Puoi configurare i widget in modo che eseguano azioni di app, consentendo agli utenti di ricevere risposte rapide ed esperienze con app interattive sulle piattaforme dell'assistente come Android e Android Auto. Per maggiori dettagli sull'implementazione dei widget per l'assistente, consulta Integrare App Actions con i widget Android.

Limitazioni dei widget

Sebbene i widget possano essere considerati "mini app", esistono alcune limitazioni importanti da comprendere prima di progettare il widget.

Gesti

Poiché i widget si trovano nella schermata Home, devono coesistere con la navigazione impostata lì. Ciò limita il supporto dei gesti disponibili in un widget rispetto a un'app a schermo intero. Sebbene le app consentano agli utenti di navigare tra le schermate orizzontalmente, questo gesto è già stato eseguito nella schermata Home per la navigazione tra le schermate Home.

Gli unici gesti disponibili per i widget sono tocco e scorrimento verticale.

Elementi

Date le limitazioni dei gesti disponibili per i widget, alcuni elementi costitutivi dell'interfaccia utente basati su gesti con limitazioni non sono disponibili per i widget. Per un elenco completo degli elementi costitutivi supportati e per ulteriori informazioni sulle limitazioni del layout, consulta Creare il layout del widget e Fornire layout dei widget flessibili.

Linee guida per il design

Contenuti del widget

I widget sono un ottimo modo per attirare un utente nella tua app "pubblicizzando" contenuti nuovi e interessanti disponibili al suo interno.

Proprio come i teaser sulla prima pagina di un giornale, i widget raggruppano e concentrano le informazioni di un'app e forniscono un collegamento a dettagli più completi all'interno dell'app. Potresti dire che il widget è lo "snack" di informazioni, mentre l'app è il "piatto principale". Assicurati che la tua app mostri più dettagli su un elemento informativo rispetto a quanto visualizzato dal widget.

Oltre ai contenuti puramente informativi, ti consigliamo di fare in modo che il widget fornisca link di navigazione alle aree di uso frequente della tua app. In questo modo, gli utenti possono completare le attività più rapidamente ed estendere la copertura funzionale dell'app alla schermata Home.

Buoni candidati per i link di navigazione sui widget sono:

  • Funzioni generative:sono le funzioni che consentono all'utente di creare nuovi contenuti per un'app, ad esempio un nuovo documento o un nuovo messaggio.

  • Apri l'app al livello superiore: in genere, toccando un elemento informativo l'utente viene indirizzato a una schermata dei dettagli di livello inferiore. Fornire l'accesso al livello superiore della tua applicazione offre una maggiore flessibilità di navigazione e può sostituire una scorciatoia dell'app dedicata che gli utenti utilizzano per accedere all'app dalla schermata Home. L'utilizzo dell'icona dell'applicazione per questa funzionalità può anche fornire al widget un'identità chiara se i dati visualizzati sono ambigui.

Ridimensionamento dei widget

Widget Orologio Google standard
Figura 6. Widget Orologio Google standard.

Se tocchi e tieni premuto un widget ridimensionabile, quindi lo rilasci, il widget passa alla modalità di ridimensionamento. Gli utenti possono utilizzare i punti di trascinamento o gli angoli del widget per impostare le dimensioni preferite.

La modifica delle dimensioni consente agli utenti di regolare l'altezza e la larghezza di un widget nei limiti della griglia di posizionamento della schermata Home. Puoi decidere se il widget può essere ridimensionato liberamente o se è soggetto a modifiche delle dimensioni orizzontali o verticali. Non devi supportare il ridimensionamento se il widget ha dimensioni predefinite.

Consentire agli utenti di ridimensionare i widget offre vantaggi importanti:

  • Possono ottimizzare la quantità di informazioni che vogliono visualizzare su ogni widget.
  • Possono influenzare meglio il layout dei widget e delle scorciatoie nei propri pannelli della casa.

Pianifica una strategia di ridimensionamento per il widget in base al tipo di widget che stai creando. I widget delle raccolte basati su elenco o griglia sono in genere semplici, perché il ridimensionamento del widget espande o contrae l'area di scorrimento verticale. Indipendentemente dalle dimensioni del widget, l'utente può comunque visualizzare tutti gli elementi di informazione.

I widget di informazioni richiedono una pianificazione più pratica, perché non sono scorrevoli e tutti i contenuti devono rientrare in una determinata dimensione. Devi adattare dinamicamente i contenuti e il layout del widget alle dimensioni definite dall'utente tramite l'operazione di ridimensionamento.

Nell'esempio seguente, l'utente può ridimensionare un widget meteo in tre passaggi, mostrando informazioni più dettagliate sul meteo nella posizione attuale man mano che il widget cresce.

Esempio di widget meteo nella griglia più piccola 3 x 2, con il nome della località (Tokyo), la temperatura (14 °) e il simbolo che indica il tempo parzialmente nuvoloso
Figura 7. Esempio di widget meteo in una griglia 3x2 di dimensioni "piccole".


Esempio di widget meteo in una dimensione "media" di 5 x 2, che include tutta l'interfaccia utente della dimensione della griglia 3 x 2, oltre all'etichetta "cielo parzialmente nuvoloso" e alle temperature previste dalle 16:00 alle 19:00
Figura 8. Esempio di widget meteo in una griglia 5 x 2 di dimensioni "medie".


Esempio di widget meteo in una dimensione "grande" 5 x 4, che include tutta l'interfaccia utente
            delle dimensioni della griglia 3 x 2 e 5 x 2, oltre a una previsione del meteo
            da martedì a venerdì
Figura 9. Esempio di widget meteo nelle dimensioni "grandi" della griglia 5 x 4.

Per ogni dimensione del widget, determina quante informazioni della tua app vengono visualizzate. Per dimensioni più piccole, concentrati sulle informazioni essenziali, quindi aggiungi informazioni contestuali man mano che il widget cresce in orizzontale e verticale.

Considerazioni sul layout

È facile essere tentati di disporre i widget in base alle dimensioni della griglia di posizionamento di un dispositivo con cui sviluppi. Questa può essere un'approssimazione iniziale utile, ma tieni presente quanto segue:

  • Pianificare la strategia di ridimensionamento dei widget in base a "bucket di dimensioni" anziché alle dimensioni della griglia variabile ti offre i risultati più affidabili.
  • Il numero, le dimensioni e la spaziatura delle celle possono variare notevolmente da un dispositivo all'altro. Pertanto, è molto importante che il widget sia flessibile e possa adattarsi a uno spazio maggiore o minore del previsto.
  • Quando l'utente ridimensiona un widget, il sistema risponde con un intervallo di dimensioni in dp in cui il widget può essere ridisegnato.
  • A partire da Android 12, puoi fornire attributi di dimensioni più raffinati e layout più flessibili. Ad esempio:

Configurazione dei widget da parte degli utenti

A volte, l'utente deve configurare il widget prima che possa essere utile. Pensa a un widget email in cui l'utente deve selezionare la cartella della posta prima che la posta in arrivo possa essere visualizzata o a un widget di foto statiche in cui l'utente deve assegnare un'immagine della galleria da visualizzare. I widget Android mostrano le opzioni di configurazione subito dopo che l'utente li inserisce in una schermata Home.

Elenco di controllo per il design dei widget

  • Concentrati su piccole porzioni di informazioni rapide nel widget. Espandi le informazioni nella tua app.
  • Scegli il tipo di widget più adatto alle tue esigenze.
  • Pianifica come i contenuti del widget si adattano a dimensioni diverse.
  • Rendi il layout del widget indipendente dall'orientamento e dal dispositivo assicurandoti che possa allungarsi e contrarsi.
  • Valuta se il widget richiede una configurazione aggiuntiva.