Kanonische Layouts

Canonical layouts are proven, versatile layouts that provide an optimal user experience on a variety of form factors.

Depiction of large screen devices showing the canonical layouts.

The canonical layouts support small screen phones as well as tablets, foldables, and ChromeOS devices. Derived from Material Design guidance, the layouts are aesthetic as well as functional.

The Android framework includes specialized components that make implementation of the layouts straightforward and reliable.

The canonical layouts create engaging, productivity‑enhancing UIs that form the foundation of great apps.

Wenn Sie bereits mit den kanonischen adaptiven App-Layouts vertraut sind, aber noch nicht welche Android-APIs Sie verwenden sollen, erfahren Sie hier .

List-detail

Wireframe of list-detail layout.

The list-detail layout enables users to explore lists of items that have descriptive, explanatory, or other supplementary information—the item detail.

The layout divides the app window into two side-by-side panes: one for the list, one for the detail. Users select items from the list to display the item detail. Deep links in the detail reveal additional content in the detail pane.

Expanded-width displays (see Use window size classes) accommodate both the list and detail at the same time. Selection of a list item updates the detail pane to show the related content for the selected item.

Medium- and compact-width displays show either the list or the detail, depending on user interaction with the app. When just the list is visible, selection of a list item displays the detail in place of the list. When just the detail is visible, pressing the back button redisplays the list.

Configuration changes such as device orientation changes or app window size changes can change the display's window size class. A list‑detail layout responds accordingly, preserving app state:

  • If an expanded-width display showing both the list and detail panes narrows to medium or compact, the detail pane remains visible and the list pane is hidden
  • If a medium- or compact-width display has just the detail pane visible and the window size class widens to expanded, the list and detail are shown together, and the list indicates that the item corresponding to the content in the detail pane is selected
  • If a medium- or compact-width display has just the list pane visible and widens to expanded, the list and a placeholder detail pane are shown together

List-detail is ideal for messaging apps, contact managers, file browsers, or any app where the content can be organized as a list of items that reveal additional information.

Figure 1. Messaging app showing a list of conversations and the details of a selected conversation.

Implementation

Ein Listendetaillayout kann mit einer Vielzahl von Technologien erstellt werden, darunter Compose, Ansichten und das Einbetten von Aktivitäten (für ältere Apps). Im Abschnitt Einschlägigkeit finden Sie Informationen dazu, welche Technologie für Ihre App am besten geeignet ist.

Die Bibliothek SlidingPaneLayout dient zur Implementierung von Layouts mit Listendetails, die auf Ansichten oder Fragmenten basieren.

Deklariere zuerst ein SlidingPaneLayout als Stammelement deines XML-Layouts. Fügen Sie als Nächstes die beiden untergeordneten Elemente hinzu, entweder Ansichten oder Fragmente, die die Listen- und Detailinhalte darstellen.

Implementieren Sie eine Kommunikationsmethode, um Daten zwischen den Listendetailansichten oder -fragmenten zu übergeben. ViewModel wird empfohlen, da damit Geschäftslogik gespeichert und Konfigurationsänderungen überstanden werden können.

SlidingPaneLayout bestimmt automatisch, ob die Liste und die Details zusammen oder einzeln angezeigt werden. In einem Fenster mit ausreichend horizontalem Platz werden Liste und Details nebeneinander angezeigt. In einem Fenster, das nicht genügend Platz bietet, wird je nach Interaktion des Nutzers mit der App entweder die Liste oder die Details angezeigt.

Eine Beispielimplementierung finden Sie im Beispiel Listendetail mit Schiebefeld.

Eingebettete Aktivitäten

Mit der Aktivitätseinbettung können Sie zulassen, dass Legacy-Anwendungen mit mehreren Aktivitäten zwei Aktivitäten nebeneinander auf demselben Bildschirm oder gestapelt (eine überlagern) anzeigen. Wenn in Ihrer App die Liste und die Details eines Listen-Detaillayouts in separaten Aktivitäten implementiert sind, können Sie mithilfe der Aktivitäts-Embedding-Funktion ein Listen-Detaillayout mit minimaler oder keiner Code-Refaktorisierung erstellen.

Implementieren Sie das Einbetten von Aktivitäten, indem Sie eine Aufteilung des Aufgabenfensters mithilfe einer XML-Konfigurationsdatei angeben. Die Aufteilung definiert die primäre Aktivität, die die Aufteilung initiiert, und eine sekundäre Aktivität. Geben Sie mithilfe der Unterbrechungen der Fenstergrößenklasse eine Mindestanzeigebreite für die Aufteilung an. Wenn die Displaybreite unter dem Mindestwert liegt, werden die Aktivitäten übereinander angezeigt. Wenn die Mindestanzeigebreite beispielsweise 600 dp beträgt, werden die Aktivitäten auf kompakten Displays überlagernd dargestellt, auf mittelgroßen und erweiterten Bildschirmen jedoch nebeneinander.

Das Einbetten von Aktivitäten wird unter Android 12L (API-Level 32) und höher unterstützt. Es kann aber auch auf niedrigeren API-Levels verfügbar sein, wenn es von Geräteherstellern implementiert wird. Wenn die Aktivitäts-Embedding-Funktion auf einem Gerät nicht verfügbar ist, führt das zu einem Fallback-Verhalten, bei dem die Listen- oder Detailaktivität je nach Nutzerinteraktion mit der App das gesamte App-Fenster einnimmt.

Weitere Informationen finden Sie unter Aktivitäten einbetten.

Eine Beispielimplementierung findest du im Beispiel Listendetails mit eingebetteten Aktivitäten.

Feed

Wireframe of feed layout.

A feed layout arranges equivalent content elements in a configurable grid for quick, convenient viewing of a large amount of content.

Size and position establish relationships among the content elements.

Content groups are created by making elements the same size and positioning them together. Attention is drawn to elements by making them larger than nearby elements.

Cards and lists are common components of feed layouts.

A feed layout supports displays of almost any size because the grid can adapt from a single, scrolling column to a multi‑column scrolling feed of content.

Feeds are especially well suited for news and social media apps.

Figure 2. Social media app showing posts in cards of varying sizes.

Implementation

Ein RecyclerView rendert effizient eine große Anzahl von Elementen in einer einzelnen Spalte. Mit GridLayoutManager werden Elemente in einem Raster angeordnet, sodass die Elementgrößen und -spannen konfiguriert werden können.

Konfigurieren Sie die Rasterspalten anhand der Größe des verfügbaren Anzeigebereichs, um die minimal zulässige Breite für Elemente festzulegen.

Die Standard-Spannungsstrategie von GridLayoutManager, also eine Spanne pro Element, kann überschrieben werden, indem eine benutzerdefinierte SpanSizeLookup erstellt wird. Passen Sie die Spannweite an, um bestimmte Elemente stärker hervorzuheben.

Auf Displays mit kompakter Breite, die nur Platz für eine Spalte bieten, verwenden Sie anstelle von GridLayoutManager den Befehl LinearLayoutManager.

Eine Beispielimplementierung findest du im Beispiel Feed mit Aufrufen.

Supporting pane

Wireframe of supporting pane layout.

Supporting pane layout organizes app content into primary and secondary display areas.

The primary display area occupies the majority of the app window (typically about two thirds) and contains the main content. The secondary display area is a pane that takes up the remainder of the app window and presents content that supports the main content.

Supporting pane layouts work well on expanded-width displays (see Use window size classes) in landscape orientation. Medium- or compact‑width displays support showing both the primary and secondary display areas if the content is adaptable to narrower display spaces, or if the additional content can be initially hidden in a bottom or side sheet accessible by means of a control such as a menu or button.

A supporting pane layout differs from a list‑detail layout in the relationship of the primary and secondary content. Secondary pane content is meaningful only in relation to the primary content; for example, a supporting pane tool window is irrelevant by itself. The supplementary content in the detail pane of a list‑detail layout, however, is meaningful even without the primary content, for example, the description of a product from a product listing.

Use cases for supporting pane include:

  • Productivity apps: A document or spreadsheet accompanied by reviewer comments in a supporting pane
  • Media apps: A streaming video complemented by a list of related videos in a supporting pane, or the depiction of an album of music supplemented with a playlist
  • Search and reference apps: A query input form with results in a supporting pane
Figure 3. Shopping app with product descriptions in a supporting pane.

Implementation

Ein unterstützendes Steuerfeld-Layout wird mit einem Hilfslayout wie LinearLayout oder ConstraintLayout implementiert. Fenstergrößenklassen festlegen die die für Ihre App verfügbare horizontale Anzeigefläche in drei Kategorien: „Kompakt“ (< 600 dp), „mittel“ (>= 600 dp) und „Erweitert“ (≥ 840 dp).

Definieren Sie die Layouts für jede Fenstergrößenklasse wie folgt:

  • Kompakt:Platzieren Sie im Ordner layout der App-Ressourcen Inhalte, die Rendert den unterstützenden Bereich unter dem Hauptinhalt oder in einem Tabellenblatt am unteren Rand
  • Mittel: Geben Sie im Ordner layout-w600dp unterstützende Inhalte des Bereichs an. sodass der Hauptinhalt und der unterstützende Bereich nebeneinander gerendert werden, gleichmäßige Aufteilung der horizontalen Anzeigefläche
  • Maximiert: Fügen Sie im Ordner layout-w840dp Inhalte für den Infobereich hinzu, sodass sich der Hauptinhalt und der Infobereich nebeneinander darstellen. Der Infobereich nimmt jedoch nur 30 % des horizontalen Bereichs ein, sodass die restlichen 70 % für den Hauptinhalt übrig bleiben.

Verwenden Sie ein ViewModel für die Kommunikation zwischen dem Hauptinhalt und dem unterstützenden Scheiben, ob mit Ansichten, Fragmenten oder einer Kombination.

Implementierungsbeispiele finden Sie in den folgenden Beispielen:

Geltungsbereich

Die kanonischen Layouts ermöglichen eine vielseitige Präsentation von Inhalten für einfachen Zugriff und detaillierte explorative Datenanalysen. Anhand des folgenden Flussdiagramms können Sie ermitteln, welche Layout- und Implementierungsstrategie für die Anwendungsfälle Ihrer App am besten geeignet ist.

Beispiele für die kanonischen Layouts, die in verschiedenen Arten von Apps implementiert sind, finden Sie in der Galerie für große Bildschirme.

Abbildung 4: Entscheidungsbaum für das kanonische Layout auf großen Bildschirmen

Additional resources