Mises en page canoniques

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.

Si vous connaissez déjà les mises en page standards des applications adaptatives, mais que vous ne les savoir quelles API Android utiliser, passez à la section Applicabilité pour déterminer quelle mise en page convient aux cas d'utilisation de votre application.

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, interactive media 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

Vous pouvez créer une mise en page de type "Liste et vue détaillée" avec différentes technologies, y compris Compose, des vues et l'intégration d'activités (pour les anciennes applications). Consultez la section Applicabilité pour déterminer la technologie la plus adaptée à votre application.

La bibliothèque SlidingPaneLayout est conçue pour implémenter des mises en page de type "Liste et vue détaillée" à partir de vues ou de fragments.

Tout d'abord, déclarez un SlidingPaneLayout comme élément racine de votre mise en page XML. Ajoutez ensuite les deux éléments enfants (vues ou fragments) qui représentent la liste et le contenu détaillé.

Implémentez une méthodologie de communication pour transmettre les données entre les vues ou les fragments de la mise en page. ViewModel est recommandé, car il peut stocker la logique métier et survivre aux changements de configuration.

SlidingPaneLayout détermine si la liste et la vue détaillée doivent être affichées ensemble ou individuellement. Dans une fenêtre disposant d'une largeur suffisante pour accueillir les deux, la liste et la vue détaillée s'affichent côte à côte. Dans une fenêtre qui manque d'espace, la liste ou les détails s'affichent en fonction de l'interaction de l'utilisateur avec l'application.

Pour obtenir un exemple d'implémentation, consultez l'exemple Mise en page de type "Liste et vue détaillée" avec volet coulissant.

Intégration d'activités

Utilisez l'intégration d'activités pour permettre aux anciennes applications multi-activités d'afficher deux activités côte à côte sur le même écran ou de les empiler les unes sur les autres. Si votre application implémente la liste et la vue détaillée d'une mise en page "Liste/Détail" dans des activités distinctes, l'intégration d'activités vous permet de créer facilement une mise en page de ce type avec peu de, voire aucune refactorisation du code.

Implémentez l'intégration d'activités en spécifiant un fractionnement de la fenêtre de tâche à l'aide d'un fichier de configuration XML. Le fractionnement distingue l'activité principale, qui en est à l'origine, de l'activité secondaire. Spécifiez une largeur d'écran minimale pour le fractionnement à l'aide des points d'arrêt de classe de taille de fenêtre. Lorsque la largeur d'affichage passe en dessous du point d'arrêt minimal, les activités sont affichées l'une en superposition sur l'autre. Par exemple, si la largeur d'écran minimale est de 600 dp, les activités sont affichées l'une en superposition sur les écrans compacts, mais côte à côte sur les écrans de taille moyenne et étendus.

L'intégration d'activités est compatible avec Android 12L (niveau d'API 32) ou version ultérieure, mais peut également être disponible à des niveaux d'API inférieurs si les fabricants des appareils l'ont configurée. Lorsque l'intégration d'activités n'est pas disponible sur un appareil, la solution de remplacement consiste à afficher soit la liste, soit la vue détaillée dans l'intégralité de la fenêtre d'application, selon ce que l'utilisateur est en train de faire.

Pour en savoir plus, consultez Intégration d'activités.

Pour obtenir un exemple d'implémentation, consultez l'exemple Mise en page de type "Liste et vue détaillée" avec intégration d'activités.

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

Une RecyclerView permet d'afficher efficacement un grand nombre d'éléments dans une seule colonne. Un GridLayoutManager présente les éléments dans une grille, ce qui permet de configurer la taille des éléments et leur chevauchement.

Configurez les colonnes de la grille en fonction de la taille de la zone d'affichage disponible afin de définir la largeur minimale autorisée pour les éléments.

Vous pouvez remplacer la stratégie de chevauchement par défaut GridLayoutManager, qui correspond à un segment par élément, en créant un SpanSizeLookup personnalisé. Ajustez l'intervalle pour mettre en valeur certains éléments par rapport à d'autres.

Pour les écrans de petite taille qui ne peuvent afficher qu'une seule colonne, utilisez LinearLayoutManager au lieu de GridLayoutManager.

Pour obtenir un exemple d'implémentation, consultez l'exemple Flux avec des vues.

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:

Figure 3. Shopping app with product descriptions in a supporting pane.

Implementation

A supporting pane layout is implemented using a helper layout such as LinearLayout or ConstraintLayout. Establish the window size classes that divide the amount of horizontal display space available for your app into three categories: compact (< 600dp), medium (>= 600dp), and expanded (>= 840dp).

For each window size class, define layouts as follows:

  • Compact: In the app resources layout folder, place content that renders the supporting pane below the main content or inside a bottom sheet
  • Medium: In the layout-w600dp folder, provide supporting pane content that results in the main content and supporting pane rendering side by side, splitting the horizontal display space equally
  • Expanded: In the layout-w840dp folder, include supporting pane content that results in the main content and supporting pane rendering side by side; however, the supporting pane takes up only 30% of the horizontal space, leaving the remaining 70% for the main content

Use a ViewModel for communication between the main content and the supporting pane whether using views, fragments, or a combination.

For implementation examples, see the following samples:

Applicability

The canonical layouts create multifaceted presentations of content for easy access and deep exploration. Use the following flowchart to determine which layout and implementation strategy is best for your app's use cases.

For examples of the canonical layouts implemented in different types of apps, see the large screen gallery.

Figure 4. Large screen canonical layout decision tree.

Additional resources