Mises en page standards des widgets
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Créez des mises en page de widgets efficaces en commençant par identifier votre contenu principal. La mise en page détermine la façon dont les informations et les éléments interactifs sont organisés dans votre widget. Android propose plusieurs mises en page prédéfinies pour les barres d'outils, le texte, les listes et les widgets de type grille afin de simplifier ce processus.
Texte
Les mises en page textuelles sont idéales pour afficher des informations concises. Améliorez l'attrait visuel de votre widget en incluant éventuellement une image à côté du texte.
Texte uniquement
Idéal pour les titres, les mises à jour d'état, les descriptions courtes ou tout scénario où une seule ligne de texte transmet efficacement le message. Pour obtenir des conseils sur l'ajustement dynamique du contenu textuel en fonction de la taille du widget, consultez l'exemple de mise en page canonique.
Texte et image
Incluez une image pour renforcer l'impact visuel. Pour en savoir plus, consultez la section Points d'arrêt pour découvrir comment adapter cette mise en page à différentes tailles d'écran.
Utilisez des mises en page de barre d'outils pour permettre aux utilisateurs d'accéder rapidement aux tâches fréquemment effectuées dans votre application, dans une mise en page flexible qui s'adapte aux tailles de widgets.
Barre d'outils de recherche
La mise en page d'une barre d'outils de recherche est conçue intentionnellement pour attirer l'attention sur la recherche en tant qu'action principale dans la barre d'outils. Des boutons pratiques supplémentaires peuvent permettre d'accéder rapidement aux fonctions fréquemment utilisées.
Barre d'outils
Les barres d'outils présentent le branding de l'application, suivi des boutons des tâches les plus utilisées, qui sont idéaux pour les paramètres ou les liens de tâches activables. Lors du redimensionnement, les options moins utilisées peuvent être masquées au profit d'actions plus courantes. Utilisez les points d'arrêt pour ajouter un bouton tactile d'au moins 48 dp lorsqu'il y a de la place.
Listes
Utilisez des mises en page de liste pour organiser plusieurs éléments dans un format clair et lisible. Cette option est idéale pour les titres d'actualités, les listes de tâches ou les messages. Organisez les contenus dans une liste structurée et facile à parcourir. Choisissez entre une présentation conteneurisée ou sans conteneur en fonction de vos besoins en contenu.
Liste de texte et d'images
Les listes de texte et d'images facilement lisibles sont parfaites pour présenter plusieurs types de contenus, tels que des titres d'actualités, des playlists avec des pochettes d'album ou des messages.
Checklist
La mise en page de la checklist est parfaite pour afficher des tâches. Elle fournit des cibles de pression claires pour que les utilisateurs puissent facilement cocher les éléments.
Liste d'actions
Fournissez un regroupement de commandes intuitif avec des listes d'actions, où les états d'activation/de désactivation visuels offrent un retour immédiat sur l'état des éléments.
Grille
Présentez des images dans une grille compacte, flexible et visuellement riche, avec des libellés facultatifs.
Utilisez des colonnes et des lignes qui s'adaptent à différentes tailles d'écran.
Image uniquement
Créez des galeries d'images à faire défiler et à fort impact visuel à l'aide de grilles d'images uniquement. Les lignes et les colonnes s'adaptent automatiquement à différentes tailles d'écran pour une présentation optimale.
Image et texte
Vous pouvez également intégrer des libellés et des descriptions textuelles pour enrichir le contenu de votre grille d'images avec du contexte et des informations supplémentaires.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/27 (UTC).
[null,null,["Dernière mise à jour le 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."]]
