Les mises en page standards sont éprouvées et polyvalentes. Elles offrent une expérience utilisateur optimale sur différents facteurs de forme.
Les mises en page standards sont compatibles avec les petits écrans de téléphone, les tablettes, les appareils pliables et les appareils ChromeOS. Inspirées des consignes Material Design, ces mises en page sont à la fois esthétiques et fonctionnelles.
Le framework Android inclut des composants spécialisés qui permettent d'implémenter ces mises en page de manière simple et fiable.
Les mises en page standards permettent de créer des interfaces utilisateur attrayantes et qui favorisent la productivité, ce qui est la base d'une application de qualité.
If you're already familiar with the adaptive app canonical layouts but aren't sure which Android APIs to use, jump to the Applicability section for help determining which layout is right for your app's use cases.
Liste/détails
Cette mise en page permet aux utilisateurs d'explorer une liste d'éléments ainsi que des informations descriptives, explicatives ou complémentaires sur ces derniers sous forme de vue détaillée.
La mise en page divise la fenêtre de l'application en deux volets côte à côte : un pour la liste et un pour la vue détaillée. Les utilisateurs doivent sélectionner un élément dans la liste pour en afficher le détail. Le contenu supplémentaire de la vue détaillée est généré à l'aide de liens profonds.
Les écrans larges (voir Utiliser les classes de taille de fenêtre) affichent en même temps la liste et la vue détaillée. Quand l'utilisateur sélectionne un élément dans la liste, la vue détaillée est mise à jour avec le détail de cet élément.
Les petits et moyens écrans affichent soit la liste, soit la vue détaillée, selon ce que l'utilisateur est en train de faire. Si la liste est affichée au départ et que l'utilisateur sélectionne un élément, la vue détaillée de cet élément s'affichera à la place de la liste. Lorsque seule la vue détaillée est visible, l'utilisateur peut appuyer sur le bouton "Retour" pour afficher de nouveau la liste.
Les changements de configuration, tels que les changements d'orientation de l'appareil ou de la taille de fenêtre de l'application, peuvent modifier la classe de taille de la fenêtre de l'écran. Une mise en page de type "Liste et vue détaillée" se comporte en conséquence, en préservant l'état de l'application :
- Si un grand écran affiche au départ à la fois la liste et la vue détaillée, puis que cet écran est rétréci et ne fait plus qu'une taille moyenne ou petite, la vue détaillée restera visible tandis que la liste sera masquée.
- Si un petit ou moyen écran n'affiche au départ que la vue détaillée, puis que cet écran est élargi, la liste et la vue détaillée seront affichées. De plus, l'élément sélectionné dans la liste sera mis en avant.
- Si un petit ou moyen écran n'affiche au départ que la liste, puis que cet écran est élargi, la liste et un espace réservé pour la vue détaillée seront affichés.
La mise en page "Liste et vue détaillée" est idéale pour les applications de messagerie, les gestionnaires de contacts, les explorateurs de fichiers multimédias interactifs et toute application dont le contenu peut être organisé sous la forme d'une liste d'éléments et d'une vue détaillée avec des informations supplémentaires.
Implémentation
A list-detail layout can be created with a variety of technologies, including Compose, views, and activity embedding (for legacy apps). See the Applicability section for help deciding which technology is most suitable for your app.
The SlidingPaneLayout library is designed for implementation of
list‑detail layouts based on views or fragments.
First, declare a SlidingPaneLayout as the root element of your XML layout.
Next, add the two child elements—either views or fragments—that
represent the list and detail content.
Implement a communication methodology to pass data between the list-detail views
or fragments. ViewModel is recommended because of its ability to store
business logic and survive configuration changes.
SlidingPaneLayout automatically determines whether to display the list and
detail together or individually. In a window that has enough horizontal space to
accommodate both, the list and detail appear side by side. In a window that
lacks sufficient space, either the list or detail is displayed depending on the
user's interaction with the app.
For an example implementation, see the List-detail with sliding pane sample.
Activity embedding
Use activity embedding to enable legacy, multiple-activity apps to display two activities side by side on the same screen or stacked (one overlaying the other). If your app implements the list and detail of a list‑detail layout in separate activities, activity embedding enables you to create a list‑detail layout with minimal or no code refactoring.
Implement activity embedding by specifying a task window split using an XML configuration file. The split defines the primary activity, which initiates the split, and a secondary activity. Specify a minimum display width for the split using the window size class breakpoints. When the display width falls below the minimum breakpoint, the activities are displayed one overlaying the other. For example, if the minimum display width is 600dp, the activities are displayed one overlaying the other on compact displays, but side by side on medium and expanded displays.
Activity embedding is supported on Android 12L (API level 32) and higher, but may also be available on lower API levels if implemented by device manufacturers. When activity embedding is not available on a device, the fallback behavior results in the list activity or the detail activity occupying the entire app window based on user interaction with the app.
For more information, see Activity embedding.
For an example implementation, see the List-detail with activity embedding sample.
Flux
Une mise en page de type "Flux" organise des éléments de contenu équivalents dans une grille configurable afin d'afficher rapidement et facilement une grande quantité de contenu.
La taille et la position établissent les relations entre les éléments de contenu.
Pour créer des groupes de contenu, vous devez créer des éléments de la même taille et les positionner ensemble. Vous pouvez attirer l'attention sur certains éléments en les créant plus grands que ceux qui se trouvent à côté.
Les cartes et les listes sont des composants courants des mises en page de type "Flux".
Une mise en page de type "Flux" est compatible avec presque tous les formats d'écran, car la grille peut occuper une ou plusieurs colonnes selon les besoins, et l'utilisateur peut faire défiler le contenu.
Cette mise en page est particulièrement adaptée aux applications d'actualités et de réseaux sociaux.
Implémentation
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.
Volet secondaire
La mise en page de type "Volet secondaire" organise le contenu de l'application en deux zones d'affichage : une principale et une secondaire.
La zone d'affichage principale occupe la majeure partie de la fenêtre de l'application (généralement environ les deux tiers) et contient le contenu principal. La zone d'affichage secondaire est un volet qui occupe le reste de la fenêtre de l'application et qui vient en renfort du contenu principal.
Cette mise en page convient aux grands écrans (voir Utiliser des classes de taille de fenêtre) en mode paysage. Elle fonctionne également sur les petits et moyens écrans à condition que le contenu puisse s'adapter à des espaces plus étroits, ou si le contenu supplémentaire peut d'abord être caché dans une bottom sheet ou un espace latéral accessible via une commande, comme un menu ou un bouton.
Cette mise en page diffère de la mise en page "Liste et vue détaillée" à cause de la relation entre le contenu principal et le contenu secondaire. Le contenu du volet secondaire n'a de sens qu'en relation avec le contenu principal. Par exemple, un volet secondaire pour un outil ne peut pas être utilisé seul. En revanche, le contenu supplémentaire qui se trouve dans le volet des détails d'une mise en page "Liste et vue détaillée" est utile même sans le contenu principal (par exemple la description d'un produit sélectionné dans une liste).
Voici quelques cas d'utilisation du volet secondaire :
- Applications de productivité : document ou feuille de calcul en contenu principal, avec les commentaires du relecteur dans un volet secondaire
- Applications multimédias : vidéo en streaming en contenu principal, et liste de vidéos similaires dans un volet secondaire ; description d'un album de musique en contenu principal, et playlist dans un volet secondaire
- Outils et paramètres : outil de montage multimédia avec des palettes, des effets et d'autres paramètres dans un volet d'assistance
Implémentation
Vous pouvez implémenter la mise en page d'un volet secondaire à l'aide d'un helper comme LinearLayout ou ConstraintLayout. Définissez les classes de taille de fenêtre qui répartissent l'espace horizontal en trois catégories : petit écran (< 600 dp), écran moyen (>= 600 dp) et grand écran (>= 840 dp).
Pour chaque classe de taille de fenêtre, définissez les mises en page comme suit :
- Compact:dans le dossier de ressources d'application
layout, placez le contenu qui affiche le volet secondaire sous le contenu principal ou dans une bottom sheet - Écran moyen : dans le dossier
layout-w600dp, fournissez le contenu du volet secondaire. Ce volet s'affichera côte à côte avec le contenu principal, chacun utilisant la moitié de la largeur disponible. - Grand écran : dans le dossier
layout-w840dp, incluez le contenu du volet secondaire. Ce volet s'affichera côte à côte avec le contenu principal, à raison de 30 % et 70 % de la largeur disponible, respectivement.
Utilisez un ViewModel pour la communication entre le contenu principal et le
volet secondaire, que ce soit des vues, des fragments ou une combinaison de ces éléments.
Pour obtenir des exemples d'implémentation, consultez les exemples suivants :
Applicabilité
Les mises en page standards permettent de présenter le contenu de plusieurs manières pour en faciliter l'accès et l'exploration. L'organigramme suivant vous permet de déterminer la mise en page et la stratégie d'implémentation les plus adaptées aux cas d'utilisation de votre application.
Pour obtenir des exemples de mises en page standards mises en œuvre dans différents types d'applications, consultez la galerie sur grand écran.
Ressources supplémentaires
- Material Design — Mises en page standards