Linee guida per la progettazione del widget dell'app

I widget delle app (a volte semplicemente "widget") sono una funzionalità introdotta in Android 1.5 e notevolmente migliorata in Android 3.0 e 3.1. Un widget può mostrare a colpo d'occhio le informazioni più tempestive o comunque pertinenti di un'applicazione, nella schermata Home di un utente. L'immagine di sistema Android standard include diversi widget, tra cui uno per Orologio analogico, Musica e altre applicazioni.

Esempi di widget delle app in Android 4.0

Figura 1. Esempi di widget di app in Android 4.0.

Questo documento descrive come progettare un widget in modo che si adatti graficamente ad altri widget e agli altri elementi della schermata Home di Android, ad esempio le icone di avvio e le scorciatoie. Descrive inoltre alcuni standard per l'artwork dei widget e alcuni suggerimenti utili relativi alla grafica dei widget.

Per informazioni sullo sviluppo di widget, consulta la sezione Widget delle app della Guida per gli sviluppatori.

Struttura del widget standard

I widget tipici delle app Android hanno tre componenti principali: un riquadro di delimitazione, un frame, i controlli grafici del widget e altri elementi. I widget delle app possono contenere un sottoinsieme dei widget Visualizza in Android. I controlli supportati includono etichette di testo, pulsanti e immagini. Per un elenco completo delle visualizzazioni disponibili, consulta la sezione Creazione del layout del widget dell'app nella Guida per gli sviluppatori. Widget ben progettati lasciano alcuni margini tra i bordi del riquadro di delimitazione e il frame, oltre a una spaziatura interna tra i bordi interni del frame e dei controlli del widget.

In genere i widget hanno margini e spaziatura interna tra riquadro di delimitazione, frame e controlli

Figura 2. I widget in genere presentano margini tra il riquadro di delimitazione e il frame e una spaziatura interna tra i controlli del frame e del widget.

Nota. A partire da Android 4.0, ai widget delle app vengono assegnati automaticamente dei margini tra il frame del widget e il riquadro di delimitazione del widget per garantire un migliore allineamento con altri widget e icone nella schermata Home dell'utente. Per sfruttare questo comportamento fortemente consigliato, imposta il valore targetSdkVersion dell'applicazione su un valore maggiore o uguale a 14.

I widget progettati per adattarsi visivamente ad altri widget nella schermata Home si ispirano agli altri elementi della schermata Home per l'allineamento; utilizzano inoltre effetti di ombreggiatura standard. Tutti questi dettagli sono descritti in questa pagina.

Determinare le dimensioni del widget

Ogni widget deve definire minWidth e minHeight, indicando la quantità minima di spazio che dovrebbe consumare per impostazione predefinita. Quando gli utenti aggiungono un widget alla schermata Home, in genere quest'ultimo occupa più della larghezza e dell'altezza minime specificate. Le schermate Home di Android offrono agli utenti una griglia di spazi disponibili in cui posizionare widget e icone. Questa griglia può variare a seconda del dispositivo; ad esempio, molti telefoni hanno una griglia 4:4, mentre i tablet possono avere una griglia 8x7 più grande. Una volta aggiunto, il widget verrà allungato in modo da occupare il numero minimo di celle, orizzontalmente e verticalmente, necessario per soddisfare i vincoli minWidth e minHeight. Come illustrato nella sezione Progettazione dei layout e della grafica di sfondo dei widget di seguito, l'utilizzo di sfondi con nove patch e layout flessibili per i widget delle app consentirà al tuo widget di adattarsi alla griglia della schermata Home del dispositivo rimanendo utilizzabile ed esteticamente fantastico.

Sebbene la larghezza e l'altezza di una cella, nonché la quantità di margini automatici applicati ai widget, possano variare da un dispositivo all'altro, puoi utilizzare la tabella di seguito per effettuare una stima approssimativa delle dimensioni minime del widget, dato il numero desiderato di celle della griglia occupate:

N. di celle
(colonne o righe)
Dimensioni disponibili (dp)
(minWidth o minHeight)
1 40dp
2 110dp
3 180dp
4 250dp
n 70 × n - 30

È buona norma adottare un approccio conservativo con minWidth e minHeight, specificando le dimensioni minime che consentono di visualizzare il widget con un buon stato predefinito. Per un esempio di come fornire minWidth e minHeight, supponiamo che tu abbia un widget del lettore musicale che mostra l'artista e il titolo del brano attualmente in riproduzione (impilati verticalmente), un pulsante Riproduci e un pulsante Avanti:

Esempio di widget di un lettore musicale

Figura 3. Esempio di widget di un lettore musicale.

L'altezza minima deve essere l'altezza delle due TextView per l'artista e il titolo, più alcuni margini del testo. La larghezza minima deve corrispondere alle larghezze minime utilizzabili dei pulsanti Riproduci e Avanti, oltre alla larghezza minima del testo (ad esempio, la larghezza di 10 caratteri) più eventuali margini di testo orizzontali.

Esempi di dimensioni e margini per il calcolo di larghezza/altezza minima

Figura 4. Esempi di dimensioni e margini per i calcoli di minWidth/minHeight. Abbiamo scelto 144 dp come larghezza minima di esempio per le etichette di testo.

Di seguito sono riportati alcuni esempi di calcolo:

  • minWidth = 144dp + (2 × 8dp) + (2 × 56dp) = 272dp
  • minHeight = 48dp + (2 × 4dp) = 56dp

Se è presente una spaziatura interna dei contenuti intrinseca con nove patch di sfondo del widget, dovresti aggiungere minWidth e minHeight di conseguenza.

Widget ridimensionabili

A partire da Android 3.1, i widget possono essere ridimensionati orizzontalmente e/o verticalmente, il che significa che minWidth e minHeight diventano di fatto le dimensioni predefinite per il widget. Puoi specificare la dimensione minima del widget utilizzando minResizeWidth e minResizeHeight; questi valori devono specificare le dimensioni al di sotto delle quali il widget sarebbe illeggibile o inutilizzabile per altri motivi.

Questa è in genere una funzionalità preferita per i widget di raccolta come quelli basati su ListView o GridView.

Aggiungere margini al widget dell'app

Come accennato in precedenza, Android 4.0 aggiungerà automaticamente piccoli margini standard a ciascun bordo dei widget nella schermata Home per le applicazioni che specificano un valore targetSdkVersion pari o superiore a 14. Ciò consente di bilanciare visivamente la schermata Home, pertanto ti consigliamo di non aggiungere margini aggiuntivi al di fuori della forma di sfondo del widget dell'app in Android 4.0.

È facile scrivere un singolo layout con margini personalizzati per le versioni precedenti della piattaforma e senza margini aggiuntivi per Android 4.0 e versioni successive. Consulta Aggiunta di margini ai widget delle app nella Guida per gli sviluppatori per informazioni su come ottenere questo risultato con il file XML di layout.

Progettazione dei layout dei widget e delle immagini di sfondo

La maggior parte dei widget avrà un rettangolo con sfondo a tinta unita o un rettangolo arrotondato. Una best practice consiste nel definire questa forma utilizzando nove patch, una per ogni densità di schermo (per i dettagli, consulta la sezione Supporto di più schermi). Nove patch possono essere create con lo strumento draw9patch o semplicemente con un programma di editing grafico come Adobe® Photoshop. In questo modo la forma di sfondo del widget occuperà tutto lo spazio disponibile. La patch a nove punti deve essere posizionata da bordo a bordo senza pixel trasparenti che forniscano margini aggiuntivi, ad eccezione di qualche pixel del bordo per ombreggiature sottili o altri effetti discreti.

Nota: come per i controlli nelle attività, devi assicurarti che i controlli interattivi abbiano stati distinti incentrati sulla vista e stati premuti utilizzando le disegni di elenco di stati.

Pixel bordo a nove patch

Figura 5. I pixel del bordo con nove patch indicano aree espandibili e spaziatura interna dei contenuti.

Alcuni widget delle app, ad esempio quelli che utilizzano StackView, hanno uno sfondo trasparente. In questo caso, ogni singolo elemento nello stackView deve utilizzare uno sfondo con nove patch, bordo a bordo con un bordo minimo o assente di pixel trasparenti per i margini.

Per i contenuti del widget, devi utilizzare layout flessibili come RelativeLayout, LinearLayout o FrameLayout. Così come i layout delle attività devono adattarsi alle diverse dimensioni dello schermo fisico, i layout dei widget devono adattarsi alle dimensioni delle celle della griglia nella schermata Home.

Di seguito è riportato un layout di esempio utilizzabile da un widget musicale con informazioni di testo e due pulsanti. Si basa sulla precedente discussione sull'aggiunta di margini a seconda della versione del sistema operativo. Tieni presente che il modo più solido e resiliente per aggiungere margini al widget è aggregare il frame e i contenuti del widget in un elemento FrameLayout riempito.

<FrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:padding="@dimen/widget_margin">

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:background="@drawable/my_widget_background">

    <TextView
      android:id="@+id/song_info"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1" />

    <Button
      android:id="@+id/play_button"
      android:layout_width="@dimen/my_button_width"
      android:layout_height="match_parent" />

    <Button
      android:id="@+id/skip_button"
      android:layout_width="@dimen/my_button_width"
      android:layout_height="match_parent" />
  </LinearLayout>
</FrameLayout>

Se ora dai un'occhiata all'esempio di widget musicale della sezione precedente, puoi iniziare a utilizzare attributi di layout flessibili come questo:

Estrai layout e attributi flessibili per un widget musicale di esempio

Figura 6. Estrazione di attributi e layout flessibili.

Quando un utente aggiunge il widget alla schermata Home, su un dispositivo Android 4.0 di esempio in cui ogni cella della griglia ha dimensioni pari a 80 dp × 100 dp e 8 dp di margini vengono applicati automaticamente a tutte le dimensioni, il widget verrà allungato in questo modo:

Il widget Musica risiede su una griglia di esempio di 80 dp x 100 dp con 8 dp di margini automatici aggiunti dal sistema

Figura 7. Il widget Musica poggia su una griglia di esempio da 80 dp x 100 dp con 8 dp di margini automatici aggiunti dal sistema.

Utilizzo del pacchetto di modelli del widget app

Quando inizi a progettare un nuovo widget o ne aggiorni uno esistente, ti consigliamo di dare prima un'occhiata ai modelli di progettazione del widget riportati di seguito. Il pacchetto scaricabile che segue include grafica di sfondo con nove patch, XML e file di origine Adobe® Photoshop per diverse densità dello schermo, stili di widget per le versioni del sistema operativo e colori del widget. Il pacchetto modello contiene anche elementi grafici utili per rendere interattivi l'intero widget o parti del widget (ad es. i pulsanti).

Estratti del modello di widget

Figura 8. Estratti del pacchetto di modelli del widget per app (densità media, scuro, Android 4.0/stili precedenti, stati predefiniti/messi a fuoco/premi).

Puoi ottenere l'archivio più recente del pacchetto di modelli di widget app utilizzando il link seguente:

Scarica il pacchetto di modelli di widget app per Android 4.0 »