Kanonische Widget-Layouts
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Erstellen Sie effektive Widget-Layouts, indem Sie zuerst Ihre Hauptinhalte identifizieren. Das Layout bestimmt, wie Informationen und interaktive Elemente in Ihrem Widget angeordnet werden. 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 Darstellung prägnanter Informationen. Sie können das Widget optisch ansprechender gestalten, indem Sie neben dem Text ein Bild einfügen.
Nur Text
Ideal für Titel, Statusaktualisierungen, kurze Beschreibungen oder alle anderen Szenarien, in denen eine einzelne Textzeile die Botschaft effektiv vermittelt. Im Beispiel für ein kanonisches Layout finden Sie eine Anleitung zum dynamischen Skalieren von Textinhalten basierend auf der Größe des Widgets.
Text und Bild
Fügen Sie ein Bild hinzu, um einen visuellen Eindruck zu hinterlassen. Weitere Informationen dazu, wie Sie dieses Layout an verschiedene Bildschirmgrößen anpassen, finden Sie unter Breakpoints.
Mit Symbolleistenlayouts können Sie Nutzern in einem flexiblen Layout, das sich an verschiedene Widgetgrößen anpasst, schnellen Zugriff auf häufig verwendete Aufgaben in Ihrer App bieten.
Suchleiste
Das Layout einer Suchleiste ist so konzipiert, dass der Fokus auf die Suche als primäre Aktion in der Symbolleiste gelenkt wird. Zusätzliche praktische Tasten bieten schnellen Zugriff auf häufig verwendete Funktionen.
Symbolleiste
Symbolleisten enthalten das App-Branding, gefolgt von Schaltflächen für die am häufigsten verwendeten Aufgaben, die sich ideal für umschaltbare Einstellungen oder Aufgabenlinks eignen. Beim Ändern der Größe können weniger häufig verwendete Optionen ausgeblendet und durch häufiger verwendete Aktionen ersetzt werden. Verwenden Sie Bruchstellen, um eine neue anklickbare Schaltfläche mit einer Mindestgröße von 48 dp hinzuzufügen, wenn genügend Platz vorhanden ist.
Listen
Mit Listenlayouts können Sie mehrere Elemente in einem klaren, überschaubaren Format organisieren. Das eignet sich ideal für Nachrichtenschlagzeilen, To-do-Listen oder Nachrichten. Inhalte in einer strukturierten, leicht überschaubaren Liste organisieren. Wählen Sie je nach Inhaltsanforderungen zwischen einer containerisierten oder containerlosen Präsentation aus.
Text- und Bildliste
Leicht überschaubare Text- und Bildlisten eignen sich hervorragend, um mehrere Inhaltstypen zu präsentieren, z. B. Nachrichtenschlagzeilen, Playlists mit Albumcovern oder Nachrichten.
Checkliste
Das Checklisten-Layout eignet sich perfekt für die Darstellung von Aufgaben. Nutzer können Elemente ganz einfach als erledigt markieren.
Aktionsliste
Bieten Sie eine intuitive Steuerungsgruppierung mit Aktionslisten, bei denen visuelle Ein-/Aus-Status sofort Feedback zum Status der Elemente geben.
GRid
Präsentieren Sie Bilder in einem kompakten, flexiblen, visuell ansprechenden Raster mit optionalen Labels.
Verwenden Sie Spalten und Zeilen, die sich an unterschiedliche Bildschirmgrößen anpassen.
Nur Bild
Mithilfe von reinen Bilderrastern 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.
Bild und Text
Sie können auch Textlabels und Beschreibungen einfügen, um den Inhalt Ihres Bilderrasters mit zusätzlichem Kontext und Informationen anzureichern.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-27 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-07-27 (UTC)."],[],[],null,["# Canonical widget layouts\n\nCraft effective widget layouts by first identifying your core content. Your\nlayout dictates how information and interactive elements are organized within\nyour widget. Android offers several prebuilt layouts for toolbars, text, list\nand grid-type widgets to streamline this process.\n| **Note:** View detailed layout specs in our [Figma Widget Canonical Builder](https://goo.gle/widget-canonical), and find the code samples using Jetpack Glance in the [Android Platform Samples GitHub repository](https://github.com/android/platform-samples/tree/main/samples/user-interface/appwidgets/src/main/java/com/example/platform/ui/appwidgets/glance).\n\nText\n----\n\nText layouts are ideal for displaying concise information. Enhance the visual\nappeal of your widget by optionally including an image alongside the text. \n**Text only**\n\n\nIdeal for titles, status updates, short descriptions, or any scenario\nwhere a single line of text effectively conveys the message. Refer to the\n[Canonical layout sample](https://github.com/android/platform-samples/tree/main/samples/user-interface/appwidgets/src/main/java/com/example/platform/ui/appwidgets/glance)\nfor guidance on dynamically scaling text content based on widget size. \n**Text and image**\n\n\nInclude an image for added visual impact. For more information, see\n[Breakpoints](/design/ui/mobile/guides/widgets/sizing#breakpoints)\nto learn how to adapt this layout for different screen sizes.\n\nToolbars\n--------\n\nUse toolbar layouts to provide users with quick access to frequently used tasks\nin your app, in a flexible layout that adapts across widget sizes. \n**Search Toolbar**\n\n\nA search toolbar layout is intentionally designed to draw focus to search\nas a primary action in the toolbar. Additional handy buttons can provide\nquick access to frequently used functions.\n\n\n**Toolbar**\n\n\nToolbars presents app branding followed by buttons for the most used tasks\nthat are ideal for toggleable settings or task links. When resizing, less\ncommonly used options can be hidden in favor of more common actions. Use\n[Breakpoints](/design/ui/mobile/guides/widgets/sizing#breakpoints)\nto add a new minimum 48dp tappable button when there's room.\n\n\u003cbr /\u003e\n\nLists\n-----\n\nUse list layouts to organize multiple items in a clear, scannable format. This\nis ideal for news headlines, to-do lists or messages. Organize content into a\nstructured, easily scannable list. Choose between containerized or containerless\npresentation based on your content needs. \n**Text and image list**\n\n\nEasily scannable text and image lists are perfect for showcasing multiple\ncontent types, such as news headlines, playlists with album art, or\nmessages. \n**Checklist**\n\n\nThe checklist layout is perfect for displaying tasks, providing clear tap\ntargets for users to easily mark items as done. \n**Action list**\n\n\nProvide intuitive control grouping with action lists, where visual on/off\nstates offer immediate feedback on item statuses.\n\nGrid\n----\n\nPresent images in a compact, flexible, visually rich grid with optional labels.\nUse columns and rows that adapt to different screen sizes. \n**Image only**\n\n\nCreate visually impactful, scrollable image galleries using image-only\ngrids. Rows and columns automatically adapt to various screen sizes for\noptimal presentation. \n**Image and text**\n\n\nYou can also incorporate text labels and descriptions, enriching your\nimage grid content with additional context and information."]]
