Widget optimieren

Auf dieser Seite finden Sie Details zu optionalen Widget-Verbesserungen, die ab Android 12 (API-Level 31) verfügbar sind. Diese Funktionen sind optional, lassen sich aber ganz einfach implementieren und verbessern.

Dynamische Farben verwenden

Ab Android 12 kann ein Widget die Farben des Gerätedesigns für Schaltflächen, Hintergründe und andere Komponenten verwenden. Dies ermöglicht reibungslosere Übergänge und Konsistenz über verschiedene Widgets hinweg.

Es gibt zwei Möglichkeiten, dynamische Farben zu erzielen:

  • Verwenden Sie im Stammlayout das Standarddesign des Systems (@android:style/Theme.DeviceDefault.DayNight).

  • Sie können das Material 3-Design (Theme.Material3.DynamicColors.DayNight) aus der Bibliothek Material Components for Android verwenden, die ab Version 1.6.0 von Material Components for Android verfügbar ist.

Nachdem das Design im Stammlayout festgelegt wurde, können Sie gängige Farbattribute im Stamm oder in einem seiner untergeordneten Elemente verwenden, um die dynamischen Farben zu übernehmen.

Hier einige Beispiele für Farbattribute, die Sie verwenden können:

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

Im folgenden Beispiel mit dem Design „Material 3“ lautet die Designfarbe des Geräts „violett“. Die Akzentfarbe und der Widget-Hintergrund werden an den hellen und dunklen Modus angepasst, wie in Abbildung 1 und 2 dargestellt.

<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 im hellen Modus-Design
Abbildung 1. Widget im hellen Design.
Widgets im dunklen Modus-Design
Abbildung 2. Widget im dunklen Design.

Abwärtskompatibilität für dynamische Farben

Dynamische Farben sind nur auf Geräten mit Android 12 oder höher verfügbar. Wenn Sie ein benutzerdefiniertes Design für niedrigere Versionen bereitstellen möchten, erstellen Sie ein Standarddesign mit Ihren benutzerdefinierten Farben und einem neuen Qualifier (values-v31) mithilfe der Standarddesignattribute.

Hier ist ein Beispiel mit dem Design von 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>

Sprachunterstützung aktivieren

Mit App-Aktionen kann Google Assistant Widgets auf entsprechende Sprachbefehle des Nutzers reagieren. Wenn du dein Widget so konfigurierst, dass es auf integrierte Intents (BIIs) reagiert, kann deine App Widgets proaktiv auf Assistant-Oberflächen wie Android und Android Auto anzeigen. Nutzer haben die Möglichkeit, Widgets anzupinnen, die von Assistant an ihren Launcher angepinnt werden, um zukünftige Interaktionen zu fördern.

Beispielsweise können Sie das Widget „Trainingszusammenfassung“ für Ihre Trainings-App so konfigurieren, dass die Sprachbefehle des Nutzers ausgeführt werden, die die BII GET_EXERCISE_OBSERVATION auslösen. Assistant zeigt Ihr Widget proaktiv an, wenn Nutzer diese BII auslösen, indem sie fragen: „Hey Google, wie viele Meilen habe ich diese Woche mit der Beispiel-App gelaufen?“

Es gibt Dutzende von BIIs, die verschiedene Kategorien der Nutzerinteraktion abdecken, sodass praktisch jede Android-App ihre Widgets für die Sprachausgabe optimieren kann. Informationen zum Einstieg finden Sie unter App-Aktionen in Android-Widgets integrieren.

Widget-Auswahl in Ihrer App verbessern

Mit Android 12 kannst du die Widget-Auswahl für deine App verbessern, indem du dynamische Widget-Vorschauen und Widget-Beschreibungen hinzufügst.

Skalierbare Widget-Vorschauen zur Widget-Auswahl hinzufügen

Ab Android 12 ist die Widgetvorschau in der Widgetauswahl skalierbar. Sie stellen es als XML-Layout bereit, das auf die Standardgröße des Widgets festgelegt ist. Früher war die Widget-Vorschau eine statische Drawable-Ressource, was in einigen Fällen dazu führte, dass in der Vorschau nicht korrekt dargestellt wurde, wie Widgets erscheinen, wenn sie dem Startbildschirm hinzugefügt werden.

Wenn Sie skalierbare Widget-Vorschauen implementieren möchten, verwenden Sie das Attribut previewLayout des Elements appwidget-provider, um stattdessen ein XML-Layout bereitzustellen:

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

Wir empfehlen, dasselbe Layout wie das eigentliche Widget mit realistischen Standard- oder Testwerten zu verwenden. Die meisten Apps verwenden dieselben previewLayout und initialLayout. Eine Anleitung zum Erstellen korrekter Vorschaulayouts finden Sie im folgenden Abschnitt auf dieser Seite.

Wir empfehlen, sowohl das previewLayout- als auch das previewImage-Attribut anzugeben, damit deine App auf previewImage zurückgreifen kann, wenn das Gerät des Nutzers previewLayout nicht unterstützt. Das Attribut previewLayout hat Vorrang vor dem Attribut previewImage.

Empfohlene Ansätze zum Erstellen genauer Vorschauen

Wenn Sie skalierbare Widget-Vorschauen implementieren möchten, verwenden Sie das Attribut previewLayout des Elements appwidget-provider, um ein XML-Layout bereitzustellen:

<appwidget-provider
    ...
    android:previewLayout="@layout/my_widget_preview">
</appwidget-provider>
Ein Bild, auf dem eine Widget-Vorschau zu sehen ist
Abbildung 3. Eine Widget-Vorschau, die standardmäßig in einem 3 × 3-Bereich angezeigt wird, aufgrund ihres XML-Layouts aber in einen 3 × 1-Bereich passt.

Um eine genaue Vorschau anzuzeigen, können Sie das tatsächliche Widget-Layout direkt mit Standardwerten bereitstellen. Gehen Sie dazu so vor:

  • android:text="@string/my_widget_item_fake_1" für TextView-Elemente wird festgelegt.

  • Festlegen eines Standard- oder Platzhalterbildes oder ‐symbols wie android:src="@drawable/my_widget_icon" für ImageView-Komponenten.

Ohne Standardwerte werden in der Vorschau möglicherweise falsche oder leere Werte angezeigt. Ein wichtiger Vorteil dieses Ansatzes besteht darin, dass du lokalisierte Vorschauinhalte zur Verfügung stellen kannst.

Empfohlene Vorgehensweisen für komplexere Vorschauen, die ListView, GridView oder StackView enthalten, finden Sie unter Genaue Vorschauen mit dynamischen Elementen erstellen.

Abwärtskompatibilität mit skalierbaren Widgetvorschauen

Damit in der Widget-Auswahl unter Android 11 (API-Level 30) oder niedriger eine Vorschau des Widgets angezeigt werden kann, geben Sie das Attribut previewImage an.

Wenn Sie das Aussehen des Widgets ändern, aktualisieren Sie auch das Vorschaubild.

Beschreibung für das Widget hinzufügen

Gib ab Android 12 eine Beschreibung für die Widget-Auswahl an, die für dein Widget angezeigt werden soll.

Bild mit einer Widget-Auswahl, auf der ein Widget und seine Beschreibung zu sehen sind
Abbildung 4: Beispiel-Widget-Auswahl mit einem Widget und seiner Beschreibung.

Gib mit dem Attribut description des Elements &lt;appwidget-provider&gt; eine Beschreibung für das Widget an:

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

Du kannst das Attribut descriptionRes in früheren Android-Versionen verwenden, es wird jedoch von der Widget-Auswahl ignoriert.

Reibungslose Übergänge ermöglichen

Ab Android 12 sorgen Launcher für einen reibungslosen Übergang, wenn ein Nutzer deine App über ein Widget startet.

Identifiziere das Hintergrundelement mit @android:id/background oder android.R.id.background, um diesen verbesserten Übergang zu aktivieren:

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

Ihre App kann @android:id/background auch auf früheren Android-Versionen verwenden, ohne dass Probleme auftreten, dies wird jedoch ignoriert.

Laufzeitänderung von RemoteViews verwenden

Ab Android 12 kannst du mehrere RemoteViews-Methoden nutzen, die eine Laufzeitänderung von RemoteViews-Attributen ermöglichen. Eine vollständige Liste der hinzugefügten Methoden finden Sie in der API-Referenz zu RemoteViews.

Das folgende Codebeispiel zeigt die Verwendung einiger dieser Methoden.

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);