Los widgets son un aspecto esencial de la personalización de la pantalla principal. Puedes considerarlos como vistas "de un vistazo" de los datos y las funciones más importantes de una app a las que se puede acceder directamente en la pantalla principal del usuario. Los usuarios pueden mover widgets por los paneles de la pantalla principal y, si es posible, cambiar su tamaño para adaptar la cantidad de información que se muestra 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 debes seguir. Para compilar un widget de la app con las APIs de RemoteView y los diseños XML, consulta Cómo crear un widget básico. Para compilar un widget con las APIs de estilo de Kotlin y Compose, consulta Jetpack Glance.
Tipos de widgets
Cuando planifiques tu widget, piensa en qué tipo de widget quieres compilar. Por lo general, los widgets se clasifican en una de las siguientes categorías:
Widgets informativos
Los widgets de información suelen mostrar elementos de información cruciales y hacer un seguimiento de cómo cambia esa información con el tiempo. Algunos ejemplos de widgets de información son los de clima, reloj o 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 se pueden desplazar 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 en su vista de detalles en la app asociada
- Interactuar con elementos, como marcarlos como completados, con compatibilidad con botones compuestos en Android 12 (nivel de API 31)
Widgets de control
El propósito 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. Puedes considerarlos como controles remotos para una app. Un ejemplo de un widget de control es un widget 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 de detalles 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
Si bien algunos widgets representan uno de los tipos de las secciones anteriores (información, colección o control), muchos 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, como un widget de información.
Cuando planifiques tu widget, diseña en torno a uno de los tipos 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 que completen Acciones en la app, lo que permite que los usuarios reciban respuestas rápidas y experiencias interactivas en la app 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ñar tu widget.
Gestos
Debido a que los widgets se encuentran en la pantalla principal, deben coexistir con la navegación que se establece allí. Esto limita la compatibilidad con gestos que está disponible en un widget en comparación con una app de pantalla completa. Si bien las apps pueden permitir que los usuarios naveguen entre pantallas de forma horizontal, ese gesto ya se usa en la pantalla principal para navegar entre pantallas principales.
Los únicos gestos disponibles para los widgets son tocar y deslizar verticalmente.
Elementos
Dadas las limitaciones de los gestos disponibles para los widgets, algunos componentes de la IU que dependen de gestos restringidos no están disponibles para los widgets. Para obtener una lista completa de los componentes 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 de widgets flexibles.
Lineamientos de diseño
Sigue estos lineamientos de diseño para crear una experiencia de widget atractiva, flexible y coherente en la pantalla principal.
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 ella.
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 detalles más completos dentro de la app. Podríamos decir que el widget es el "bocadillo" de información, mientras que la app es la "comida". Asegúrate de que tu app muestre más detalles sobre un elemento de información que los que muestra el widget.
Navegación desde widgets
Además del contenido de información pura, considera hacer que tu widget proporcione vínculos de navegación a las áreas de uso frecuente de tu app. Esto permite que los usuarios completen tareas con mayor rapidez y extiende el alcance funcional de la app a la pantalla principal.
Los siguientes son buenos candidatos para los vínculos de navegación en los widgets:
Funciones generativas: Son las funciones que permiten al usuario crear contenido nuevo para una app, como un documento o un mensaje nuevos.
Abrir la app en el nivel superior: Por lo general, cuando se presiona un elemento de información, se dirige al usuario 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 dedicado a la app que, de lo contrario, los usuarios usarían para navegar a la app desde la pantalla principal. Usar el ícono de tu aplicación para esta funcionalidad también puede proporcionar a tu widget una identidad clara si los datos que muestras son ambiguos.
Cambio del tamaño del widget
Si mantienes presionado un widget que se puede cambiar de tamaño y, luego, lo sueltas, el widget entra en el modo de cambio de tamaño. Los usuarios pueden usar los controladores de arrastre o las esquinas del widget para establecer el tamaño que prefieran.
El cambio de tamaño permite que los usuarios ajusten la altura y el ancho de un widget dentro de las restricciones de la cuadrícula de ubicación de la pantalla principal. Puedes decidir si el widget puede cambiar de tamaño libremente o si se limita a cambios de tamaño horizontales o verticales. No es necesario que admitas el cambio de tamaño si tu widget tiene un tamaño fijo de forma inherente.
Permitir que los usuarios cambien el tamaño de los widgets tiene beneficios importantes:
- Pueden ajustar la cantidad de información que desean ver en cada widget.
- Pueden influir mejor en el diseño de los widgets y los accesos directos en sus paneles principales.
Planifica una estrategia de cambio de tamaño para tu widget según el tipo de widget que estés creando. 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 desplazarse por todos los elementos de información para verlos.
Los widgets de información requieren una planificación más precisa, ya que no se puede desplazar por ellos y todo el contenido debe caber en 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 a través de 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 detallada sobre el clima en la ubicación actual a medida que crece el widget.
Para cada tamaño de widget, determina cuánta información de tu app se muestra. Para 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
Es tentador diseñar tus widgets según las dimensiones de la cuadrícula de ubicación de un dispositivo con el que desarrollas. Esta puede ser una aproximación inicial útil, pero ten en cuenta los siguientes puntos:
- Planificar tu estrategia de cambio de tamaño de widgets en "buckets de tamaño" en lugar de dimensiones de cuadrícula variables te brinda los resultados más confiables.
- La cantidad, el tamaño y el espaciado de las celdas pueden variar mucho de un dispositivo a otro. Por lo tanto, es muy importante que tu widget sea flexible y pueda adaptarse a más o menos espacio del 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 puede volver a dibujarse.
- A partir de Android 12, puedes proporcionar atributos de tamaño más refinados y diseños más flexibles. Incluye lo siguiente:
- Especifica las restricciones de tamaño de los widgets. Por ejemplo, puedes especificar el tamaño objetivo del widget (en celdas de cuadrícula) y el tamaño máximo posible.
- Proporcionar diseños responsivos, que cambian según el tamaño del widget
- Proporcionar diseños de tamaño exacto, que permiten que el selector responda con opciones de tamaño para los modos vertical y horizontal, para teléfonos o con cuatro tamaños para dispositivos plegables
- Usa la guía actualizada y las nuevas APIs para determinar los tamaños adecuados para tu widget.
Configuración de widgets por parte de los usuarios
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 deba seleccionar la carpeta de correo antes de que se pueda mostrar la carpeta Recibidos o un widget de fotos estáticas en el que el usuario deba 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 los suelta en una pantalla principal.
Lista de tareas de diseño de widgets
- Concéntrate en pequeñas porciones de información visible en el widget. Amplía la información de tu app.
- Elige el tipo de widget adecuado para tu objetivo.
- Planifica cómo se adaptará el contenido de tu widget a diferentes tamaños.
- Asegúrate de que el diseño del widget sea independiente de la orientación y el dispositivo, y de que pueda estirarse y contraerse.
- Considera si tu widget necesita alguna configuración adicional.