App-Widgets – Übersicht

Widgets sind ein wesentlicher Aspekt der Anpassung des Startbildschirms. Sie können sich diese als eine Übersicht 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 Steuerfeldern des Startbildschirms verschieben und, falls unterstützt, ihre Größe anpassen, um die Informationsmenge im Widget nach Bedarf anzupassen.

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

Widget-Typen

Überlegen Sie bei der Planung Ihres Widgets, welche Art von Widget Sie erstellen möchten. Widgets fallen in der Regel in eine der folgenden Kategorien:

Informations-Widgets

Beispiel für ein Wetterwidget, das Tokio als überwiegend bewölkt bei 14 Grad und die voraussichtliche Temperatur von 16 Uhr bis 19 Uhr anzeigt
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, Uhr-Widgets oder Widgets zur Verfolgung von Sportergebnissen. Wenn Sie auf ein Informations-Widget tippen, wird in der Regel die zugehörige App gestartet und eine Detailansicht der Widget-Informationen geöffnet.

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

Sammlungs-Widgets sind in der Regel auf folgende Anwendungsfälle ausgerichtet:

  • Durchstöbern Sie die Sammlung.
  • Ein Element der Sammlung wird in der zugehörigen App in der Detailansicht geöffnet.
  • Interaktion mit Elementen, z. B. durch Markieren als erledigt – mit Unterstützung für zusammengesetzte Schaltflächen in Android 12 (API-Level 31)

Widgets steuern

Ein Widget für eine App namens „Lichtliste“, die Schalter mit den Beschriftungen „Schlafzimmer“, „Küche“ und „Wohnzimmer“ anzeigt, wobei die ersten beiden Schalter ausgeschaltet sind
Abbildung 4: Beispiel für ein Steuerelement-Widget.

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

Wenn Sie mit einem Steuerelement interagieren, wird möglicherweise eine zugehörige Detailansicht in der App geöffnet. Dies 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 „Mag ich nicht“, „Zurück“, „Wiedergabe/Pause“, „Vorwärts“ und „Mag ich“. Der Interpret und der Titel werden jeweils als „Interpret“ bzw. „Beispielmusik“ aufgeführt.
Abbildung 5. Beispiel für ein Musik-App-Widget.

Während einige Widgets einen der Typen in den vorherigen Abschnitten darstellen (Informationen, Sammlung oder Kontrolle), sind viele Widgets Hybride, die Elemente verschiedener Typen kombinieren. Ein Musikplayer-Widget ist beispielsweise in erster Linie ein Widget für die Steuerung. Dem Nutzer wird aber auch angezeigt, welcher Titel gerade wiedergegeben wird.

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

Widgets in Google Assistant einbinden

Google Assistant kann jede Art von Widget als Reaktion auf Nutzerbefehle anzeigen. Du kannst deine Widgets so konfigurieren, dass sie App Actions ausführen. Dadurch erhalten Nutzer auf Assistant-Oberflächen wie Android und Android Auto Schnellinfos und interaktive Apps. Weitere Informationen zur Widget-Auftragsausführung für Assistant findest du unter App Actions in Android-Widgets einbinden.

Widget-Einschränkungen

Widgets können als „Mini-Apps“ verstanden werden. Es gibt jedoch einige Einschränkungen, die Sie kennen sollten, bevor Sie Ihr Widget entwerfen.

Touch-Gesten

Da sich Widgets auf dem Startbildschirm befinden, müssen sie zusammen mit der Navigation dort vorhanden sein. Dadurch wird die Unterstützung von Touch-Gesten in einem Widget im Vergleich zu einer Vollbild-App eingeschränkt. Nutzer können in Apps möglicherweise horizontal zwischen Bildschirmen wechseln, diese Geste wird jedoch bereits auf dem Startbildschirm verwendet, um zwischen Startbildschirmen zu wechseln.

Die einzigen für Widgets verfügbaren Touch-Gesten sind das Berühren und das vertikale Wischen.

Elemente

Aufgrund der Einschränkungen für Touch-Gesten, die für Widgets verfügbar sind, stehen einige UI-Bausteine, die eingeschränkte Touch-Gesten verwenden, nicht für Widgets zur Verfügung. Eine vollständige Liste der unterstützten Bausteine und weitere Informationen zu Layouteinschränkungen findest du unter Widget-Layout erstellen und Flexible Widget-Layouts bereitstellen.

Designrichtlinien

Widget-Inhalt

Widgets sind eine hervorragende Möglichkeit, Nutzer auf Ihre App aufmerksam zu machen, indem Sie für neue und interessante Inhalte in Ihrer App werben.

Genau wie Teaser auf der Titelseite einer Zeitung konsolidieren und bündeln Widgets die App-Informationen und stellen eine Verbindung zu detaillierteren Details innerhalb der App bereit. Sie könnten sagen, das Widget ist die Information „Snack“, während die App die „Mahlzeit“ ist. Achte darauf, dass in deiner App mehr Details zu einem Informationselement angezeigt werden als im Widget.

Zusätzlich zum reinen Informationsinhalt kannst du dein Widget so einrichten, dass es Navigationslinks zu häufig verwendeten Bereichen deiner App bereitstellt. So können Nutzer Aufgaben schneller erledigen und die funktionale Reichweite der App wird auf den Startbildschirm ausgedehnt.

Gute Kandidaten für Navigationslinks in Widgets sind:

  • Generative Funktionen:Das sind Funktionen, mit denen Nutzer neue Inhalte für eine App erstellen können, z. B. ein neues Dokument oder eine neue Nachricht.

  • App auf der obersten Ebene öffnen:Wenn der Nutzer auf ein Informationselement tippt, wird er normalerweise zu einem untergeordneten Detailbildschirm weitergeleitet. Der Zugriff auf die oberste Ebene Ihrer Anwendung bietet mehr Flexibilität bei der Navigation und kann eine dedizierte App-Verknüpfung ersetzen, mit der Nutzer sonst vom Startbildschirm zur App gelangen. Wenn Sie Ihr Anwendungssymbol für diese Funktion verwenden, kann Ihrem Widget auch eine eindeutige Identität zugewiesen werden, wenn die angezeigten Daten mehrdeutig sind.

Größe des Widgets anpassen

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

Berühren und halten Sie ein Widget, dessen Größe angepasst werden kann, und lassen Sie es dann los. Dadurch wird das Widget in den Modus zur Größenanpassung versetzt. Nutzer können die Ziehpunkte oder die Ecken des Widgets verwenden, um ihre bevorzugte Größe festzulegen.

Wenn Sie die Größe ändern, können Nutzer die Höhe und Breite eines Widgets innerhalb der Einschränkungen des Platzierungsrasters auf dem Startbildschirm anpassen. Sie können entscheiden, ob die Größe Ihres Widgets frei angepasst werden kann oder ob es auf horizontale oder vertikale Größenänderungen beschränkt ist. Sie müssen die Größenanpassung nicht unterstützen, wenn die Größe Ihres Widgets standardmäßig festgelegt ist.

Die Möglichkeit, die Größe von Widgets durch Nutzer anzupassen, hat wichtige Vorteile:

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

Planen Sie eine Strategie zur Größenanpassung Ihres Widgets entsprechend dem von Ihnen erstellten Widget-Typ. Listen- oder rasterbasierte Sammlungs-Widgets sind in der Regel unkompliziert, da durch Ändern der Größe des Widgets der vertikale Scrollbereich maximiert oder minimiert wird. Der Nutzer kann unabhängig von der Größe des Widgets alle Informationselemente sichtbar machen.

Informations-Widgets erfordern mehr praktische Planung, da sie nicht scrollbar sind und der gesamte Inhalt in eine bestimmte Größe passen muss. 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 anpassen. Dabei werden umfassendere Wetterinformationen am aktuellen Standort angezeigt, während das Widget wächst.

Beispiel für ein Wetter-Widget in der kleinsten 3 × 2-Rastergröße mit dem Standortnamen (Tokio), der Temperatur (14 °) und einem Symbol für teilweise bewölktes Wetter
Abbildung 7. Beispiel für ein Wetter-Widget in der Größe „klein“ mit 3 × 2 Rastern.


Beispiel für ein Wetter-Widget in der Größe 5 × 2 (mittel), einschließlich der gesamten Benutzeroberfläche aus der 3 × 2-Rastergröße plus dem Label „überwiegend bewölkt“ und Vorhersage von Temperaturen von 16 Uhr bis 19 Uhr
Abbildung 8. Beispiel für ein Wetter-Widget in einem 5x2-Raster der Größe „Mittel“.


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

Legen Sie für jede Widget-Größe fest, wie viele App-Informationen angezeigt werden sollen. Konzentrieren Sie sich bei kleineren Formaten auf die wichtigsten Informationen und fügen Sie dann Kontextinformationen hinzu, wenn das Widget horizontal und vertikal wächst.

Hinweise zum Layout

Es ist verlockend, Widgets gemäß den Abmessungen des Platzierungsrasters eines Geräts, mit dem Sie entwickeln, anzuordnen. Dies kann eine nützliche erste Annäherung sein. Beachten Sie jedoch die folgenden Punkte:

  • Wenn Sie Ihre Strategie zur Größenanpassung für Widgets mit Größengruppen anstelle von variablen Rasterdimensionen planen, erzielen Sie die zuverlässigsten Ergebnisse.
  • Die Anzahl, die 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 sich das Widget neu zeichnen kann.
  • Ab Android 12 können Sie optimierte Größenattribute und flexiblere Layouts angeben. Dazu zählen:

Widget-Konfiguration nach Nutzern

Manchmal müssen Nutzende das Widget erst einrichten, bevor es nützlich werden kann. Stellen Sie sich ein E-Mail-Widget vor, bei dem der Nutzer den E-Mail-Ordner auswählen muss, bevor der Posteingang angezeigt werden kann, oder ein Widget für statische Fotos, bei dem der Nutzer ein Bild aus der Galerie zuweisen muss. Android-Widgets zeigen ihre Konfigurationsoptionen an, sobald der Nutzer das Widget auf dem Startbildschirm abgelegt hat.

Checkliste für das Widget-Design

  • Konzentriere dich auf kleine Abschnitte der Informationen auf deinem Widget. Erweitern Sie die Informationen in Ihrer App.
  • Wähle den passenden Widget-Typ für deine Zwecke aus.
  • Planen Sie, wie sich der Inhalt Ihres Widgets an verschiedene Größen anpassen soll.
  • Gestalten Sie das Widget-Layout unabhängig von Ausrichtung und Gerät, indem Sie darauf achten, dass es gedehnt und minimiert werden kann.
  • Überlegen Sie, ob für Ihr Widget eine zusätzliche Konfiguration erforderlich ist.