Descripción general de los widgets de apps

Los widgets son un aspecto esencial de la personalización de la pantalla principal. Puedes pensar en "de un vistazo" vistas de los datos y la funcionalidad más importantes de una app a las que se puede acceder desde la pantalla de inicio del usuario. Los usuarios pueden mover widgets en los paneles de la pantalla de inicio y, si es compatible, cambiarles el tamaño para adaptar cantidad de información en el widget según su preferencia.

En esta documentación, se presentan los diferentes tipos de widgets que puedes crear y los principios de diseño que se deben seguir. Cómo compilar el widget de una app con la vista remota Diseños XML y APIs, consulta Cómo crear un widget simple. Para compilar un widget con las APIs de estilo Kotlin y Compose, consulta Jetpack Glance (disponible solo en inglés)

Tipos de widgets

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

Widgets informativos

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

Los widgets de información suelen mostrar elementos de información cruciales y hacen un seguimiento de cómo de que la información cambia con el tiempo. Algunos ejemplos de widgets informativos son el clima widgets, widgets de reloj o widgets de 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 fotos de una aplicación 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.

Por lo general, los widgets de colecciones se enfocan en los siguientes casos de uso:

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

Widgets de control

Un widget de una app llamada “Lista de luces” que muestra interruptores de activación etiquetados como “Dormitorio”, “Cocina” y “Sala de estar”, con los dos primeros interruptores de activación apagados
Figura 4: Ejemplo de un widget de control.

El propósito principal de un widget de control es mostrar las funciones usadas frecuentemente para que el usuario pueda activarlas desde la pantalla de inicio sin tener que abrir la . Son como controles remotos de las apps. Un ejemplo de un Widget de control es un widget de control de la casa que permite a los usuarios encender las luces en la casa activar o desactivar.

Interactuar con un widget de control puede abrir una vista de detalles asociada en el . 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 de música general que muestra botones del pulgar
            abajo', atrás, reproducir/pausar, avanzar y “Me gusta”. El artista y
            pista aparecen como "Artista" y "Música de ejemplo", respectivamente.
Figura 5: Ejemplo del 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 son híbridos que combinan elementos de diferentes tipos. Por ejemplo, un reproductor de música es principalmente un widget de control, pero también le muestra al usuario qué pista es en reproducción, como un widget de información.

Cuando planifiques tu widget, diseña en torno a uno de los tipos básicos 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 al usuario comandos por voz. Puedes configurar tus widgets para entregar App Actions, lo que les permite a los usuarios recibir respuestas rápidas y experiencias de app interactivas en plataformas de Asistente, como Android y Android Automático: Si quieres obtener más información sobre la entrega de widgets para Asistente, consulta Cómo integrar Acciones en apps. con Android widgets.

Limitaciones de los widgets

Si bien los widgets pueden entenderse como "miniapps", existen ciertas limitaciones que es importante comprender antes de diseñar el widget.

Gestos

Debido a que los widgets se ubican en la pantalla principal, tienen que 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. Aunque las apps podrían permitir que los usuarios navegar entre pantallas horizontalmente, ese gesto ya se realizó en la pantalla principal pantalla para navegar entre pantallas principales.

Los únicos gestos disponibles para widgets son tocar y deslizar verticalmente.

Elementos

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

Lineamientos de diseño

Contenido del widget

Los widgets son una excelente manera de atraer a un usuario a tu app a través de la "publicidad" nuevos y interesante que esté disponible en tu app.

Al igual que los avances en la portada de un periódico, los widgets se consolidan y concentrar la información de una aplicación y proporcionar una conexión con más detalles dentro de la aplicación. Podrías decir que el widget es el “bocadillo” de información. mientras que la aplicación es la "comida". Asegúrate de que la app muestre más detalles sobre una información elemento de 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 áreas de tu aplicación de uso frecuente. Esto permite a los usuarios completar las tareas más rápido y extiende el alcance funcional de la app a la casa en la pantalla.

Estos son algunos buenos candidatos para crear vínculos de navegación en widgets:

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

  • Abrir la app en el nivel superior: Presiona un elemento de información en general. lleva al usuario a una pantalla de detalles de nivel inferior. Proporcionar acceso a los el nivel superior de tu aplicación ofrece más flexibilidad de navegación y puede reemplazar un acceso directo de aplicación dedicado que los usuarios usarían para navegar a la desde la pantalla de inicio. Si usas el ícono de tu app para esta funcionalidad, también puedes proporcionar una identidad clara a tu widget si los datos que estás mostrando 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 se puede cambiar de tamaño y, luego, lo sueltas, este se pondrá en el modo de cambio de tamaño. Los usuarios pueden usar los controladores de arrastre o las esquinas del widget para definir sus tamaño preferido.

Cambiar el tamaño permite a los usuarios ajustar la altura y el ancho de un widget dentro del limitaciones de la cuadrícula de ubicación de la pantalla principal. Puedes decidir si tu El widget puede cambiar de tamaño libremente o está limitado a un tamaño horizontal o vertical. cambios. No es necesario admitir el cambio de tamaño si tu widget es de tamaño fijo.

Permitir que los usuarios cambien 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 su casa. paneles.

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 porque cambiar el tamaño del widget expande o contrae el área de desplazamiento vertical. Independientemente del tamaño del widget, el usuario puede desplazar toda la información los elementos a la vista.

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

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

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


Ejemplo de widget del clima en un elemento “medium” de 5 × 2 tamaño, incluidas todas las
            IU del tamaño de cuadrícula de 3 x 2 más la etiqueta “mayormente nublado” y
            pronosticar temperaturas desde las 4 p.m. hasta las 7 p.m.
Figura 8: Ejemplo de widget del clima en una cuadrícula de 5 × 2 de tamaño "mediano".


Ejemplo de widget del clima en un dispositivo “grande” de 5x4 con todos los elementos de la IU
            de los tamaños de cuadrícula de 3x2 y 5x2, más un pronóstico del clima
            de martes a viernes
Figura 9: Ejemplo de widget del clima en la cuadrícula “grande” de 5x4 el tamaño del almacenamiento.

Para cada tamaño del 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 se expanda de forma horizontal y vertical.

Consideraciones de diseño

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

  • Planifica la estrategia de cambio de tamaño de los widgets en "buckets de tamaño" en lugar de dimensiones de cuadrícula variables te brindan los resultados más confiables.
  • La cantidad, el tamaño y el espaciado de las celdas pueden variar ampliamente de un dispositivo a otro dispositivo. Por lo tanto, es muy importante que tu widget sea flexible y pueda pueden adaptarse a más o menos espacio de lo previsto.
  • Cuando el usuario cambia el tamaño de un widget, el sistema responde con un rango de tamaño dp en que el widget puede volver a dibujarse por sí solo.
  • A partir de Android 12, puedes proporcionar un tamaño más definido atributos y diseños más flexibles. Esto incluye lo siguiente:

Configuración del widget 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 debe seleccionar la carpeta de correo antes de se puede mostrar la carpeta Recibidos o un widget de fotos estático donde el usuario tiene que asignar se mostrará una imagen de la galería. Los widgets de Android muestran su opciones de configuración justo después de que el usuario suelta el widget en una pantalla de inicio.

Lista de tareas para el diseño de widgets

  • Concéntrate en pequeñas porciones de información visible en el widget. Expandir la información en 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 del dispositivo. el diseño se puede estirar y contraer.
  • Considera si tu widget necesita una configuración adicional.