Descripción general de los widgets de apps

Los widgets son un aspecto esencial de la personalización de la pantalla principal. Son como vistas "resumidas" de los datos y las funciones más importantes de una app a los que se puede acceder directamente desde la pantalla principal del usuario. Los usuarios pueden mover widgets en los paneles de la pantalla principal y, si es compatible, cambiarles el tamaño para adaptar la cantidad de información en el widget según sus preferencias.

En esta documentación, se presentan los diferentes tipos de widgets que puedes crear y los principios de diseño que se deben seguir. Para compilar un widget de la app con las APIs de Remove View y los diseños XML, consulta Cómo crear un widget simple. Para compilar un widget con las APIs de estilo de Kotlin y Compose, consulta Resumen de Jetpack.

Tipos de widgets

Cuando planifiques tu widget, piensa qué tipo de widget deseas compilar. Por lo general, los widgets se clasifican en una de las siguientes categorías:

Widgets informativos

Ejemplo de widget del clima en el que se muestra Tokio como mayormente nublado, 14 grados y la temperatura proyectada desde las 4 p.m. hasta las 7 p.m.
Figura 1: Un widget de información de una app del clima

Por lo general, los widgets informativos muestran elementos de información fundamentales y hacen un seguimiento de cómo esa información cambia con el tiempo. Algunos ejemplos de widgets informativos son los widgets del clima, los widgets del reloj o el seguimiento de resultados deportivos. Por lo general, cuando se presionan los widgets de información, se inicia la app asociada y se abre una vista detallada de la información del widget.

Widgets de colección

Los widgets de colección se especializan en mostrar varios elementos del mismo tipo, como una colección de imágenes de una app de galería, una colección de artículos de una app de noticias o una colección de correos electrónicos o mensajes de una app de comunicación. Los widgets de colección pueden desplazarse verticalmente.

Los widgets de colección suelen enfocarse en los siguientes casos de uso:

  • Explorando la colección.
  • Abrir un elemento de la colección a su vista detallada en la app asociada
  • Interactuar con elementos, como marcarlos como hechos, con compatibilidad para botones compuestos en Android 12 (nivel de API 31).

Widgets de control

Un widget para una app llamada "Lista de luces", que muestra interruptores de activación con las etiquetas "Dormitorio", "Cocina" y "Sala de estar", con los dos primeros interruptores desactivados.
Figura 4: Ejemplo de un widget de control.

El objetivo principal de un widget de control es mostrar las funciones que se usan con frecuencia para que el usuario pueda activarlas desde la pantalla principal sin tener que abrir la app. Imagina que son controles remotos de una app. Un ejemplo de widget de control es uno de control de la casa que permite a los usuarios encender o apagar las luces de la casa.

Interactuar con un widget de control podría abrir una vista detallada asociada en la app. Esto depende de si la función del widget de control genera datos, como en el caso de un widget de búsqueda.

Widgets híbridos

Una app general de música que muestra botones para "No me gusta", "Atrás", "Reproducir/pausar", "Avanzar" y "Me gusta". El artista y la pista aparecen como "Artista" y "Música de ejemplo", respectivamente.
Figura 5: Ejemplo de un widget de una app de música

Si bien algunos widgets representan uno de los tipos de las secciones anteriores (información, colección o control), muchos widgets son híbridos que combinan elementos de diferentes tipos. Por ejemplo, un widget de reproductor de música es principalmente un widget de control, pero también le muestra al usuario qué pista se está reproduciendo en ese momento, como un widget de información.

Cuando planifiques tu widget, diseña en torno a uno de los tipos de base y agrega elementos de otros tipos según sea necesario.

Cómo integrar widgets con Asistente de Google

Asistente de Google puede mostrar cualquier tipo de widget en respuesta a los comandos por voz del usuario. Puedes configurar tus widgets para entregar Acciones en apps, lo que permite a los usuarios recibir respuestas rápidas y experiencias interactivas de apps en plataformas de Asistente, como Android y Android Auto. Si deseas obtener más detalles sobre la entrega de widgets para Asistente, consulta Cómo integrar Acciones en apps con widgets de Android.

Limitaciones de los widgets

Si bien los widgets se pueden entender como "miniapps", existen ciertas limitaciones que es importante comprender antes de diseñarlos.

Gestos

Debido a que los widgets se alojan en la pantalla principal, deben coexistir con la navegación que se establece allí. Esto limita la compatibilidad con gestos disponible en un widget en comparación con una app de pantalla completa. Si bien las apps pueden permitir a los usuarios navegar entre pantallas de forma horizontal, ese gesto ya se realiza en la pantalla principal con el fin de navegar entre pantallas principales.

Los únicos gestos disponibles para widgets son el táctil y el deslizamiento vertical.

Elementos

Dadas las limitaciones de los gestos disponibles para los widgets, algunos componentes básicos de la IU que dependen de gestos restringidos no están disponibles para los widgets. Para obtener una lista completa de los componentes básicos compatibles y más información sobre las restricciones de diseño, consulta Cómo crear el diseño del widget y Cómo proporcionar diseños flexibles de widgets.

Lineamientos de diseño

Contenido del widget

Los widgets son una excelente manera de atraer a un usuario a tu app, ya que "anuncian" contenido nuevo e interesante que está disponible en la app.

Al igual que los avances en la portada de un periódico, los widgets consolidan y concentran la información de una app, y proporcionan una conexión con más detalles dentro de la app. Puedes decir que el widget es el "bocadillo" de la información, mientras que la app es el "comida". Asegúrate de que tu app muestre más detalles sobre un elemento de información que lo que muestra el widget.

Además del contenido puro de información, considera hacer que el widget proporcione vínculos de navegación a las áreas más usadas de tu app. Esto permite a los usuarios completar tareas más rápido y extiende el alcance funcional de la app a la pantalla principal.

Los siguientes son buenos candidatos para vínculos de navegación en widgets:

  • Funciones generativas: Son las funciones que permiten al usuario crear contenido nuevo para una app, como crear un documento o mensaje nuevos.

  • Abrir la app en el nivel superior: Si presionas un elemento de información, el usuario suele navegar a una pantalla de detalles de nivel inferior. Proporcionar acceso al nivel superior de tu aplicación ofrece más flexibilidad de navegación y puede reemplazar un acceso directo a la app dedicado que los usuarios, de otro modo, usarían para navegar a la app desde la pantalla principal. El uso del ícono de la aplicación para esta funcionalidad también puede proporcionarle a tu widget una identidad clara si los datos que muestras son ambiguos.

Cambio del tamaño del widget

Widget de Reloj de Google estándar
Figura 6: Widget de Reloj de Google estándar

Si mantienes presionado un widget que puede cambiar de tamaño y, luego, lo sueltas, el widget pasa al modo de cambio de tamaño. Los usuarios pueden usar los controladores de arrastre o las esquinas de los widgets para establecer su tamaño preferido.

El cambio de tamaño les permite a los usuarios ajustar el alto y el ancho de un widget dentro de las restricciones de la cuadrícula de posición de la pantalla principal. Puedes decidir si tu widget puede cambiar de tamaño libremente o si se limita a los cambios de tamaño horizontales o verticales. No es necesario que admitas el cambio de tamaño si el widget tiene un tamaño inherentemente fijo.

Permitir a los usuarios cambiar el tamaño de los widgets tiene importantes beneficios:

  • Pueden ajustar la cantidad de información que desean ver en cada widget.
  • Pueden influir mejor en el diseño de los widgets y accesos directos de sus paneles principales.

Planifica una estrategia de cambio de tamaño para tu widget según el tipo de widget que crees. Los widgets de colección basados en listas o cuadrículas suelen ser sencillos, ya que cambiar el tamaño del widget expande o contrae el área de desplazamiento vertical. Independientemente del tamaño del widget, el usuario puede desplazar todos los elementos de información hasta la vista.

Los widgets informativos requieren una planificación más práctica, ya que no se pueden desplazar y todo el contenido debe ajustarse a un tamaño determinado. Debes ajustar de forma dinámica el contenido y el diseño del widget al tamaño que el usuario defina mediante la operación de cambio de tamaño.

En el siguiente ejemplo, el usuario puede cambiar el tamaño de un widget del clima en tres pasos, lo que expone información más completa sobre el clima en la ubicación actual a medida que crece el widget.

Ejemplo de widget del clima en el tamaño más pequeño de la cuadrícula de 3 x 2 con el nombre de la ubicación (Tokio), la temperatura (14°) y el símbolo que indica el clima parcialmente nuboso
Figura 7: Ejemplo de widget del clima en un tamaño “pequeño” de cuadrícula de 3 × 2.


Ejemplo de widget del clima en un tamaño "mediano" de 5 x 2, que incluye toda la IU del tamaño de cuadrícula de 3 x 2 más la etiqueta "mayormente nublado" y las temperaturas previstas desde las 4 p.m. hasta las 7 p.m.
Figura 8: Ejemplo de widget del clima en una cuadrícula mediana de 5 × 2.


Ejemplo de widget del clima en un tamaño “grande” de 5 × 4, que incluye todas las IU de los tamaños de cuadrícula de 3 × 2 y 5 × 2, además de un pronóstico del tiempo de martes a viernes
Figura 9: Ejemplo de widget del clima en el tamaño “grande” de la cuadrícula de 5 × 4.

Para cada tamaño de widget, determina cuánta información de tu app se muestra. Para los tamaños más pequeños, concéntrate en la información esencial y, luego, agrega información contextual a medida que el widget crezca de forma horizontal y vertical.

Consideraciones de diseño

Resulta tentador diseñar tus widgets según las dimensiones de la cuadrícula de posición de un dispositivo con el que desarrollas el contenido. Esta puede ser una aproximación inicial útil, pero ten en cuenta los siguientes puntos:

  • Planificar la estrategia de cambio de tamaño del widget en "buckets de tamaño" en lugar de dimensiones de cuadrícula variables te brinda los resultados más confiables.
  • El número, el tamaño y la separación de las celdas pueden variar mucho de un dispositivo a otro. Por lo tanto, es muy importante que tu widget sea flexible y pueda acomodar más o menos espacio de lo previsto.
  • A medida que el usuario cambia el tamaño de un widget, el sistema responde con un rango de tamaño en dp en el que el widget se puede volver a dibujar.
  • A partir de Android 12, puedes proporcionar atributos de tamaño más definidos y diseños más flexibles. Se incluye lo siguiente:

Configuración del widget por usuario

A veces, el usuario debe configurar el widget antes de que pueda ser útil. Piensa en un widget de correo electrónico en el que el usuario debe seleccionar la carpeta de correo electrónico antes de que se pueda mostrar la bandeja de entrada o en un widget de fotos estático en el que el usuario debe asignar una imagen de la galería para que se muestre. Los widgets de Android muestran sus opciones de configuración justo después de que el usuario suelta el widget en una pantalla principal.

Lista de verificación de diseño de widgets

  • Concéntrate en pequeñas porciones de información visible en el widget. Expande la información en tu app.
  • Elige el tipo de widget adecuado para tu objetivo.
  • Planifica cómo se adapta el contenido del widget a diferentes tamaños.
  • Para que el diseño del widget sea independiente de la orientación y el dispositivo, asegúrate de que el diseño se pueda estirar y contraer.
  • Considera si tu widget necesita alguna configuración adicional.