Para crear diseños de widgets eficaces, primero identifica tu contenido principal. El diseño dicta cómo se organizan la información y los elementos interactivos dentro del widget. Android ofrece varios diseños precompilados para barras de herramientas, texto, listas y widgets de 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 del widget, puedes incluir una imagen junto al 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.
Incluye una imagen para agregar impacto visual. Para obtener más información, consulta Puntos de interrupción para aprender a adaptar este diseño a diferentes tamaños de pantalla.
Barras de herramientas
Usa diseños de barras 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 los tamaños de los widgets.
Un diseño de barra de herramientas de búsqueda está diseñado intencionalmente para centrar la atención en la búsqueda como acción principal en la barra de herramientas. Los botones prácticos adicionales pueden proporcionar acceso rápido a las funciones que se usan con frecuencia.
Las barras de herramientas presentan la marca de la app seguida de botones para las tareas más usadas que son ideales para la configuración conmutable o los vínculos de tareas. Cuando se cambia el tamaño, las opciones que se usan con menos frecuencia se pueden ocultar en favor de las acciones más comunes. Usa puntos de interrupción para agregar un nuevo botón presionable de 48 dp mínimo cuando haya espacio.
Listas
Usa diseños de listas para organizar varios elementos en un formato claro y legible. Esto es ideal para titulares de noticias, listas de tareas pendientes o mensajes. Organiza el contenido en una lista estructurada y legible. Elige entre la presentación en contenedores o sin contenedores según tus necesidades de contenido.
Las listas de texto e imágenes legibles son perfectas para mostrar varios tipos de contenido, como titulares de noticias, playlists con imágenes de álbumes o mensajes.
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 rápidamente los elementos como completados.
Proporciona una agrupación de control intuitiva con listas de acciones, en las que los estados visuales de activación y desactivación ofrecen comentarios inmediatos sobre los estados de los elementos.
Ideal para mostrar imágenes envolventes a sangre completa en Android 17 y versiones posteriores, este diseño usa el desplazamiento de ajuste para garantizar que cada elemento secundario se alinee perfectamente con la altura del contenedor del widget.
Cuadrícula
Presenta imágenes en una cuadrícula compacta, flexible y visualmente enriquecida con etiquetas opcionales. Usa columnas y filas que se adapten a diferentes tamaños de pantalla.
Crea galerías de imágenes desplazables y visualmente impactantes con cuadrículas solo de imágenes. Las filas y las columnas se adaptan automáticamente a varios tamaños de pantalla para una presentación óptima.
También puedes incorporar etiquetas y descripciones de texto, lo que enriquece el contenido de la cuadrícula de imágenes con contexto e información adicionales.
Muestras de código
En la siguiente tabla, se asigna cada diseño canónico a su implementación de Jetpack Glance correspondiente en el repositorio de GitHub de Android Platform Samples.
| Diseño canónico | Categoría de diseño | Archivo de ejemplo de implementación |
|---|---|---|
| Solo texto | Texto | LongTextAppWidget.kt |
| Texto con imágenes | Texto | TextWithImageAppWidget.kt |
| Barra de herramientas de búsqueda | Barras de herramientas | SearchToolBarAppWidget.kt |
| Barra de herramientas (estándar) | Barras de herramientas | ToolBarAppWidget.kt |
| Lista de texto e imágenes | Listas | ImageTextListAppWidget.kt |
| Lista de tareas | Listas | CheckListAppWidget.kt |
| Lista de acciones | Listas | ActionListAppWidget.kt |
| Desplazamiento de ajuste a sangre completa | Listas | FullBleedImageAppWidget.kt |
| Solo imágenes | Cuadrícula | ImageGridAppWidget.kt |
| Imágenes y texto | Cuadrícula | ImageGridAppWidget.kt |