Widget optimieren

Diese Seite enthält Details zu optionalen Widget-Verbesserungen, die verfügbar sind ab Android 12 (API-Level 31) verfügbar. Diese Funktionen sind optional, aber sie lassen sich ganz einfach implementieren und verbessern die Nutzerfreundlichkeit des Widgets.

Dynamische Farben verwenden

Ab Android 12 kann ein Widget die Farben des Gerätedesigns verwenden für Schaltflächen, Hintergründe und andere Komponenten. Dies ermöglicht eine reibungslose und Einheitlichkeit in verschiedenen Widgets.

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

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

• Verwenden Sie das Material 3-Design (Theme.Material3.DynamicColors.DayNight) aus der Bibliothek Material Components for Android, die ab Material Components for Android Version 1.6.0 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.

Beispiele für Farbattribute:

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

Im folgenden Beispiel mit dem Material 3-Design ist die Designfarbe des Geräts „purpur“. Die Akzentfarbe und der Widget-Hintergrund passen sich an den hellen und den dunklen Modus an, wie in den Abbildungen 1 und 2 zu sehen.

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

<ph type="x-smartling-placeholder">

</ph>

Abbildung 1. Widget im hellen Design.

Abbildung 2: Widget im dunklen Design.

Tipp :Wir empfehlen, Material 3 zu verwenden. Material Design-Richtlinien für Einheitlichkeit zwischen Geräten und für abwärtskompatible Kompatibilität.

Abwärtskompatibilität für dynamische Farben

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

Hier ist ein Beispiel für das Thema 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>

Hinweis: Unter Stile und Designs finden Sie eine ausführliche Anleitung zum Umgang mit verschiedenen Stilen, Farben, Attributen und Designs.

Sprachunterstützung aktivieren

Mit App-Aktionen kann Google Assistant Widgets als Antwort auf relevante Sprachbefehle von Nutzern anzeigen. Wenn Sie Ihr Widget so konfigurieren, dass es auf vordefinierte Intents (BIIs) reagiert, kann Ihre App proaktiv Widgets auf Assistant-Oberflächen wie Android und Android Auto anzeigen. Nutzer haben die Möglichkeit, anpinnen Widgets, die Assistant ihren Launcher-Funktion zu nutzen und zukünftige Interaktionen zu fördern.

Sie können beispielsweise das Widget für die Trainingsübersicht für Ihre Trainings-App so konfigurieren, dass die Sprachbefehle der Nutzer 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 Anfragen wie „Hey Google, wie viele Kilometer habe ich diese Woche mit der Beispiel-App zurückgelegt?“ stellen.

Es gibt Dutzende von BIIs, die mehrere Kategorien der Nutzerinteraktion abdecken, sodass nahezu alle Android-Apps ihre sprachbasierten Widgets optimieren können. Weitere Informationen finden Sie unter App-Aktionen in Android-Widgets einbinden.

Widgetauswahl in Ihrer App verbessern

Mit Android 12 können Sie die Widget-Auswahl für Ihre App verbessern, indem Sie dynamische Widget-Vorschauen und Widget-Beschreibungen hinzufügen.

Skalierbare Widget-Vorschauen zur Widget-Auswahl hinzufügen

Ab Android 12 wird die Widget-Vorschau im ist skalierbar. Sie stellen sie als XML-Layout bereit, das mit der Standardgröße. Bisher war die Widget-Vorschau eine statische Zeichnen-Ressource. In einigen Fällen spiegelte die Vorschau nicht genau wider, wie Widgets aussehen, wenn sie dem Startbildschirm hinzugefügt werden.

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

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

Wir empfehlen, dasselbe Layout wie das eigentliche Widget zu verwenden, aber mit realistischen Standardeinstellungen. oder Testwerte. Die meisten Apps verwenden dieselbe previewLayout und initialLayout. Im folgenden Abschnitt dieser Seite finden Sie eine Anleitung zum Erstellen korrekter Vorschaulayouts.

Wir empfehlen, die Attribute previewLayout und previewImage anzugeben. damit deine App previewImage verwenden kann, wenn das Gerät des Nutzers unterstützt previewLayout nicht. Das Attribut previewLayout hat Vorrang über dem Attribut previewImage.

Empfohlene Ansätze zum Erstellen genauer Vorschauen

Wenn du skalierbare Widget-Vorschauen implementieren möchtest, verwende das previewLayout-Attribut des appwidget-provider-Element zum Bereitstellen eines XML-Layouts:

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

Abbildung 3. Eine Widget-Vorschau, die standardmäßig in einem Bereich von 3 × 3 Pixeln angezeigt wird, aber aufgrund ihres XML-Layouts auch in einem Bereich von 3 × 1 Pixeln Platz findet.

Wenn Sie eine möglichst genaue Vorschau sehen möchten, können Sie direkt das Widget mit Standardwerten verknüpfen, indem Sie die folgenden Schritte ausführen:

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

  Hinweis: Werte, die mit dem tools-Tag festgelegt werden, z. B. tools:text="@string/my_wdiget_item_fake_1", werden in der Vorschau nicht angezeigt.

• Festlegen eines Standard- oder Platzhalterbilds oder -symbols, z. B. android:src="@drawable/my_widget_icon" für ImageView-Komponenten.

Ohne Standardwerte werden in der Vorschau möglicherweise falsche oder leere Werte angezeigt. Eine Ein wichtiger Vorteil dieses Ansatzes ist, dass Sie eine lokalisierte Vorschau Inhalte.

Empfohlene Ansätze für komplexere Vorschauen mit ListView: GridView oder StackView erhalten Sie unter Genaue Vorschauen erstellen, die dynamische Artikel.

Abwärtskompatibilität mit skalierbaren Widget-Vorschauen

Wenn Sie möchten, dass die Widget-Auswahl unter Android 11 (API-Level 30) oder niedriger eine Vorschau Ihrer das Widget previewImage .

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

Beschreibung für das Widget hinzufügen

Ab Android 12 eine Beschreibung für das Widget angeben Auswahl, die für das Widget angezeigt werden soll.

Abbildung 4: Beispiel für eine Widgetauswahl mit einem Widget und seiner Beschreibung

Geben Sie mithilfe des Attributs description des Elements eine Beschreibung für Ihr Widget an. <appwidget-provider>-Element:

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

Hinweis: Fassen Sie sich kurz. Es gibt keine Zeichenbeschränkung, aber die Darstellung und Der verfügbare Platz für die Beschreibung kann je nach Gerät variieren.

Sie können das Attribut descriptionRes in früheren Android-Versionen verwenden, es wird jedoch von der Widget-Auswahl ignoriert.

Für flüssigere Übergänge sorgen

Ab Android 12 bieten Launcher einen reibungsloseren Übergang Ein Nutzer startet deine App über ein Widget.

Wenn Sie diesen verbesserten Übergang aktivieren möchten, verwenden Sie @android:id/background oder android.R.id.background, um das Hintergrundelement anzugeben:

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

Warnung: Vermeiden Sie die Verwendung von Broadcasting. Trampoline Ab Android 12 kann eine App weiterhin eine Aktivität über einen Übertragungsempfänger oder Dienst starten, wenn sie über die PendingIntent eines Widget-Klicks initiiert wird. Die neue App-Animation wird jedoch nicht für Apps verwendet, die über einen Broadcast-Empfänger oder -Dienst gestartet werden, was zu einer schlechten Nutzererfahrung führt.

Ihre App kann @android:id/background in älteren Android-Versionen verwenden, ohne dass es zu Fehlern kommt. Die Funktion wird jedoch ignoriert.

Laufzeitänderung von RemoteViews verwenden

Ab Android 12 können Sie verschiedene RemoteViews-Methoden, die eine Laufzeitänderung von RemoteViews ermöglichen Attribute. Weitere Informationen finden Sie in der RemoteViews API. für die vollständige Liste der hinzugefügten Methoden.

Das folgende Codebeispiel zeigt, wie einige dieser Methoden verwendet werden.

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