App-Widgets – Übersicht

Jetpack Compose
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Hier erfahren Sie, wie Sie Widgets mit APIs im Compose-Stil erstellen.

Widgets sind ein wesentlicher Bestandteil der Anpassung des Startbildschirms. Sie können sich Widgets als „auf einen Blick“-Ansichten der wichtigsten Daten und Funktionen einer App vorstellen, die direkt auf dem Startbildschirm des Nutzers verfügbar sind. Nutzer können Widgets auf den Startbildschirm verschieben und, falls unterstützt, ihre Größe ändern, um die Menge der Informationen im Widget an ihre Vorlieben anzupassen.

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

Widget-Typen

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

Informations-Widgets

Beispiel für ein Wetter-Widget, das für Tokio „überwiegend bewölkt“ und 14 °C anzeigt sowie die prognostizierte Temperatur von 16:00 bis 19:00 Uhr
Abbildung 1. Ein Informations-Widget einer Wetter-App.

Informations-Widgets zeigen in der Regel wichtige Informationen an und verfolgen, wie sich diese im Laufe der Zeit ändern. Beispiele für Informations-Widgets sind Wetter-Widgets, Uhr-Widgets oder Widgets zur Verfolgung von Sport-Ergebnissen. 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 darauf spezialisiert, mehrere Elemente desselben Typs anzuzeigen, 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 aus einer Kommunikations-App. Sammlungs-Widgets können vertikal gescrollt werden.

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

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

Steuerungs-Widgets

Ein Widget für eine App namens „Light list“ (Lichtliste) mit Ein/Aus-Schaltern mit den Labels „Bedroom“ (Schlafzimmer), „Kitchen“ (Küche) und „Living room“ (Wohnzimmer). Die ersten beiden Ein/Aus-Schalter sind deaktiviert.
Abbildung 4. Beispiel für ein Steuerungs-Widget.

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

Wenn Sie mit einem Steuerungs-Widget interagieren, wird möglicherweise eine zugehörige Detailansicht in der App geöffnet. Das hängt davon ab, ob die Funktion des Steuerungs-Widgets Daten ausgibt, wie z. B. bei einem Such-Widget.

Hybrid-Widgets

Eine allgemeine Musik-App mit Schaltflächen für „Dislike“, „Zurück“, „Wiedergabe/Pause“, „Vorwärts“ und „Like“. Der Künstler und der Titel werden als „Künstler“ bzw. „Beispielmusik“ aufgeführt.
Abbildung 5. Beispiel für ein Widget einer Musik-App.

Einige Widgets gehören zu einem der Typen in den vorherigen Abschnitten (Information, Sammlung oder Steuerung), viele sind jedoch Hybride, die Elemente verschiedener Typen kombinieren. Ein Musikplayer-Widget ist beispielsweise in erster Linie ein Steuerungs-Widget, zeigt dem Nutzer aber auch an, welcher Titel gerade abgespielt wird, wie ein Informations-Widget.

Planen Sie Ihr Widget um einen der Basistypen herum und fügen Sie bei Bedarf Elemente anderer Typen hinzu.

Widgets in Google Assistant einbinden

Jeder Widget-Typ kann von Google Assistant als Antwort auf Sprachbefehle des Nutzers angezeigt werden. Sie können Ihre Widgets so konfigurieren, dass sie App Aktionen ausführen. So können Nutzer auf Assistant-Oberflächen wie Android und Android Auto schnell Antworten erhalten und interaktive App-Erlebnisse nutzen. Weitere Informationen zur Widget-Ausführung für Assistant finden Sie unter App-Aktionen in Android Widgets einbinden.

Einschränkungen bei Widgets

Widgets können zwar als „Mini-Apps“ betrachtet werden, es gibt jedoch bestimmte Einschränkungen, die Sie kennen sollten, bevor Sie Ihr Widget entwerfen.

Touch-Gesten

Da sich Widgets auf dem Startbildschirm befinden, müssen sie mit der dort eingerichteten Navigation koexistieren. Dadurch ist die Unterstützung für Touch-Gesten in einem Widget im Vergleich zu einer Vollbild-App eingeschränkt. In Apps können Nutzer beispielsweise horizontal zwischen Bildschirmen wechseln. Diese Touch-Geste wird auf dem Startbildschirm jedoch bereits verwendet, um zwischen Startbildschirmen zu wechseln.

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

Elemente

Aufgrund der Einschränkungen bei den für Widgets verfügbaren Touch-Gesten sind einige UI-Bausteine, die auf eingeschränkten Touch-Gesten basieren, für Widgets nicht verfügbar. Eine vollständige Liste der unterstützten Bausteine und weitere Informationen zu Layout-Einschränkungen finden Sie unter Widget-Layout erstellen und Flexible Widget Layouts bereitstellen.

Gestaltungsrichtlinien

Widget-Inhalt

Widgets sind eine gute Möglichkeit, Nutzer auf Ihre App aufmerksam zu machen, indem Sie neue und interessante Inhalte „bewerben“, die in Ihrer App verfügbar sind.

Ähnlich wie Teaser auf der Titelseite einer Zeitung fassen Widgets die Informationen einer App zusammen und bieten eine Verbindung zu detaillierteren Informationen in der App. Das Widget ist sozusagen der Informations-„Snack“, während die App die „Mahlzeit“ ist. Ihre App sollte mehr Details zu einem Informationselement enthalten als das Widget.

Neben den reinen Informationen können Sie in Ihrem Widget auch Navigationslinks zu häufig verwendeten Bereichen Ihrer App einfügen. So können Nutzer Aufgaben schneller erledigen und die Funktionalität der App auf den Startbildschirm erweitern.

Gute Kandidaten für Navigationslinks in Widgets sind:

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

  • App auf oberster Ebene öffnen:Wenn Sie auf ein Informationselement tippen, wird der Nutzer in der Regel zu einem detaillierteren Bildschirm auf niedrigerer Ebene weitergeleitet. Der Zugriff auf die oberste Ebene Ihrer Anwendung bietet mehr Flexibilität bei der Navigation und kann eine spezielle App-Verknüpfung ersetzen, die Nutzer sonst verwenden, um vom Startbildschirm aus zur App zu navigieren. Wenn Sie Ihr Anwendungssymbol für diese Funktion verwenden, kann Ihr Widget auch eine klare Identität erhalten, wenn die angezeigten Daten mehrdeutig sind.

Größe von Widgets ändern

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

Wenn Sie ein Widget mit variabler Größe berühren und halten und dann loslassen, wird das Widget in den Größenänderungsmodus versetzt. Nutzer können die Ziehpunkte oder die Ecken des Widgets verwenden, um die gewünschte Größe festzulegen.

Durch Ändern der Größe können Nutzer die Höhe und Breite eines Widgets innerhalb der Einschränkungen des Platzierungsrasters auf dem Startbildschirm anpassen. Sie können festlegen, ob die Größe Ihres Widgets frei geändert werden kann oder ob nur horizontale oder vertikale Größenänderungen möglich sind. Sie müssen die Größenänderung nicht unterstützen, wenn Ihr Widget von Natur aus eine feste Größe hat.

Wenn Nutzer die Größe von Widgets ändern können, hat das wichtige Vorteile:

  • Sie können genau festlegen, wie viele Informationen in jedem Widget angezeigt werden sollen.
  • Sie können das Layout von Widgets und Verknüpfungen auf ihren Startbildschirmen besser beeinflussen.

Planen Sie eine Strategie zum Ändern der Größe für Ihr Widget entsprechend dem Typ des Widgets, das Sie erstellen. Listen- oder rasterbasierte Sammlungs-Widgets sind in der Regel unkompliziert, da durch Ändern der Größe des Widgets der vertikale Scrollbereich erweitert oder verkleinert wird. Unabhängig von der Größe des Widgets kann der Nutzer alle Informationselemente in der Ansicht scrollen.

Informations-Widgets erfordern mehr 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 festlegt.

Im folgenden Beispiel kann der Nutzer die Größe eines Wetter-Widgets in drei Schritten ändern. Dabei werden mehr Informationen zum Wetter am aktuellen Standort angezeigt, wenn das Widget größer wird.

Beispiel für ein Wetter-Widget in der kleinsten Größe (3 × 2) mit dem Ortsnamen (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“ (3 × 2 Rasterzellen).


Beispiel für ein Wetter-Widget in der Größe 5 × 2 („mittel“), das die gesamte Benutzeroberfläche der Größe 3 × 2 sowie das Label „meist bewölkt“ und die vorhergesagten Temperaturen von 16:00 bis 19:00 Uhr enthält.
Abbildung 8. Beispiel für ein Wetter-Widget in der Größe „Mittel“ (5 × 2 Rasterzellen).


Beispiel für ein Wetter-Widget in der Größe „Groß“ (5 × 4), das die gesamte Benutzeroberfläche der Rastergrößen „Kompakt“ (3 × 2) und „Mittel“ (5 × 2) sowie eine Wettervorhersage für Dienstag bis Freitag enthält.
Abbildung 9. Beispiel für ein Wetter-Widget in der Größe „Groß“ (5 × 4 Rasterzellen).

Legen Sie für jede Widget-Größe fest, wie viele Informationen aus Ihrer App angezeigt werden. Konzentrieren Sie sich bei kleineren Größen auf wichtige Informationen und fügen Sie dann kontextbezogene Informationen hinzu, wenn das Widget horizontal und vertikal größer wird.

Überlegungen zum Layout

Es ist verlockend, Ihre Widgets entsprechend den Abmessungen des Platzierungsrasters eines Geräts zu gestalten, mit dem Sie entwickeln. Dies kann eine nützliche erste Annäherung sein, aber beachten Sie die folgenden Punkte:

Widget-Konfiguration durch Nutzer

Manchmal muss der Nutzer das Widget einrichten, bevor es nützlich sein 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 an ein statisches Foto-Widget, bei dem der Nutzer ein Bild aus der Galerie zuweisen muss, das angezeigt werden soll. Android-Widgets zeigen ihre Konfigurationsoptionen an, nachdem der Nutzer das Widget auf einen Startbildschirm gezogen hat.

Checkliste für das Widget-Design

  • Konzentrieren Sie sich auf kleine Teile von Informationen, die auf einen Blick erfasst werden können. Erweitern Sie die Informationen in Ihrer App.
  • Wählen Sie den richtigen Widget-Typ für Ihren Zweck aus.
  • Planen Sie, wie der Inhalt Ihres Widgets an verschiedene Größen angepasst wird.
  • Machen Sie Ihr Widget-Layout unabhängig von Ausrichtung und Gerät, indem Sie dafür sorgen, dass es sich dehnen und zusammenziehen kann.
  • Überlegen Sie, ob Ihr Widget eine zusätzliche Konfiguration erfordert.