Para crear diseños de widgets eficaces, primero identifica tu contenido principal. Tu diseño dicta cómo se organizan la información y los elementos interactivos dentro de tu widget. Android ofrece varios diseños prediseñados para barras de herramientas, texto y widgets de tipo lista y cuadrícula para optimizar este proceso.
Texto
Los diseños de texto son ideales para mostrar información concisa. Mejora el atractivo visual de tu widget incluyendo, de forma opcional, 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 aumentar el impacto visual. Para obtener más información, consulta Puntos de interrupción y descubre cómo adaptar este diseño a diferentes tamaños de pantalla.
Barras de herramientas
Usa diseños de barras de herramientas para brindar a los usuarios acceso rápido a las tareas que realizan con frecuencia en tu app, en un diseño flexible que se adapta a los diferentes tamaños de widgets.
El diseño de una 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 adicionales prácticos 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 activable o los vínculos de tareas. Cuando se cambia el tamaño, se pueden ocultar las opciones que se usan con menos frecuencia en favor de las acciones más comunes. Usa puntos de interrupción para agregar un nuevo botón en el que se pueda presionar con un mínimo de 48 dp cuando haya espacio.
Listas
Usa diseños de lista para organizar varios elementos en un formato claro y fácil de leer. Esto es ideal para titulares de noticias, listas de tareas o mensajes. Organiza el contenido en una lista estructurada y fácil de consultar. Elige entre la presentación con o sin contenedores según tus necesidades de contenido.
Las listas de texto e imágenes fáciles de leer son perfectas para mostrar varios tipos de contenido, como titulares de noticias, playlists con imagen del álbum o mensajes.
El diseño de lista de tareas es perfecto para mostrar tareas y proporcionar objetivos de toque claros para que los usuarios marquen rápidamente los elementos como completados.
Proporciona una agrupación de controles intuitiva con listas de acciones, en las que los estados visuales de activación y desactivación ofrecen comentarios inmediatos sobre el estado de los elementos.
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 que solo contienen 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 enriquecerá el contenido de tu 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 correspondiente de Jetpack Glance en el repositorio de GitHub de muestras de la plataforma de Android.
| Diseño canónico | Categoría de diseño | Archivo de implementación de muestra |
|---|---|---|
| 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 imágenes y texto | Listas | ImageTextListAppWidget.kt |
| Lista de tareas | Listas | CheckListAppWidget.kt |
| Lista de acciones | Listas | ActionListAppWidget.kt |
| Solo imagen | Cuadrícula | ImageGridAppWidget.kt |
| Imagen y texto | Cuadrícula | ImageGridAppWidget.kt |