Migliora il widget

Prova il modo di comporre
Jetpack Compose è il toolkit per la UI consigliato per Android. Scopri come creare widget utilizzando API in stile Compose.

Questa pagina include i dettagli dei miglioramenti facoltativi dei widget disponibili a partire da Android 12 (livello API 31). Queste funzionalità sono facoltative, ma sono facili da implementare e migliorano l'esperienza degli utenti con i widget.

Utilizzare colori dinamici

A partire da Android 12, un widget può utilizzare i colori del tema del dispositivo per pulsanti, sfondi e altri componenti. Ciò garantisce transizioni più fluide e coerenza tra i diversi widget.

Esistono due modi per ottenere colori dinamici:

Una volta impostato il tema nel layout radice, puoi utilizzare gli attributi di colore comuni nella radice o in uno dei relativi elementi secondari per selezionare i colori dinamici.

Di seguito sono riportati alcuni esempi di attributi colore che puoi utilizzare:

  • ?attr/primary
  • ?attr/primaryContainer
  • ?attr/onPrimary
  • ?attr/onPrimaryContainer

Nell'esempio seguente che utilizza il tema Material 3, il colore del tema del dispositivo è "violaceo". Il colore accento e lo sfondo del widget si adattano alle modalità Luce e Buio, come mostrato nelle figure 1 e 2.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="?attr/colorPrimaryContainer"
  android:theme="@style/Theme.Material3.DynamicColors.DayNight">

  <ImageView
    ...
    app:tint="?attr/colorPrimaryContainer"
    android:src="@drawable/ic_partly_cloudy" />

    <!-- Other widget content. -->

</LinearLayout>
Widget nel tema della modalità Luce
Figura 1. Widget con tema chiaro.
Widget nel tema modalità Buio
Figura 2. Widget in tema scuro.

Compatibilità con le versioni precedenti per i colori dinamici

I colori dinamici sono disponibili solo sui dispositivi con Android 12 o versioni successive. Per fornire un tema personalizzato per le versioni precedenti, crea un tema predefinito con i tuoi colori personalizzati e un nuovo qualificatore (values-v31) utilizzando gli attributi del tema predefinito.

Ecco un esempio che utilizza il tema Material 3:

/values/styles.xml

<resources>
  <style name="MyWidgetTheme" parent="Theme.Material3.DynamicColors.DayNight">
    <!-- Override default colorBackground attribute with custom color. -->
    <item name="android:colorBackground">@color/my_background_color</item>

    <!-- Add other colors/attributes. -->

  </style>
</resources>

/values-v31/styles.xml

<resources>
  <!-- Do not override any color attribute. -->
  <style name="MyWidgetTheme" parent="Theme.Material3.DynamicColors.DayNight" />
</resources>

/layout/my_widget_layout.xml

<resources>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    android:background="?android:attr/colorBackground"
    android:theme="@style/MyWidgetTheme" />
</resources>

Attivare il supporto vocale

Le Azioni app consentono all'Assistente Google di mostrare widget in risposta a comandi vocali pertinenti degli utenti. Se configuri il widget in modo che risponda agli intent integrati (BII), la tua app può visualizzare in modo proattivo i widget sulle piattaforme dell'assistente come Android e Android Auto. Gli utenti hanno la possibilità di bloccare i widget visualizzati dall'assistente nel launcher, incoraggiando il coinvolgimento futuro.

Ad esempio, puoi configurare il widget di riepilogo dell'allenamento per la tua app di allenamento per soddisfare i comandi vocali dell'utente che attivano l'intent integrato GET_EXERCISE_OBSERVATION. L'assistente mostra in modo proattivo il widget quando gli utenti attivano questo intent integrato facendo richieste come "Hey Google, quanti chilometri ho corso questa settimana su ExampleApp?"

Esistono decine di intent integrati che coprono diverse categorie di interazione utente, consentendo a quasi tutte le app per Android di migliorare i propri widget per la voce. Per iniziare, consulta Integrare le Azioni app con i widget per Android.

Migliorare l'esperienza del selettore di widget dell'app

Android 12 ti consente di aggiungere anteprime dei widget scalate e descrizioni dei widget. Android 15 ti consente di migliorare l'esperienza del selettore di widget per la tua app con anteprime dei widget generate.

Per migliorare l'esperienza di selezione dei widget della tua app, fornisci un'anteprima del widget generato sui dispositivi Android 15 e versioni successive, un'anteprima del widget scalata (specificando un previewLayout) per i dispositivi Android 12-14 e un previewImage per le versioni precedenti.

Aggiungere le anteprime dei widget generati al selettore di widget

Le app devono impostare il valore compileSdk su 35 o versioni successive nel file build.gradle del modulo per poter fornire RemoteViews al selettore di widget sui dispositivi Android 15 o versioni successive. Ciò significa che le app possono aggiornare i contenuti nel selettore in modo che siano più rappresentativi di ciò che l'utente vede.

Le app possono utilizzare i metodi AppWidgetManager, setWidgetPreview e getWidgetPreview per aggiornare l'aspetto dei widget con informazioni aggiornate e personalizzate.

Generare un'anteprima aggiornata con Jetpack Glance

Glance.compose esegue una composizione, pertanto nel corpo del composable non vengono utilizzate funzioni di sospensione, flussi o chiamate asincrone simili. devi invece utilizzare dati costanti.

L'esempio seguente utilizza Jetpack Glance per generare un'anteprima aggiornata. Perché setWidgetPreview venga visualizzato come metodo in questo snippet, è necessaria un'impostazione di build compileSdk pari a 35 o versioni successive.

AppWidgetManager.getInstance(appContext).setWidgetPreview(
    ComponentName(
        appContext,
        ExampleAppWidgetReceiver::class.java
    ),
    AppWidgetProviderInfo.WIDGET_CATEGORY_HOME_SCREEN,
    ExampleAppWidget().compose(
        context = appContext
    ),
)

Generare l'anteprima aggiornata senza Jetpack Glance

Puoi utilizzare RemoteViews senza Glance. L'esempio seguente carica una risorsa di layout del widget XML e la imposta come anteprima. Per visualizzare setWidgetPreview come metodo in questo snippet, è necessaria un'impostazione di build compileSdk pari a 35 o versioni successive.

AppWidgetManager.getInstance(appContext).setWidgetPreview(
    ComponentName(
        appContext,
        ExampleAppWidgetReceiver::class.java
    ),
    AppWidgetProviderInfo.WIDGET_CATEGORY_HOME_SCREEN,
    RemoteViews("com.example", R.layout.widget_preview)
)

Aggiungere anteprime dei widget scalabili al selettore widget

A partire da Android 12, l'anteprima del widget visualizzata nel selettore dei widget è scalabile. Lo fornisci come layout XML impostato sulle dimensioni predefinite del widget. In precedenza, l'anteprima del widget era una risorsa disegnabile statica, in alcuni casi portava ad anteprime che riflettevano in modo impreciso l'aspetto dei widget quando vengono aggiunti alla schermata Home.

Per implementare anteprime dei widget scalabili, utilizza l'attributo previewLayout dell'elemento appwidget-provider per fornire invece un layout XML:

<appwidget-provider
    android:previewLayout="@layout/my_widget_preview">
</appwidget-provider>

Ti consigliamo di utilizzare lo stesso layout del widget effettivo, con valori predefiniti o di test realistici. La maggior parte delle app utilizza gli stessi previewLayout e initialLayout. Per indicazioni sulla creazione di layout di anteprima accurati, consulta la sezione seguente di questa pagina.

Ti consigliamo di specificare sia gli attributi previewLayout che previewImage, in modo che la tua app possa utilizzare previewImage se il dispositivo dell'utente non supporta previewLayout. L'attributo previewLayout ha la precedenza sull'attributo previewImage.

Approcci consigliati per creare anteprime accurate

Per implementare anteprime scalabili dei widget, utilizza l'attributo previewLayout dell'elemento appwidget-provider per fornire un layout XML:

<appwidget-provider
    ...
    android:previewLayout="@layout/my_widget_preview">
</appwidget-provider>
Un&#39;immagine che mostra l&#39;anteprima di un widget
Figura 3. Un'anteprima del widget che per impostazione predefinita viene visualizzata in un'area 3x3, ma può essere inserita in un'area 3x1 grazie al layout XML.

Per visualizzare un'anteprima accurata, puoi fornire direttamente il layout del widget effettivo con i valori predefiniti completando i seguenti passaggi:

  • Impostazione android:text="@string/my_widget_item_fake_1" per gli elementi TextView.

  • Impostazione di un'immagine o un'icona predefinita o segnaposto, ad esempio android:src="@drawable/my_widget_icon", per i componenti ImageView.

Senza valori predefiniti, l'anteprima potrebbe mostrare valori errati o vuoti. Un vantaggio importante di questo approccio è che puoi fornire contenuti di anteprima localizzati.

Per approcci consigliati per anteprime più complesse che contengono ListView, GridView o StackView, consulta Creare anteprime accurate che includono elementi dinamici per maggiori dettagli.

Compatibilità con le versioni precedenti con anteprime dei widget scalabili

Per consentire ai selettori di widget su Android 11 (livello API 30) o versioni precedenti di mostrare le anteprime del tuo widget, specifica l'attributo previewImage.

Se modifichi l'aspetto del widget, aggiorna l'immagine di anteprima.

Aggiungere un nome al widget

I widget devono avere un nome univoco quando vengono visualizzati nel selettore di widget.

I nomi dei widget vengono caricati dall'attributo label dell'elemento receiver del widget nel file AndroidManifest.xml.

<receiver
    ….
   android:label="Memories">
     ….
</receiver>

Aggiungere una descrizione per il widget

A partire da Android 12, fornisci una descrizione per il selettore di widget da visualizzare per il tuo widget.

Un&#39;immagine che mostra un selettore di widget con un widget e la relativa descrizione
Figura 4. Selettore di widget di esempio che mostra un widget e la relativa descrizione.

Fornisci una descrizione per il widget utilizzando l'attributo description dell'elemento &lt;appwidget-provider&gt;:

<appwidget-provider
    android:description="@string/my_widget_description">
</appwidget-provider>

Puoi utilizzare l'attributo descriptionRes nelle versioni precedenti di Android, ma viene ignorato dal selettore di widget.

Attivare transizioni più fluide

A partire da Android 12, i launcher offrono una transizione più fluida quando un utente avvia la tua app da un widget.

Per attivare questa transizione migliorata, utilizza @android:id/background o android.R.id.background per identificare l'elemento di sfondo:

// Top-level layout of the widget.
<LinearLayout
    android:id="@android:id/background">
</LinearLayout>

La tua app può utilizzare @android:id/background nelle versioni precedenti di Android senza problemi, ma viene ignorato.

Utilizzare la modifica in fase di runtime di RemoteViews

A partire da Android 12, puoi sfruttare diversi metodi RemoteViews che consentono la modifica in fase di runtime degli attributi RemoteViews. Consulta il riferimento all'API RemoteViews per l'elenco completo dei metodi aggiunti.

Il seguente esempio di codice mostra come utilizzare alcuni di questi metodi.

Kotlin

// Set the colors of a progress bar at runtime.
remoteView.setColorStateList(R.id.progress, "setProgressTintList", createProgressColorStateList())

// Specify exact sizes for margins.
remoteView.setViewLayoutMargin(R.id.text, RemoteViews.MARGIN_END, 8f, TypedValue.COMPLEX_UNIT_DP)

Java

// Set the colors of a progress bar at runtime.
remoteView.setColorStateList(R.id.progress, "setProgressTintList", createProgressColorStateList());

// Specify exact sizes for margins.
remoteView.setViewLayoutMargin(R.id.text, RemoteViews.MARGIN_END, 8f, TypedValue.COMPLEX_UNIT_DP);