Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Kanonische Widget-Layouts

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 aufwerten, indem Sie optional ein Bild neben dem Text einfügen.

Nur Text

Ideal für Titel, Statusupdates, kurze Beschreibungen oder jedes Szenario, in dem eine einzelne Textzeile die Botschaft effektiv vermittelt.

Text und Bild

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.

Suchleiste

Das Layout einer Suchsymbolleiste ist so konzipiert, dass die Suche als primäre Aktion in der Symbolleiste im Fokus steht. Zusätzliche praktische Tasten können schnellen Zugriff auf häufig verwendete Funktionen ermöglichen.

Google Toolbar

In Symbolleisten wird das App-Branding gefolgt von Schaltflächen für die am häufigsten verwendeten Aufgaben angezeigt. Sie eignen sich ideal für ein-/ausschaltbare Einstellungen oder Aufgabenlinks. Beim Anpassen der Größe können weniger häufig verwendete Optionen zugunsten häufiger Aktionen ausgeblendet werden. Verwenden Sie Breakpoints, um einen neuen Button mit einer Mindesthöhe von 48 dp 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, leicht erfassbaren Liste anordnen. Wählen Sie je nach Ihren Inhaltsanforderungen zwischen der Darstellung mit oder ohne Container aus.

Liste mit Text und Bildern

Listen mit Text und Bildern eignen sich hervorragend, um verschiedene Arten von Inhalten zu präsentieren, z. B. Schlagzeilen, Playlists mit Albumcovern oder Nachrichten.

Checkliste

Das Checklistenlayout eignet sich hervorragend für die Anzeige von Aufgaben und bietet Nutzern klare Tippziele, um Elemente schnell als erledigt zu markieren.

Aktionsliste

Mit Aktionslisten können Sie intuitive Kontrollgruppen erstellen, in denen visuelle Ein-/Aus-Zustände sofortigen Aufschluss über den Status von Elementen geben.

Bild mit Anschnitt

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.

Nur Bild

Erstellen Sie visuell ansprechende, scrollbare Bildergalerien mit Rastern, die nur Bilder enthalten. Zeilen und Spalten werden automatisch an verschiedene Bildschirmgrößen angepasst, um eine optimale Darstellung zu ermöglichen.

Bild und Text

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	Referenzdateien	Anleitung
Layout der Aktionsliste	ActionListAppWidget.kt ActionListLayout.kt ListItem.kt RoundedScrollingLazyColumn.kt RoundedScrollingLazyVerticalGrid.kt EmptyListContent.kt NoDataContent.kt FakeActionListDataRepository.kt sample_action_list_widget_info.xml dimens.xml strings.xml sample_home_icon.xml sample_power_settings_icon.xml sample_bulb_icon.xml sample_thermostat_icon.xml sample_ac_icon.xml sample_door_icon.xml sample_arrow_right_icon.xml sample_no_data_icon.xml sample_add_icon.xml	Listenaktionen mit Glance-Aktions-Callbacks verarbeiten und für korrekte Statusaktualisierungen sorgen.
Check List Layout	CheckListAppWidget.kt CheckListLayout.kt ListItem.kt RoundedScrollingLazyColumn.kt EmptyListContent.kt NoDataContent.kt FakeCheckListDataRepository.kt sample_check_list_widget_info.xml dimens.xml strings.xml sample_pin_icon.xml sample_checked_circle_icon.xml sample_circle_icon.xml sample_delete_icon.xml sample_edit_icon.xml sample_snooze_icon.xml sample_no_data_icon.xml sample_add_icon.xml	Implementieren Sie das Umschalten des Status von Checkboxen mithilfe von Aktionsparametern oder Rückrufen, um Sammlungselemente zu aktualisieren. Verwende Glance-Aktions-Callbacks wie `actionRunCallback`, `ActionCallback(actionParametersOf(...))` oder `actionStartActivity(...)` für `onClick`-Parameter von Widgets, um Klickereignisse wie das Tippen auf ein Kästchen zu verarbeiten.
Ausdrucksstarkes Symbolleistenlayout	ExpressiveToolbarAppWidget.kt ExpressiveToolbarLayout.kt sample_expressive_toolbar_widget_info.xml Buttons.kt LayoutComponents.kt dimens.xml strings.xml four_side_cookie_background.xml sample_edit_icon.xml sample_share_icon.xml sample_delete_icon.xml sample_info_icon.xml sample_add_icon.xml sample_file_upload_icon.xml sample_mic_icon.xml sample_camera_icon.xml	Importfehler bei `ColorProvider` vermeiden: Importieren Sie `androidx.glance.unit.ColorProvider` und verwenden Sie `androidx.glance.color.ColorProvider(dayColor, nightColor)`. Verwenden Sie für einfarbige Hintergrundfarben direkt `GlanceModifier.background(Color)` anstelle von `ColorProvider`.
Bildraster-Layout	ImageGridAppWidget.kt ImageGridLayout.kt RoundedScrollingLazyVerticalGrid.kt EmptyListContent.kt NoDataContent.kt FakeImageGridDataRepository.kt sample_image_grid_widget_info.xml ImageUtils.kt dimens.xml strings.xml sample_placeholder_image.png sample_grid_icon.xml sample_refresh_icon.xml sample_no_data_icon.xml sample_add_icon.xml	Verwenden Sie für Bildelemente Volltonfarben (`GlanceModifier.background`) oder lokale Drawables, sofern keine Bibliothek zum Laden von Bildern konfiguriert oder angefordert wird.
Layout mit Bild, Text und Liste	ImageTextListAppWidget.kt ImageTextListLayout.kt ListItem.kt RoundedScrollingLazyColumn.kt EmptyListContent.kt NoDataContent.kt FakeImageTextListDataRepository.kt sample_image_text_list_widget_info.xml ImageUtils.kt dimens.xml strings.xml sample_placeholder_image.png sample_image_icon.xml sample_heart_icon.xml sample_refresh_icon.xml sample_no_data_icon.xml sample_add_icon.xml	Gängige Anwendungsfälle: Newsfeeds, Artikellisten, Trainingsverläufe, Nachrichtenfeeds und vertikale Miniaturbildlisten. Die Höhe von Listenzeilen und das Abschneiden von Text werden optimiert, wenn Miniaturansichten mit primärem und sekundärem Text kombiniert werden.
Long Text Layout	LongTextAppWidget.kt LongTextLayout.kt FakeLongTextRepository.kt sample_long_text_widget_info.xml FontUtils.kt dimens.xml strings.xml sample_text_icon.xml sample_refresh_icon.xml	Wenn Sie `Dp`-Werte multiplizieren, z. B. `2 * padding`, importieren Sie `androidx.compose.ui.unit.times`. Halten Sie sich an die Größenregeln: Verwenden Sie Dimensionen aus `dimens.xml` für das Padding und die Skalierung der Typografie.
Layout der Suchleiste	SearchToolBarAppWidget.kt SearchToolBarLayout.kt sample_search_toolbar_widget_info.xml Buttons.kt LayoutComponents.kt dimens.xml strings.xml sample_search_icon.xml sample_mic_icon.xml sample_camera_icon.xml sample_videocam_icon.xml sample_share_icon.xml	Importfehler bei `ColorProvider` vermeiden: Importieren Sie `androidx.glance.unit.ColorProvider` und verwenden Sie `androidx.glance.color.ColorProvider(dayColor, nightColor)`. Verwenden Sie `GlanceModifier.background(Color)` direkt für einfarbige Hintergrundfarben anstelle von ColorProvider.
Layout mit randlosem Bild / Snap-Scrolling	FullBleedImageAppWidget.kt FullBleedImageLayout.kt sample_full_bleed_image_widget_info.xml FontUtils.kt dimens.xml strings.xml sample_scrim_gradient.xml sample_placeholder_image.png sample_app_logo.xml sample_info_icon.xml sample_no_data_icon.xml	Legen Sie für das Snap-Scrolling für LazyColumn `verticalScrollMode = VerticalScrollMode.SnapScrollMatchHeight(size.height)` fest. Wenn Sie das Einrasten beim Scrollen implementieren, sind Glance 1.3.0-alpha02 oder höher, Compile-SDK 37 (Baklava) oder höher und Android Gradle-Plug-in (AGP) 9.1.0 oder höher erforderlich. Legen Sie in der Widget-Anbieterklasse `override val sizeMode: SizeMode = SizeMode.Exact` fest.
Standardlayout der Symbolleiste	ToolBarAppWidget.kt ToolBarLayout.kt sample_toolbar_widget_info.xml Buttons.kt LayoutComponents.kt dimens.xml strings.xml sample_app_logo.xml sample_search_icon.xml sample_add_icon.xml sample_edit_icon.xml sample_share_icon.xml sample_mic_icon.xml sample_camera_icon.xml sample_videocam_icon.xml	Informationen zur Fehlerbehebung, um Importfehler bei „ColorProvider“ zu vermeiden: Verwenden Sie „androidx.glance.color.ColorProvider(dayColor, nightColor)“. Verwenden Sie für einfarbige Hintergrundfarben direkt `GlanceModifier.background(Color)` anstelle von `ColorProvider`.
Layout mit Text und Bild	TextWithImageAppWidget.kt TextWithImageLayout.kt FakeTextWithImageRepository.kt sample_text_with_image_widget_info.xml FontUtils.kt dimens.xml strings.xml sample_text_icon.xml sample_refresh_icon.xml sample_placeholder_image.png sample_info_icon.xml sample_no_data_icon.xml	Halten Sie sich an die Regeln für die Größenanpassung von responsiven Layouts, damit Text und Bilder je nach verfügbaren Widget-Abmessungen nebeneinander oder übereinander angezeigt werden.