Diseños de widgets canónicos
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Para crear diseños de widgets eficaces, primero identifica tu contenido principal. Tu diseño determina cómo se organizan la información y los elementos interactivos dentro de tu widget. Android ofrece varios diseños precompilados para barras de herramientas, texto, listas y widgets tipo cuadrícula para optimizar este proceso.
Texto
Los diseños de texto son ideales para mostrar información concisa. Para mejorar el atractivo visual de tu widget, incluye de manera opcional una imagen junto con el texto.
Solo texto
Ideal para títulos, actualizaciones de estado, descripciones breves o cualquier situación en la que una sola línea de texto transmita el mensaje de manera eficaz. Consulta el
ejemplo de diseño canónico
para obtener orientación sobre cómo escalar de forma dinámica el contenido de texto según el tamaño del widget.
Texto y imagen
Incluye una imagen para aumentar el impacto visual. Para obtener más información, consulta Puntos de interrupción y aprende a adaptar este diseño para diferentes tamaños de pantalla.
Usa diseños de barra de herramientas para proporcionar a los usuarios acceso rápido a las tareas que se usan con frecuencia en tu app, en un diseño flexible que se adapta a todos los tamaños de widgets.
Barra de herramientas de búsqueda
El diseño de una barra de herramientas de búsqueda se diseñó intencionalmente para enfocar la búsqueda como una acción principal en la barra de herramientas. Los botones adicionales pueden proporcionar acceso rápido a las funciones que se usan con frecuencia.
Barra de herramientas
Las barras de herramientas presentan el desarrollo de la marca de la app, seguido de botones para las tareas más usadas que son ideales para la configuración con interruptores o los vínculos de tareas. Cuando se cambia el tamaño, se pueden ocultar las opciones que se usan menos en favor de las acciones más comunes. Usa Puntos de interrupción para agregar un nuevo botón táctil mínimo de 48 dp cuando haya espacio.
Listas
Usa diseños de lista para organizar varios elementos en un formato claro y legible. Esto es ideal para los títulos de noticias, las listas de tareas pendientes o los mensajes. Organiza el contenido en una lista estructurada y fácil de analizar. Elige entre una presentación con o sin contenedor según las necesidades de tu contenido.
Lista de imágenes y texto
Las listas de imágenes y texto que se pueden escanear fácilmente son perfectas para mostrar varios tipos de contenido, como títulos de noticias, playlists con portadas de álbumes o mensajes.
Lista de tareas
El diseño de la lista de tareas es perfecto para mostrar tareas y proporcionar objetivos de presión claros para que los usuarios marquen fácilmente los elementos como hechos.
Lista de acciones
Proporciona una agrupación de controles intuitiva con listas de acciones, en las que los estados de activación y desactivación visuales ofrecen comentarios inmediatos sobre los estados de los elementos.
Cuadrícula
Presenta imágenes en una cuadrícula compacta, flexible y visualmente atractiva con etiquetas opcionales.
Usa columnas y filas que se adapten a diferentes tamaños de pantalla.
Solo imagen
Crea galerías de imágenes desplazables y visualmente impactantes con cuadrículas de solo imágenes. Las filas y las columnas se adaptan automáticamente a varios tamaños de pantalla para lograr una presentación óptima.
Imagen y texto
También puedes incorporar etiquetas y descripciones de texto para enriquecer el contenido de tu cuadrícula de imágenes con contexto e información adicionales.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-07-27 (UTC)
[null,null,["Última actualización: 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."]]
