Erstellen Sie effektive Widget-Layouts, indem Sie zuerst Ihre wichtigsten Inhalte identifizieren. Das Layout bestimmt, wie Informationen und interaktive Elemente im Widget organisiert sind. Android bietet mehrere vorgefertigte Layouts für Symbolleisten, Text, Listen- und Raster-Widgets, um diesen Prozess zu optimieren.
Text
Textlayouts eignen sich ideal für die Anzeige prägnanter Informationen. Sie können das Widget optisch ansprechender gestalten, indem Sie optional ein Bild neben dem Text einfügen.
Ideal für Titel, Statusaktualisierungen, kurze Beschreibungen oder jedes Szenario, in dem eine einzelne Textzeile die Botschaft effektiv vermittelt.
Fügen Sie ein Bild hinzu, um die visuelle Wirkung zu erhöhen. Weitere Informationen zum Anpassen dieses Layouts für verschiedene Bildschirmgrößen finden Sie unter Breakpoints.
Symbolleisten
Mit Symbolleistenlayouts können Sie Nutzern in Ihrer App schnellen Zugriff auf häufig verwendete Aufgaben ermöglichen. Das flexible Layout passt sich an verschiedene Widget-Größen an.
Das Layout einer Suchsymbolleiste ist so konzipiert, dass die Suche als primäre Aktion in der Symbolleiste im Fokus steht. Zusätzliche praktische Tasten ermöglichen einen schnellen Zugriff auf häufig verwendete Funktionen.
In Symbolleisten wird das App-Branding gefolgt von Schaltflächen für die am häufigsten verwendeten Aufgaben angezeigt, die sich ideal für ein-/ausschaltbare Einstellungen oder Aufgabenlinks eignen. Beim Anpassen der Größe können weniger häufig verwendete Optionen zugunsten häufigerer Aktionen ausgeblendet werden. Verwenden Sie Breakpoints, um einen neuen, mindestens 48 dp großen, anklickbaren Button hinzuzufügen, wenn Platz dafür ist.
Listen
Verwenden Sie Listenlayouts, um mehrere Elemente in einem übersichtlichen, leicht erfassbaren Format zu organisieren. Das ist ideal für Schlagzeilen, To-do-Listen oder Nachrichten. Inhalte in einer strukturierten, übersichtlichen Liste anordnen. Je nach Ihren Inhaltsanforderungen können Sie zwischen der Darstellung mit oder ohne Container wählen.
Listen mit Text und Bildern eignen sich hervorragend, um verschiedene Arten von Inhalten zu präsentieren, z. B. Schlagzeilen, Playlists mit Albumcovern oder Nachrichten.
Das Layout der Checkliste eignet sich hervorragend für die Anzeige von Aufgaben und bietet Nutzern klare Tippziele, um Elemente schnell als erledigt zu markieren.
Mit Aktionslisten können Sie intuitive Kontrollgruppen erstellen. Visuelle Ein-/Aus-Zustände bieten sofortiges Feedback zum Status von Elementen.
Dieses Layout ist ideal für die Darstellung von immersiven Bildern ohne Rand auf Android 17 und höher. Es verwendet Snap-Scrolling, um sicherzustellen, dass jedes untergeordnete Element perfekt an die Höhe des Widget-Containers angepasst wird.
Raster
Bilder in einem kompakten, flexiblen, visuell ansprechenden Raster mit optionalen Labels präsentieren. Verwenden Sie Spalten und Zeilen, die sich an verschiedene Bildschirmgrößen anpassen.
Mit Bildrastern können Sie visuell ansprechende, scrollbare Bildergalerien erstellen. Zeilen und Spalten passen sich automatisch an verschiedene Bildschirmgrößen an, um eine optimale Darstellung zu ermöglichen.
Sie können auch Textlabels und ‑beschreibungen einfügen, um den Inhalt Ihres Bildrasters mit zusätzlichem Kontext und Informationen anzureichern.
Codebeispiele
In der folgenden Tabelle wird jedes kanonische Layout der entsprechenden Jetpack Glance-Implementierung im GitHub-Repository für Android-Plattformbeispiele zugeordnet.
| Kanonisches Layout | Layoutkategorie | Beispieldatei für die Implementierung |
|---|---|---|
| Nur Text | Text | LongTextAppWidget.kt |
| Text und Bild | Text | TextWithImageAppWidget.kt |
| Suchsymbolleiste | Symbolleisten | SearchToolBarAppWidget.kt |
| Symbolleiste (Standard) | Symbolleisten | ToolBarAppWidget.kt |
| Liste mit Text und Bildern | Listen | ImageTextListAppWidget.kt |
| Checkliste | Listen | CheckListAppWidget.kt |
| Aktionsliste | Listen | ActionListAppWidget.kt |
| Snap-Scroll mit voller Seitenbreite | Listen | FullBleedImageAppWidget.kt |
| Nur Bild | Raster | ImageGridAppWidget.kt |
| Bild und Text | Raster | ImageGridAppWidget.kt |