App-Widgets – Übersicht

Widgets sind ein wesentlicher Aspekt der Anpassung des Startbildschirms. Sie können sie sich als „Übersicht“-Ansichten der wichtigsten Daten und Funktionen einer App vorstellen, auf die direkt auf dem Startbildschirm des Nutzers zugegriffen werden kann. Nutzer können Widgets zwischen den Bereichen des Startbildschirms verschieben und, falls unterstützt, ihre Größe anpassen, um die Menge der Informationen im Widget an ihre Präferenz anzupassen.

In dieser Dokumentation werden die verschiedenen Arten von Widgets, die Sie erstellen können, und die Designprinzipien vorgestellt, die Sie befolgen sollten. Informationen zum Erstellen eines App-Widgets mit den Remove View APIs und XML-Layouts finden Sie unter Einfaches Widget erstellen. Informationen zum Erstellen eines Widgets mit Kotlin- und Compose-APIs finden Sie unter Jetpack Glance.

Widget-Typen

Überlegen Sie bei der Planung Ihres Widgets, welche Art von Widget Sie erstellen möchten. Widgets lassen sich in der Regel einer der folgenden Kategorien zuordnen:

Informations-Widgets

Beispiel eines Wetter-Widgets, in dem Tokio größtenteils bewölkt ist, 14 Grad und die voraussichtliche Temperatur von 16 Uhr bis 19 Uhr angezeigt wird
Abbildung 1: Ein Informations-Widget einer Wetter-App

Informations-Widgets zeigen in der Regel wichtige Informationselemente an und verfolgen, wie sich diese Informationen im Laufe der Zeit ändern. Beispiele für Informations-Widgets sind Wetter-Widgets, Uhren-Widgets oder Widgets für Sportergebnisse. Widgets, mit denen Sie auf Informationen tippen, starten in der Regel die zugehörige App und öffnen eine detaillierte Ansicht mit den Widgetinformationen.

Sammlungs-Widgets

Sammlungs-Widgets sind auf die Anzeige mehrerer Elemente desselben Typs spezialisiert, z. B. eine Sammlung von Bildern aus einer Galerie-App, eine Sammlung von Artikeln aus einer Nachrichten-App oder eine Sammlung von E-Mails oder Nachrichten von einer Kommunikations-App. Sammlungs-Widgets können vertikal gescrollt werden.

Sammlungs-Widgets konzentrieren sich in der Regel auf die folgenden Anwendungsfälle:

  • Sammlung wird durchsucht.
  • Ein Element der Sammlung in der Detailansicht in der verknüpften App öffnen
  • Mit Elementen interagieren, z. B. sie als erledigt markieren, mit Unterstützung für zusammengesetzte Schaltflächen in Android 12 (API-Level 31)

Widgets steuern

Ein Widget für eine App namens „Lampenliste“ mit den Ein-/Aus-Schaltern mit den Bezeichnungen „Schlafzimmer“, „Küche“ und „Wohnzimmer“, wobei die ersten beiden Schieberegler ausgeschaltet sind
Abbildung 4: Beispiel für ein Steuerelement-Widget.

Der Hauptzweck eines Steuer-Widgets besteht darin, häufig verwendete Funktionen anzuzeigen, damit Nutzer diese vom Startbildschirm aus aufrufen können, ohne die App öffnen zu müssen. Sie können sich diese als Fernbedienung für eine App vorstellen. Ein Beispiel für ein Steuer-Widget ist ein Smart-Home-Widget, mit dem Nutzer das Licht im Haus ein- oder ausschalten können.

Wenn Sie mit einem Steuerelement interagieren, kann in der App eine zugehörige Detailansicht geöffnet werden. Das hängt davon ab, ob die Funktion des Steuerelements Daten ausgibt, z. B. bei einem Such-Widget.

Hybrid-Widgets

Eine allgemeine Musik-App mit Schaltflächen für „Daumen nach unten“, „Zurück“, „Wiedergabe/Pause“, „Weiter“ und „Mag ich“. Der Künstler und der Titel werden als „Interpret“ bzw. „Beispielmusik“ aufgeführt.
Abbildung 5: Beispiel für ein Musik-App-Widget.

Während einige Widgets einen der Typen aus den vorherigen Abschnitten – „Informationen“, „Sammlung“ oder „Steuerelemente“ – darstellen, handelt es sich bei vielen Widgets um Hybride, in denen Elemente verschiedener Typen kombiniert werden. Ein Musikplayer-Widget ist beispielsweise in erster Linie ein Steuer-Widget, es zeigt dem Nutzer aber ähnlich wie ein Informations-Widget auch an, welcher Titel gerade gespielt wird.

Gestalten Sie bei der Planung Ihres Widgets einen der Basistypen und fügen Sie bei Bedarf Elemente anderer Typen hinzu.

Widgets mit Google Assistant verknüpfen

Alle Arten von Widgets können von Google Assistant auf Sprachbefehle des Nutzers reagieren. Du kannst deine Widgets so konfigurieren, dass App-Aktionen ausgeführt werden. So erhalten Nutzer auf Assistant-Oberflächen wie Android und Android Auto schnelle Antworten und interaktive App-Erlebnisse. Weitere Informationen zur Widget-Auftragsausführung für Assistant findest du unter App Actions in Android-Widgets einbinden.

Einschränkungen für Widgets

Widgets können zwar als „Mini-Apps“ verstanden werden, es gibt jedoch einige Einschränkungen, die Sie vor dem Entwerfen des Widgets kennen sollten.

Touch-Gesten

Da Widgets auf dem Startbildschirm vorhanden sind, müssen sie mit der dort festgelegten Navigation koexistieren. Dadurch wird die in einem Widget verfügbare Gestenunterstützung im Vergleich zu einer Vollbild-App eingeschränkt. Während Apps Nutzer horizontal zwischen Bildschirmen bewegen können, wird diese Geste auf dem Startbildschirm bereits ausgeführt, um zwischen den Startbildschirmen zu wechseln.

Die einzigen verfügbaren Touch-Gesten für Widgets sind Touch-Gesten und vertikales Wischen.

Elemente

Aufgrund der Einschränkungen für Gesten, die für Widgets verfügbar sind, sind einige UI-Bausteine, die eingeschränkte Gesten benötigen, für Widgets nicht verfügbar. Eine vollständige Liste der unterstützten Bausteine und weitere Informationen zu Layouteinschränkungen finden Sie unter Widget-Layout erstellen und Flexible Widget-Layouts bereitstellen.

Designrichtlinien

Widget-Inhalt

Widgets sind eine hervorragende Möglichkeit, Nutzer für Ihre App zu gewinnen, indem Sie neue und interessante Inhalte für Ihre App "werben".

Genau wie Teaser auf der Titelseite einer Zeitung konsolidieren und bündeln Widgets die Informationen einer App und stellen eine Verbindung zu ausführlicheren Details innerhalb der App her. Sie können sagen, dass das Widget die Information ist, während die App das „Mahl“ ist. Achten Sie darauf, dass Ihre App mehr Details zu einem Informationselement anzeigt als das, was im Widget angezeigt wird.

Zusätzlich zu den reinen Informationsinhalten sollten Sie Ihr Widget so gestalten, dass es Navigationslinks zu häufig verwendeten Bereichen Ihrer App enthält. So können Nutzer Aufgaben schneller erledigen und die funktionale Reichweite der App auf den Startbildschirm erweitern.

Gute Beispiele für Navigationslinks in Widgets sind:

  • Generative Funktionen:Dies sind die Funktionen, mit denen der Nutzer neue Inhalte für eine App erstellen kann, z. B. das Erstellen eines neuen Dokuments oder einer neuen Nachricht.

  • App auf oberster Ebene öffnen:Durch Tippen auf ein Informationselement wird der Nutzer in der Regel zu einem Bildschirm mit niedrigeren Details weitergeleitet. Der Zugriff auf die oberste Ebene Ihrer App bietet mehr Flexibilität bei der Navigation und kann eine dedizierte App-Verknüpfung ersetzen, mit der Nutzer normalerweise vom Startbildschirm zur App wechseln. Wenn Sie Ihr App-Symbol für diese Funktion verwenden, kann Ihrem Widget auch eine eindeutige Identität verleihen, wenn die angezeigten Daten mehrdeutig sind.

Größe von Widgets ändern

Standard-Uhr-Widget von Google
Abbildung 6: Standard-Uhr-Widget von Google.

Wenn Sie ein Widget mit anpassbarer Größe berühren und halten und es dann loslassen, wird es in den Modus für die Größenanpassung versetzt. Nutzer können die Ziehpunkte oder die Ecken des Widgets verwenden, um die gewünschte Größe festzulegen.

Durch das Ändern der Größe können Nutzer die Höhe und Breite eines Widgets innerhalb der Einschränkungen des Platzierungsrasters des Startbildschirms anpassen. Sie können festlegen, ob die Größe des Widgets frei änderbar ist oder ob es auf horizontale oder vertikale Größenänderungen beschränkt ist. Sie müssen die Größenanpassung nicht unterstützen, wenn Ihr Widget eine feste Größe hat.

Es hat wichtige Vorteile, die Größe von Widgets durch Nutzer anzupassen:

  • Sie können genau abstimmen, wie viele Informationen sie in jedem Widget sehen möchten.
  • Sie können das Layout von Widgets und Verknüpfungen in ihrem Startbildschirm besser beeinflussen.

Planen Sie eine Strategie zur Größenanpassung für Ihr Widget entsprechend dem Widgettyp, den Sie erstellen. Listen- oder rasterbasierte Sammlungs-Widgets sind in der Regel unkompliziert, da durch das Ändern der Größe der vertikale Scrollbereich maximiert oder minimiert wird. Der Nutzer kann unabhängig von der Größe des Widgets durch alle Informationselemente hineinscrollen.

Informations-Widgets erfordern mehr praktische Planung, da sie nicht scrollbar sind und alle Inhalte in eine bestimmte Größe passen müssen. Sie müssen den Inhalt und das Layout Ihres Widgets dynamisch an die Größe anpassen, die der Nutzer durch die Größenänderung definiert.

Im folgenden Beispiel kann der Nutzer die Größe eines Wetter-Widgets in drei Schritten ändern. Dabei werden mit zunehmender Größe des Widgets umfassendere Informationen zum Wetter am aktuellen Standort bereitgestellt.

Beispiel für ein Wetter-Widget in der kleinsten 3x2-Rastergröße mit dem Standortnamen (Tokio), der Temperatur (14°) und dem Symbol, das das teilweise bewölkte Wetter anzeigt
Abbildung 7: Beispiel für ein Wetter-Widget in der Größe „S“ mit 3 × 2-Rastern


Beispiel eines Wetter-Widgets in einer „mittel“ 5x2-Größe, einschließlich der gesamten UI des 3x2-Rasters sowie des Labels „meist bewölkt“ und der Vorhersage von Temperaturen von 16:00 bis 19:00 Uhr
Abbildung 8. Beispiel für ein Wetter-Widget in einer „mittel“-Größe mit 5 × 2-Rastern.


Beispiel eines Wetter-Widgets in einer großen Größe von 5 x 4, einschließlich aller UI der Rastergrößen 3 x 2 und 5 x 2 sowie einer Wetterprognose von Dienstag bis Freitag
Abbildung 9. Beispiel für ein Wetter-Widget im 5x4-Raster der Größe „Large“

Lege für jede Widgetgröße fest, wie viele Informationen deiner App angezeigt werden sollen. Bei kleineren Größen solltest du dich auf die wesentlichen Informationen konzentrieren und dann kontextbezogene Informationen hinzufügen, wenn das Widget horizontal und vertikal wächst.

Hinweise zum Layout

Es ist verlockend, Widgets entsprechend den Abmessungen des Platzierungsrasters eines Geräts anzuordnen. Dies kann eine nützliche anfängliche Näherung sein. Behalten Sie aber die folgenden Punkte im Hinterkopf:

  • Die zuverlässigsten Ergebnisse erhalten Sie, wenn Sie Ihre Strategie zur Anpassung der Widgetgröße über „Größen-Buckets“ und nicht über variable Rasterdimensionen planen.
  • Die Anzahl, Größe und der Abstand von Zellen können von Gerät zu Gerät stark variieren. Daher ist es sehr wichtig, dass Ihr Widget flexibel ist und mehr oder weniger Platz als erwartet aufnehmen kann.
  • Wenn der Nutzer die Größe eines Widgets ändert, antwortet das System mit einem dp-Größenbereich, in dem das Widget sich neu zeichnen kann.
  • Ab Android 12 kannst du verfeinerte Größenattribute und flexiblere Layouts angeben. Dazu zählen:

Widget-Konfiguration durch Nutzer

Manchmal muss das Widget erst eingerichtet werden, bevor es nützlich werden kann. Denken Sie an ein E-Mail-Widget, bei dem der Nutzer den E-Mail-Ordner auswählen muss, bevor der Posteingang angezeigt werden kann, oder ein statisches Foto-Widget, bei dem der Nutzer ein Bild aus der Galerie zuweisen muss, das angezeigt werden soll. Bei Android-Widgets wird die Konfigurationsauswahl angezeigt, sobald der Nutzer das Widget auf einen Startbildschirm zieht.

Checkliste für das Widget-Design

  • Konzentrieren Sie sich auf kleine Teile der übersichtlichen Informationen in Ihrem Widget. Erweitern Sie die Informationen in Ihrer App.
  • Wählen Sie den passenden Widget-Typ für Ihren Zweck aus.
  • Planen Sie, wie sich der Inhalt Ihres Widgets an verschiedene Größen anpasst.
  • Gestalten Sie Ihr Widget-Layout unabhängig von Ausrichtung und Gerät.
  • Überlegen Sie, ob für Ihr Widget eine zusätzliche Konfiguration erforderlich ist.