Panoramica dei widget delle app

I widget sono un aspetto essenziale della personalizzazione della schermata Home. Possono essere paragonate a visualizzazioni "a colpo d'occhio" dei dati e delle funzionalità più importanti di un'app, accessibili direttamente nella schermata Home dell'utente. Gli utenti possono spostare i widget nei riquadri della schermata Home e, se supportati, ridimensionarli per adeguare la quantità di informazioni del widget alle proprie preferenze.

Questa documentazione introduce i diversi tipi di widget che puoi creare e i principi di progettazione da seguire. Per creare un widget dell'app con le API Remove 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

Mentre pianifichi il widget, pensa al tipo di widget che vuoi creare. Generalmente i widget rientrano in una delle seguenti categorie:

Widget di informazioni

Esempio di widget meteo che mostra Tokyo con una temperatura prevalentemente nuvoloso, 14 gradi e la temperatura prevista dalle 16:00 alle 19:00
Figura 1. Un widget con le informazioni 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. Quando si toccano le informazioni del widget, in genere viene avviata l'app associata e si apre una visualizzazione dettagliata delle informazioni del widget.

Widget raccolta

I widget raccolta sono specializzati nella visualizzazione di più elementi dello stesso tipo, ad esempio 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 in verticale.

I widget della raccolta si concentrano in genere sui seguenti casi d'uso:

  • Sfoglia la raccolta.
  • L'apertura di un elemento della raccolta nella relativa visualizzazione dei dettagli nell'app associata.
  • Interazione con gli elementi, ad esempio contrassegnandoli 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 interruttori a levetta denominati "Camera da letto", "Cucina" e "Salotto", con i primi due interruttori disattivati
Figura 4. Esempio di 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. Considerali come telecomandi per un'app. Un esempio di widget di controllo è un widget per il 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. Questo dipende dal fatto che la funzione del widget di controllo restituisca dati, ad esempio nel caso di un widget di ricerca.

Widget ibridi

Un'app di musica generica che mostra i pulsanti "Non mi piace", Indietro, Riproduci/Pausa, Avanti e "Non mi piace". L'artista e la traccia sono indicati rispettivamente come "Artista" e "Musica di esempio".
Figura 5. Esempio di widget dell'app di musica.

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, il widget del lettore musicale è principalmente un widget di controllo, ma mostra anche all'utente quale traccia è attualmente in riproduzione, come un widget di informazioni.

Quando pianifichi il widget, progetta in base a uno dei tipi di base e aggiungi elementi di altro tipo, se necessario.

Integrare i widget con l'Assistente Google

Qualsiasi tipo di widget può essere visualizzato dall'Assistente Google in risposta ai comandi vocali dell'utente. Puoi configurare i widget per completare le Azioni app, consentendo agli utenti di ricevere risposte rapide ed esperienze interattive nelle app sulle piattaforme con assistente come Android e Android Auto. Per maggiori dettagli sulla distribuzione dei widget per l'assistente, consulta Integrare le Azioni app con i widget Android.

Limitazioni dei widget

Sebbene i widget possano essere intesi come "miniapp", ci sono alcune limitazioni che è importante comprendere prima di progettare il widget.

Gesti

Poiché i widget sono presenti sulla schermata Home, devono coesistere con la navigazione definita 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 il tocco e lo scorrimento verticale.

Elementi

Date le limitazioni dei gesti disponibili per i widget, alcuni componenti di base dell'interfaccia utente che si basano su gesti limitati non sono disponibili per i widget. Per un elenco completo dei componenti di base supportati e per ulteriori informazioni sulle limitazioni di layout, consulta Creare il layout del widget e Fornire layout dei widget flessibili.

Linee guida per la progettazione

Contenuti widget

I widget sono un ottimo modo per attirare gli utenti nella tua app "pubblicizzando" nuovi contenuti interessanti disponibili all'interno dell'app.

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 "spuntino", 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 più utilizzate di frequente dell'app. In questo modo gli utenti possono completare le attività più rapidamente e la copertura funzionale dell'app viene estesa alla schermata Home.

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: toccando un elemento informativo in genere 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'uso dell'icona dell'applicazione per questa funzionalità può anche fornire al widget un'identità chiara se i dati visualizzati sono ambigui.

Ridimensionamento widget

Widget Orologio standard di Google
Figura 6. Widget dell'orologio Google standard.

Se tocchi e tieni premuto un widget ridimensionabile e poi lo rilasci, viene attivata la modalità di ridimensionamento del widget. Gli utenti possono utilizzare i punti di manipolazione di trascinamento o gli angoli del widget per impostare le dimensioni preferite.

Il ridimensionamento consente agli utenti di regolare l'altezza e la larghezza di un widget entro i vincoli della griglia di posizionamento nella schermata Home. Puoi decidere se il widget può essere ridimensionato liberamente o deve essere vincolato a modifiche delle dimensioni orizzontali o verticali. Non è necessario supportare il ridimensionamento se il widget ha una dimensione intrinseca fissa.

Consentire agli utenti di ridimensionare i widget offre importanti vantaggi:

  • Possono ottimizzare la quantità di informazioni che vogliono visualizzare su ciascun 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 della raccolta basata 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 scorrere tutti gli elementi informativi per visualizzarli.

I widget di informazioni richiedono una maggiore pianificazione, perché non sono scorribili e tutti i contenuti devono rientrare in una determinata dimensione. Devi regolare dinamicamente i contenuti e il layout del widget in base 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 dimensione più piccola della griglia 3x2, con l'elenco del nome della località (Tokyo), della temperatura (14°) e del simbolo che indica condizioni meteo parzialmente nuvoloso
Figura 7. Esempio di widget meteo in formato "piccolo" con griglia 3 x 2.


Esempio di widget meteo in una dimensione "media" 5x2, che include tutta l'interfaccia utente
            dalla dimensione griglia 3x2 più l'etichetta "prevalentemente nuvoloso" e
            temperature di previsione dalle 16:00 alle 19:00
Figura 8. Esempio di widget meteo in formato "medio" con griglia 5 x 2.


Esempio di widget meteo in formato "grandi" 5x4, che include tutta l'interfaccia utente
            delle griglie 3x2 e 5x2, oltre a una previsione del meteo
            da martedì a venerdì
Figura 9. Esempio di widget meteo nella dimensione "large" con griglia 5 x 4.

Per ogni dimensione del widget, stabilisci quante informazioni sull'app vengono visualizzate. Per dimensioni più piccole, concentrati sulle informazioni essenziali e poi aggiungi informazioni contestuali man mano che il widget cresce orizzontalmente e verticalmente.

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'utile approssimazione iniziale, ma tieni a mente i seguenti punti:

  • 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 ampiamente da un dispositivo all'altro. Di conseguenza, è molto importante che il widget sia flessibile e possa ospitare più o meno spazio 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 relativi alle dimensioni più perfezionati e layout più flessibili. Ad esempio:

Configurazione widget da parte degli utenti

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

Elenco di controllo per la progettazione di widget

  • Concentrati su piccole porzioni di informazioni visibili sul widget. Espandi le informazioni nella tua app.
  • Scegli il tipo di widget giusto per il tuo scopo.
  • 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 necessita di un'ulteriore configurazione.