Une mise en page définit la structure visuelle permettant à un utilisateur d'interagir avec votre application, par exemple dans une activité. Android fournit un éventail de bibliothèques, de points de départ canoniques et de techniques pour afficher et positionner du contenu.
Prises de possession
Respectez les zones de sécurité de l'appareil, qui incluent des parties de l'interface utilisateur telles que les découpes d'écran, les encarts bord à bord, les écrans périphériques, les claviers logiciels et les barres système.
À faire:proposez une mise en page flexible pour permettre aux utilisateurs d'interagir avec le clavier.
Vidéo 1 : Proposer une mise en page flexible permettant aux utilisateurs d'interagir
Conservez les interactions essentielles, telles que la navigation principale, dans une zone d'écran accessible.
Figure 1:Les boutons d'action flottants offrent un point d'interaction visible et accessible Utilisez le confinement pour regrouper des contenus associés afin de guider l'utilisateur dans le contenu et les actions.
Figure 2:Fiches utilisant une structuration explicite pour regrouper le contenu avec des actions associées Assurez un alignement cohérent entre les contenus similaires et les éléments de l'interface utilisateur.
À éviter:perturbez la lisibilité en les espaceant de manière incohérente, comme les éléments, car cela peut donner l'impression que les conceptions peuvent être désordonnées.
À faire:établissez un espacement cohérent entre les éléments similaires.
Figure 3:Ne perturbez pas la lisibilité Ne vous en tenir pas au mode portrait ni à une mise en page idéalisée: tenez compte des différents formats, classes de taille et résolutions que les utilisateurs peuvent rencontrer.
Ne submergez pas les utilisateurs avec un trop grand nombre d'actions par vue.
Lorsque vous créez des mises en page personnalisées, notez la façon dont le contenu doit s'intégrer dans la mise en page à l'aide de l'alignement, des contraintes ou de la gravité. Indiquez comment les images doivent répondre à leur conteneur pour s'afficher correctement.
Composantes d'un écran d'application Android standard
La plupart des applications Android se composent de régions appelées barres système, zone de navigation et corps.
Barres système
La barre d'état et la barre de navigation (collectivement appelées "barres système") affichent des informations importantes telles que le niveau de la batterie, l'heure et les alertes de notification, et permettent une interaction directe avec l'appareil, où que vous soyez. En savoir plus sur les barres système.
Les barres système font partie intégrante de l'interface de l'appareil. Ajoutez-les en tant que couche supérieure de vos conceptions pour vous assurer qu'elles sont prises en compte dans la mise en page de l'écran. Dans le cas contraire, les utilisateurs pourraient supposer à tort que l'intention est de les masquer, vous n'auriez pas pu les styliser, et l'espacement pourrait finir par être incorrect.
Ajoutez les barres en tant que couche supérieure. Utilisez android:navigationBarColor et android:statusBarColor pour appliquer des couleurs aux barres système du thème de votre application.
Zone de navigation
La navigation représente les différentes affordances qui permettent à un utilisateur de naviguer dans votre application, d'accéder à des actions importantes ou sur la plate-forme Android.
Zone du corps
La zone du corps contient le contenu de l'écran. Le corps du texte est composé de regroupements et de paramètres de mise en page supplémentaires. Elle doit continuer dans les régions de navigation et de barre système.
Déclarez WindowCompat.setDecorFitsSystemWindows(window, false) pour les encarts bord à bord.
Pour déterminer les schémas de composition et de navigation appropriés pour votre mise en page, cherchez à comprendre comment les utilisateurs interagissent avec votre contenu et comment ils parcourent l'architecture des informations de votre application. Cette compréhension peut vous aider à rendre votre conception plus axée sur l'utilisateur en créant une interface utilisateur sur laquelle les utilisateurs peuvent agir.
Composition et structure du contenu
Créez un flux et un rythme flexibles avec une structure et des méthodes de structuration pour votre contenu.
Structure de base: utilisez des marges et des colonnes pour les garde-fous visuels
Pour commencer à créer une structure solide avec des garde-fous cohérents, ajoutez des marges et des colonnes à vos mises en page.
Les marges fournissent un espacement sur les bords gauche et droit de l'écran et du contenu. Une valeur de marge standard pour un dimensionnement compact est de 16 dp, mais les marges doivent s'adapter aux écrans plus grands. Le contenu et les actions du corps de votre application doivent rester à l'intérieur et s'aligner sur ces marges.
À ce stade, vous pouvez également vous assurer que les encarts comprennent des zones de sécurité ou des encarts. Les encarts de barre système empêchent les actions essentielles de passer sous les barres système. Pour en savoir plus, consultez la section Dessiner le contenu derrière les barres système.
Utilisez des colonnes pour créer une structure de grille flexible pour un alignement cohérent et pour fournir une définition verticale à une mise en page en divisant le contenu dans la zone du corps. Le contenu est placé dans les zones de l'écran contenant les colonnes. Ces colonnes confèrent une structure à votre mise en page, offrant ainsi une structure pratique pour organiser les éléments.
Utilisez une grille de colonnes pour aligner le contenu sur une grille sous-jacente, tout en conservant un dimensionnement flexible. La grille de colonnes peut s'adapter à différents facteurs de forme en modifiant la taille des colonnes et le nombre de colonnes en fonction de la taille de l'écran à certains points, tout en permettant au contenu de s'adapter également. Évitez d'être trop précis avec la grille de colonnes. C'est ainsi que sert la grille de référence : fournir des unités d'espacement cohérentes.
Veillez à établir une grille de lignes associée, car elle peut limiter la mise à l'échelle horizontale du contenu selon les orientations et les facteurs de forme. En règle générale, l'établissement de règles de marge intérieure fournit la cohérence visuelle nécessaire.
Utiliser le confinement pour regrouper visuellement des éléments
Le confinement consiste à utiliser conjointement des espaces blancs et des éléments visibles pour créer un regroupement visuel. Un conteneur est une forme qui représente une zone fermée. Dans une mise en page unique, vous pouvez regrouper les éléments qui partagent un contenu ou une fonctionnalité similaires et les séparer des autres éléments à l'aide d'un espace ouvert, d'une typographie et de séparateurs.
Vous pouvez regrouper des éléments similaires avec des espaces blancs ou des divisions visibles pour guider l'utilisateur dans le contenu.
Le confinement implicite utilise un espace blanc pour regrouper visuellement le contenu afin de créer des limites de conteneur, tandis que le confinement explicite utilise des objets tels que des lignes de séparation et des cartes pour regrouper le contenu.
La figure suivante montre un exemple d'utilisation d'un confinement implicite pour contenir l'en-tête et la copie principale. La grille de colonnes permet d'aligner et de créer des regroupements. Les mises en surbrillance sont explicitement contenues dans des fiches. Utiliser l'iconographie et la hiérarchie des polices pour une meilleure séparation visuelle.
Positionnement du contenu
Android propose plusieurs façons de gérer les éléments de contenu dans leurs conteneurs respectifs, ce qui peut vous aider à les positionner correctement, y compris la gravité, l'espacement et la mise à l'échelle.
Gravity est une norme permettant de placer un objet dans un conteneur potentiellement plus grand pour des cas d'utilisation spécifiques. La figure suivante montre des exemples de positionnement des objets au début et au centre (1), en haut et au centre horizontal (2), en bas à gauche (3), et en bas et à droite (1).
Mise à l'échelle
La mise à l'échelle est essentielle pour s'adapter au contenu dynamique, à l'orientation de l'appareil et à la taille d'écran. Les éléments peuvent rester fixes ou être mis à l'échelle.
Il est important de noter comment les images sont affichées dans leurs conteneurs avec la mise à l'échelle et la position pour s'assurer qu'elles s'affichent comme vous le souhaitez malgré le contexte de l'appareil. Sinon, le focus principal de l'image peut sembler tronqué, les images peuvent être trop petites ou trop grandes pour la mise en page, ou d'autres effets indésirables.
Le contenu non noté peut s'afficher différemment de ce que vous attendiez ou que vous souhaitiez.
Contenu épinglé
De nombreux éléments intègrent des interactions, un défilement et un positionnement avec des emplacements ou des échafaudages. Certains éléments peuvent être modifiés pour rester fixes au lieu de réagir au défilement, comme les boutons d'action flottants qui hébergent des actions critiques.
Emplacement D
Utilisez AlignmentLine pour créer des lignes d'alignement personnalisées que les mises en page parentes peuvent utiliser pour aligner et positionner leurs enfants.
À éviter:perturbez la lisibilité en écartant de manière incohérente les éléments comme les éléments, ce qui peut donner l'impression que les conceptions peuvent être désordonnées.
À faire:établissez un espacement cohérent entre les éléments similaires.
Disposition des composants
Les composants Material 3 fournissent leurs propres configurations et états pour l'interaction et le contenu.
Compose propose des mises en page pratiques pour combiner des composants Material et des modèles d'écran courants. Les composables tels que Scaffold fournissent des emplacements pour divers composants et autres éléments d'écran. En savoir plus sur les composants et la mise en page Material
Mises en page et modèles de navigation
Si votre application contient plusieurs destinations que les utilisateurs peuvent parcourir, nous vous recommandons d'employer des associations de mise en page et de navigation couramment utilisées par d'autres applications. Étant donné que de nombreux utilisateurs possèdent déjà les modèles mentaux de ces associations, votre application sera plus intuitive pour eux.
Associations de mise en page et de navigation
La barre de navigation et le panneau de navigation modal sont utilisés comme modèles de navigation principaux pour les vues de mise en page parentes et les destinations de navigation principales.
La barre de navigation peut contenir trois à cinq destinations de navigation sur le même niveau de hiérarchie. Ce composant se transforme en rail de navigation pour les grands écrans.
Bien que le panneau de navigation puisse contenir plus de cinq destinations de navigation, le modèle n'est pas aussi idéal que la barre de navigation, car il est nécessaire d'accéder à la barre supérieure sur les tailles compactes.
Les onglets et la barre d'application inférieure de Material 3 sont des modèles de navigation secondaires que vous pouvez utiliser pour compléter la navigation principale ou apparaître dans les vues enfants.
Actions de mise en page
Fournissez des commandes permettant aux utilisateurs d'effectuer des actions. Les modèles courants incluent les actions de la barre supérieure, le bouton d'action flottant et les menus.
Pour les actions les plus importantes, un bouton d'action flottant fournit un bouton de grande taille bien visible à l'utilisateur. Fournissez une seule action à la fois à ce niveau. Un bouton d'action flottant peut apparaître sous plusieurs tailles et sous une forme développée, qui inclut un libellé. Utilisez Scaffold pour épingler un bouton d'action flottant afin qu'il soit toujours visible, même en cas de défilement.
Vous pouvez placer des actions secondaires dans la barre supérieure ou, si elles sont regroupées à côté de contenus associés, sur la page.
Pour toutes les actions supplémentaires qui ne sont pas nécessaires rapidement ou fréquemment, ajoutez-les dans un menu à développer.
Mises en page canoniques
Utilisez des mises en page standards comme point de départ et des compositions prêtes à l'emploi qui aident les mises en page à s'adapter aux cas d'utilisation et aux tailles d'écran courants. Esthétique et fonctionnelle, ces mises en page sont issues des conseils Material 3.
Le framework Android comprend des composants spécialisés qui rendent l'implémentation des mises en page simple et fiable à l'aide des API Jetpack Compose ou Views.
Mise en page liste/détails
Une mise en page de type "Liste/Détail" permet aux utilisateurs d'explorer des listes d'éléments contenant des informations descriptives, explicatives ou complémentaires (les détails de l'élément). Pour les écrans de format compact, seule la vue Liste ou détaillée est visible. Les listes, qui affichent un ensemble de contenus sous forme de lignes, constituent la forme la plus courante de mise en page pour les applications. Cette fonctionnalité est idéale pour les applications de messagerie, les gestionnaires de contacts, les navigateurs de fichiers ou toute application dont le contenu peut être organisé sous la forme d'une liste d'éléments révélant des informations supplémentaires.
Le contenu peut être statique ou dynamique.
- Le contenu dynamique est du contenu que votre application diffuse à la volée. Il est idéal pour afficher du contenu généré par l'utilisateur, ou pour refléter ses préférences ou ses actions. Par exemple, imaginez une application photo avec une liste déroulante de photos générées par l'utilisateur, qui est propre à chaque utilisateur et qui change à mesure que l'utilisateur importe des images. Ces images constituent du contenu dynamique.
- Le contenu statique représente du contenu codé en dur, qui ne peut être modifié qu'en apportant des modifications directement au code de votre application. Les images et le texte que chaque utilisateur peut voir sont des exemples de contenu statique.
Le fichier Figma Now in Android fournit plusieurs exemples de mise en page. L'exemple suivant présente une collection de contenu unidimensionnelle.
Explorez les listes Material 3 pour obtenir des conseils de conception supplémentaires sur les composants et les spécifications des listes.
Mise en page du flux
Une mise en page de flux organise des éléments de contenu équivalents dans une grille configurable pour un affichage rapide et pratique d'une grande quantité de contenu. (Consultez les consignes Material 3 pour l'utilisation de cartes dans une collection.) Sur les écrans compacts, les flux peuvent prendre la forme d'une liste ou d'une grille, généralement sous forme de cartes ou de cartes. Le contenu peut être dynamique, c'est-à-dire qu'il est transmis à partir d'une source dynamique externe telle qu'une API.
Une mise en page en grille est composée à la fois de lignes et de colonnes composées de principes de confinement implicites ou explicites. Pour en savoir plus, consultez la section sur le confinement sur cette page. Une mise en page en grille peut être appliquée de manière plus rigide ou décalée pour faire varier les lignes et les colonnes. Les deux doivent avoir une application cohérente de l'espacement et de la logique pour éviter toute confusion chez les utilisateurs. Découvrez les consignes Material 3 sur la création de flux.
Vous pouvez implémenter une mise en page de flux dans Compose avec des listes ou grilles différées, ou dans les vues avec RecyclerView ou CardView.
Mise en page avec volet secondaire
Un affichage sur mobile peut nécessiter des commandes ou des contenus compatibles. Généralement sous forme de feuilles ou de boîtes de dialogue, elles permettent à la vue principale de rester concentrée et épurée. Consultez les conseils M3 sur l'utilisation de la mise en page canonique du volet secondaire.
En savoir plus sur les conseils concernant M3 pour les bottom sheets
Mises en page relatives
Les entrées, le contenu ou d'autres actions peuvent apparaître les unes par rapport aux autres, ou limitées à un conteneur parent. Les mises en page peuvent être plus personnalisées, mais assurez-vous de suivre un regroupement, des colonnes et un espacement cohérents.
Les mises en page peuvent également utiliser une combinaison de types de mise en page. Par exemple, vous pouvez associer un carrousel ou un défilement horizontal à des fiches verticales. Vous pouvez également présenter un graphique personnalisé avec des données de liste verticale.
Vous pouvez présenter du contenu dans des lignes ou des colonnes défilantes avec des lignes ou des colonnes différées.
Découvrez les principes de base de la mise en page dans Compose et les composants d'un composable.
L'authentification est une disposition relative courante, comme illustré dans la figure suivante.
La mise en page plein écran est une autre mise en page courante, utilisée en mode immersif.
Si vous utilisez des vues au lieu de Compose, vous pouvez utiliser ConstraintLayout pour disposer les vues en fonction des relations entre les vues sœurs et la mise en page parente, ce qui permet d'utiliser des mises en page volumineuses et complexes.
ConstraintLayout vous permet de compiler entièrement par glisser-déposer au lieu de modifier le code XML à l'aide de l'éditeur de mise en page. Découvrez comment créer une UI avec l'éditeur de mise en page.
Adapter les mises en page
La conception adaptative consiste à concevoir des mises en page qui s'adaptent à des points d'arrêt et à des appareils spécifiques. En règle générale, nous prenons en compte la largeur de l'appareil pour déterminer où la mise en page doit changer ou s'adapter. Le Web et Android utilisent tous deux des concepts de responsive design, tels que les grilles et les images flexibles, pour créer des mises en page mieux adaptées à leur contexte.
Pour obtenir des consignes de conception sur l'adaptation des mises en page à des tailles d'écran plus grandes, consultez le guide du développeur Assurer la compatibilité avec différentes tailles d'écran dans Compose et la page Appliquer une mise en page de M3. Vous pouvez également consulter la galerie Android canonique sur grand écran pour trouver l'inspiration et découvrir comment implémenter des mises en page sur grand écran.
Bien que toutes les applications ne doivent pas être disponibles pour toutes les tailles d'écran, elles offrent à vos utilisateurs plus de liberté concernant l'ergonomie, la facilité d'utilisation et la qualité de l'application.
- Vous pouvez concevoir des écrans clés (communiquer les concepts essentiels ou votre application) avec des tailles de classe qui serviront de points d'arrêt.
- Vous pouvez également concevoir votre contenu de manière à réagir en indiquant comment le contenu doit être limité, développé ou ajusté.
Pour en savoir plus sur les mises en page, consultez la page Comprendre la mise en page avec Material Design 3 (M3).
WebViews
Une WebView est une vue qui affiche les pages Web intégrées à une application. Dans la plupart des cas, nous vous recommandons d'utiliser un navigateur Web standard, comme Chrome, pour diffuser du contenu auprès de l'utilisateur. Pour en savoir plus sur les navigateurs Web, consultez le guide sur l'appel d'un navigateur avec un intent.