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 dell'app utilizzando le API Remote View e i layout XML, vedi 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 informativi cruciali e tengono traccia di come le informazioni cambiano nel tempo. Esempi di widget di informazioni sono i widget meteo, orologio o per il 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 delle raccolte

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 per i 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 della 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 descritti nelle sezioni precedenti (informazioni, raccolta o controllo), molti widget 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ì. In questo modo viene limitato il supporto dei gesti disponibile in un widget rispetto a un'app a schermo intero. Sebbene le app possano consentire agli utenti di spostarsi tra le schermate in orizzontale, questo gesto viene già eseguito nella schermata Home per spostarsi 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 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 consolidano e concentrano le informazioni di un'app e forniscono un collegamento con dettagli più completi all'interno dell'app. Si potrebbe dire che il widget è lo "snack" di informazioni, mentre l'app è il "pasto". Assicurati che la tua app mostri più dettagli su un elemento informativo rispetto a quelli mostrati nel 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 iniziale.

I link di navigazione sui widget sono ideali per i seguenti motivi:

  • Funzioni generative: sono le funzioni che consentono all'utente di creare nuovi contenuti per un'app, ad esempio creare 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. L'accesso al livello superiore dell'applicazione offre una maggiore flessibilità di navigazione e può sostituire una scorciatoia dell'app dedicata che gli utenti utilizzano altrimenti per passare 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 i bordi 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 deve essere vincolato 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 riquadri 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, poiché 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 che segue, l'utente può ridimensionare un widget meteo in tre passaggi, mostrando informazioni più complete sul meteo nella posizione corrente 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 e poi aggiungi informazioni contestuali man mano che il widget cresce in orizzontale e verticale.

Considerazioni sul layout

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

  • La pianificazione della strategia di ridimensionamento dei widget in "bucket di dimensioni" anziché in dimensioni della griglia variabili 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 dp in cui il widget può ridisegnarsi.
  • A partire da Android 12, puoi fornire attributi di dimensione 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 la progettazione di 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 il modo in cui i contenuti del widget si adattano alle diverse dimensioni.
  • Assicurati che il layout del widget sia indipendente dall'orientamento e dal dispositivo assicurandoti che si estenda e si contragga.
  • Valuta se il widget richiede una configurazione aggiuntiva.