App-Widgets – Übersicht

Compose ausprobieren
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Hier erfährst du, wie du Widgets mit Compose-ähnlichen APIs erstellst.

Widgets sind ein wichtiger Bestandteil der Personalisierung des Startbildschirms. Sie können sie sich als „Live-Anzeige“ der wichtigsten Daten und Funktionen einer App vorstellen, die direkt auf dem Startbildschirm des Nutzers verfügbar sind. Nutzer können Widgets auf ihren Startbildschirm-Seiten verschieben und, sofern unterstützt, ihre Größe anpassen, um die Menge der Informationen im Widget nach ihren Wünschen zu gestalten.

In dieser Dokumentation werden die verschiedenen Arten von Widgets, die Sie erstellen können, und die zu beachtenden Designprinzipien vorgestellt. 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 Compose-ähnlichen APIs 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 einer der folgenden Kategorien zuordnen:

Informations-Widgets

Beispiel für ein Wetter-Widget, das Tokio als überwiegend bewölkt, 14 Grad und die prognostizierte Temperatur von 16:00 bis 19:00 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 du auf ein Informations-Widget tippst, wird normalerweise die zugehörige App gestartet und eine detaillierte Ansicht 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:

  • In der Sammlung stöbern.
  • Öffnen eines Elements der Sammlung in der Detailansicht in der zugehörigen App.
  • Interaktion mit Elementen, z. B. 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 „Lichtliste“ mit Schaltern, die mit „Schlafzimmer“, „Küche“ und „Wohnzimmer“ beschriftet sind, wobei die ersten beiden Schalter ausgeschaltet sind
Abbildung 4: Beispiel für ein Steuerelement-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 Smart-Home-Steuerung, mit dem Nutzer das Licht im Haus ein- oder ausschalten können.

Wenn du mit einem Steuerungs-Widget interagierst, 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 es beispielsweise bei einem Such-Widget der Fall ist.

Hybrid-Widgets

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

Einige Widgets gehören zu einem der Typen in den vorherigen Abschnitten (Informationen, Sammlung oder Steuerung), viele Widgets 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.

Wenn du dein Widget planst, solltest du dich an einem der Basistypen orientieren und bei Bedarf Elemente anderer Typen hinzufügen.

Widgets in Google Assistant einbinden

Google Assistant kann jede Art von Widget als Antwort auf Sprachbefehle von Nutzern anzeigen. Sie können Ihre Widgets so konfigurieren, dass sie App Actions ausführen. So können Nutzer auf Assistant-Oberflächen wie Android und Android Auto schnelle Antworten und interaktive App-Funktionen erhalten. Weitere Informationen zur Widget-Ausführung für Assistant findest du unter App-Aktionen in Android-Widgets einbinden.

Widget-Einschränkungen

Widgets können zwar als „Mini-Apps“ verstanden werden, es gibt jedoch bestimmte Einschränkungen, die du kennen solltest, bevor du dein Widget entwirfst.

Touch-Gesten

Da sich Widgets auf dem Startbildschirm befinden, müssen sie mit der dort vorhandenen Navigation koexistieren. Dadurch wird die Gestenunterstützung, die in einem Widget verfügbar ist, im Vergleich zu einer Vollbild-App eingeschränkt. Während Nutzer in Apps horizontal zwischen Bildschirmen wechseln können, wird diese Geste auf dem Startbildschirm bereits für die Navigation zwischen Startbildschirmen verwendet.

Die einzigen für Widgets verfügbaren Touch-Gesten sind Berühren und vertikal 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, nicht für Widgets verfügbar. Eine vollständige Liste der unterstützten Bausteine und weitere Informationen zu Layoutbeschränkungen finden Sie unter Widget-Layout erstellen und Flexible Widget-Layouts bereitstellen.

Gestaltungsrichtlinien

Folge diesen Designrichtlinien, um ein ansprechendes, flexibles und einheitliches Widget auf dem Startbildschirm zu erstellen.

Widget-Inhalt

Widgets sind eine gute Möglichkeit, Nutzer für deine App zu gewinnen, indem du neue und interessante Inhalte „bewirbst“, die in deiner App verfügbar sind.

Genau wie Teaser auf der Titelseite einer Zeitung fassen Widgets die Informationen einer App zusammen und bieten eine Verbindung zu detaillierteren Informationen in der App. Man könnte sagen, das Widget ist der „Snack“ und die App die „Mahlzeit“. Achten Sie darauf, dass Ihre App mehr Details zu einem Informationselement anzeigt als das Widget.

Zusätzlich zu den reinen Informationsinhalten können Sie in Ihrem Widget Navigationslinks zu häufig verwendeten Bereichen Ihrer App bereitstellen. So können Nutzer Aufgaben schneller erledigen und die funktionalen Möglichkeiten der App werden auf den Startbildschirm ausgeweitet.

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 der obersten Ebene öffnen:Wenn der Nutzer auf ein Informationselement tippt, wird er normalerweise zu einem Detailbildschirm auf einer niedrigeren Ebene weitergeleitet. Wenn du Zugriff auf die oberste Ebene deiner App gewährst, bietet das mehr Flexibilität bei der Navigation und kann eine spezielle App-Verknüpfung ersetzen, die Nutzer sonst verwenden, um vom Startbildschirm zur App zu gelangen. Wenn Sie Ihr App-Symbol für diese Funktion verwenden, kann das Widget auch eine klare Identität erhalten, wenn die angezeigten Daten mehrdeutig sind.

Größe des Widgets anpassen

Standard-Widget der Google Uhr-App
Abbildung 6: Standard-Widget für die Google Uhr.

Wenn du ein Widget, dessen Größe angepasst werden kann, berührst, hältst und dann loslässt, wird es in den Modus zur Größenanpassung versetzt. Nutzer können die Ziehpunkte oder die Widget-Ecken verwenden, um die gewünschte Größe festzulegen.

Durch die Größenänderung können Nutzer die Höhe und Breite eines Widgets innerhalb der Einschränkungen des Rasters für die Platzierung auf dem Startbildschirm anpassen. Sie können festlegen, ob die Größe Ihres Widgets frei angepasst werden kann oder ob die Größenänderung auf horizontale oder vertikale Änderungen beschränkt ist. Du musst die Größenanpassung nicht unterstützen, wenn dein Widget von Natur aus eine feste Größe hat.

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

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

Planen Sie eine Strategie zur Größenanpassung für Ihr Widget, die dem Typ des von Ihnen erstellten Widgets entspricht. Listen- oder rasterbasierte Sammlungs-Widgets sind in der Regel unkompliziert, da sich durch die Größenänderung des Widgets der vertikale Scrollbereich vergrößert oder verkleinert. Unabhängig von der Größe des Widgets kann der Nutzer alle Informationselemente in die Ansicht scrollen.

Informations-Widgets erfordern eine genauere 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 anpassen. Je größer das Widget wird, desto mehr Informationen zum Wetter am aktuellen Standort werden angezeigt.

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


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


Beispiel für ein Wetter-Widget in der Größe 5 × 4, einschließlich aller UI-Elemente aus den Rastergrößen 3 × 2 und 5 × 2 sowie einer Wettervorhersage von Dienstag bis Freitag
Abbildung 9. Beispiel für ein Wetter-Widget im 5x4-Raster in der Größe „Groß“.

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

Überlegungen zum Layout

Es ist verlockend, Widgets nach den Abmessungen des Platzierungsrasters eines Geräts zu gestalten, mit dem du entwickelst. Dies kann eine nützliche erste Schätzung sein. Beachten Sie jedoch die folgenden Punkte:

  • Die zuverlässigsten Ergebnisse erzielst du, wenn du die Strategie zur Größenanpassung deines Widgets nicht auf variable Rasterdimensionen, sondern auf „Größenbereiche“ ausrichtest.
  • Anzahl, Größe und Abstand der Zellen können von Gerät zu Gerät stark variieren. Daher ist es sehr wichtig, dass dein Widget flexibel ist und mehr oder weniger Platz als erwartet einnehmen kann.
  • Wenn der Nutzer die Größe eines Widgets ändert, reagiert das System mit einem dp-Größenbereich, in dem das Widget neu gezeichnet werden kann.
  • Ab Android 12 können Sie genauere Größenattribute und flexiblere Layouts bereitstellen. Dazu zählen folgende Komponenten:

Widget-Konfiguration durch Nutzer

Manchmal muss der Nutzer das Widget erst einrichten, bevor es nützlich ist. Beispiele sind 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 werden die Konfigurationsoptionen angezeigt, sobald der Nutzer das Widget auf einem Startbildschirm ablegt.

Checkliste für das Widget-Design

  • Konzentrieren Sie sich auf kleine, übersichtliche Informationsmengen in Ihrem Widget. Ergänzen Sie die Informationen in Ihrer App.
  • Wählen Sie den richtigen Widgettyp für Ihren Zweck aus.
  • Planen Sie, wie sich der Inhalt Ihres Widgets an verschiedene Größen anpasst.
  • Sorge dafür, dass das Layout deines Widgets unabhängig von der Ausrichtung und dem Gerät ist, indem du es so gestaltest, dass es sich dehnen und zusammenziehen kann.
  • Überlege, ob dein Widget zusätzliche Konfigurationen benötigt.