Los widgets de apps (a veces llamados simplemente "widgets") son una función que se introdujo en Android 1.5 y que se mejoró mucho en Android 3.0 y 3.1. Un widget puede mostrar la información más oportuna o relevante de una aplicación de un vistazo, en la pantalla principal de un usuario. La imagen estándar del sistema Android incluye varios widgets, como uno para el reloj analógico, la música y otras aplicaciones.
Figura 1: Ejemplo de widgets de apps en Android 4.0
En este documento, se describe cómo diseñar un widget para que se ajuste gráficamente con otros widgets y con los otros elementos de la pantalla principal de Android, como los íconos de selector y los accesos directos. También se describen algunos estándares para las imágenes de los widgets y algunas sugerencias y trucos de gráficos para widgets.
Para obtener información sobre el desarrollo de widgets, consulta la sección Widgets de apps de la Guía para desarrolladores.
Anatomía de los widgets estándar
Los widgets típicos de las apps para Android tienen tres componentes principales: un cuadro de límite, un marco, los controles gráficos del widget y otros elementos. Los widgets de apps pueden contener un subconjunto de los widgets de vista en Android; los controles compatibles incluyen etiquetas de texto, botones e imágenes. Para obtener una lista completa de las vistas disponibles, consulta la sección Cómo crear el diseño del widget de la app en la Guía para desarrolladores. Los widgets bien diseñados dejan algunos márgenes entre los bordes del cuadro de límite y el marco, y relleno entre los bordes internos del marco y los controles del widget.
Figura 2: Por lo general, los widgets tienen márgenes entre el cuadro de límite y el marco, y relleno entre el marco y los controles del widget
Nota: A partir de Android 4.0, los widgets de apps tienen automáticamente márgenes entre el marco del widget y el cuadro de límite del widget de apps para proporcionar una mejor alineación con otros widgets y otros íconos en la pantalla principal del usuario. Para aprovechar este comportamiento altamente recomendado, configura targetSdkVersion de tu aplicación en 14 o superior.
Los widgets diseñados para ajustarse visualmente con otros widgets en la pantalla principal toman señales de los otros elementos de esa pantalla para alinearse y también usan efectos de sombreado estándar. Todos estos detalles se describen en este documento.
Cómo determinar un tamaño para tu widget
Cada widget debe definir un minWidth y un minHeight, lo que indica la cantidad mínima de espacio que debería consumir de forma predeterminada. Cuando los usuarios agregan un widget a su pantalla principal, por lo general, ocupa más que el ancho y la altura mínimos que especificaste. Las pantallas principales de Android ofrecen a los usuarios una cuadrícula de espacios disponibles en los que pueden ubicar íconos y widgets. Esta cuadrícula puede variar según el dispositivo; por ejemplo, muchos teléfonos ofrecen una cuadrícula de 4 x 4, mientras que las tablets pueden ofrecer una cuadrícula más grande de 8 x 7. Cuando se agregue tu widget, se expandirá para ocupar la cantidad mínima de celdas, horizontal y verticalmente, que necesite para satisfacer sus restricciones minWidth y minHeight. Tal como analizaremos más adelante en Cómo diseñar widgets y gráficos de fondo, el uso de fondos de nueve parches y diseños flexibles para widgets de apps permitirá que tu widget se adapte con gracia a la cuadrícula de la pantalla principal del dispositivo y siga siendo útil y estéticamente increíble.
Si bien el ancho y la altura de una celda, así como la cantidad de márgenes automáticos aplicados a los widgets, pueden variar según los dispositivos, puedes usar la siguiente tabla para estimar aproximadamente las dimensiones mínimas de tu widget según la cantidad deseada de celdas de cuadrícula ocupadas:
| Cantidad de celdas (columnas o filas) |
Tamaño disponible (dp) ( minWidth o minHeight) |
|---|---|
| 1 | 40 dp |
| 2 | 110 dp |
| 3 | 180 dp |
| 4 | 250 dp |
| … | … |
| n | 70 × n − 30 |
Se recomienda ser prudente con minWidth y minHeight, y especificar el tamaño mínimo que renderiza el widget en un buen estado predeterminado. Para obtener un ejemplo de cómo proporcionar un minWidth y un minHeight, supongamos que tienes un widget de reproductor de música que muestra el título y el artista de la canción que se está reproduciendo en este momento (apilados verticalmente), un botón Reproducir y un botón Siguiente:
Figura 3: Un ejemplo de widget de reproductor de música
La altura mínima debe ser la altura de tus dos TextViews para el artista y el título, además de algunos márgenes de texto. El ancho mínimo debe ser el ancho mínimo utilizable de los botones Reproducir y Siguiente, más el ancho mínimo del texto (por ejemplo, el ancho de 10 caracteres) y cualquier margen de texto horizontal.
Figura 4: Tamaños y márgenes de ejemplo para los cálculos deminWidth/minHeight. Elegimos 144 dp como ejemplo de buen ancho mínimo para las etiquetas de texto
Estos son ejemplos de cálculos:
minWidth= 144 dp + (2 × 8 dp) + (2 × 56 dp) = 272 dpminHeight= 48 dp + (2 × 4 dp) = 56 dp
Si hay algún relleno de contenido inherente en tus nueve parches de fondo del widget, debes agregar minWidth y minHeight según corresponda.
Widgets que pueden cambiar de tamaño
Los widgets pueden cambiar de tamaño horizontal o verticalmente a partir de Android 3.1, lo que significa que minWidth y minHeight se convierten efectivamente en el tamaño predeterminado para el widget. Puedes especificar el tamaño mínimo del widget con minResizeWidth y minResizeHeight; estos valores deben especificar el tamaño por debajo del cual el widget sería ilegible o inutilizable.
Esta suele ser una función preferida para los widgets de colecciones, como los basados en ListView o GridView.
Cómo agregar márgenes al widget de tu app
Como se mencionó anteriormente, Android 4.0 agregará automáticamente pequeños márgenes estándar a cada borde de los widgets en la pantalla principal para aplicaciones que especifiquen una targetSdkVersion de 14 o más. Esto ayuda a equilibrar visualmente la pantalla principal y, por lo tanto, recomendamos que no agregues márgenes adicionales fuera de la forma de fondo del widget de tu app en Android 4.0.
Es fácil escribir un diseño único que tenga márgenes personalizados aplicados para versiones anteriores de la plataforma y que no tenga márgenes adicionales para Android 4.0 y las versiones posteriores. Consulta Cómo agregar márgenes a los widgets de apps en la Guía para desarrolladores si quieres obtener información sobre cómo lograrlo con el XML de diseño.
Cómo crear diseños de widgets y gráficos de fondo
La mayoría de los widgets tendrán un rectángulo de fondo sólido o una forma de rectángulo redondeado. Se recomienda definir esta forma con nueve parches; uno para cada densidad de pantalla (consulta Compatibilidad con varias pantallas para obtener más detalles). Se pueden crear nueve parches con la herramienta draw9patch o, simplemente, con un programa de edición de gráficos como Adobe® Photoshop. Esto permitirá que la forma del fondo del widget ocupe todo el espacio disponible. Los nueve parches deben ser de borde a borde, sin píxeles transparentes que proporcionen márgenes adicionales, excepto quizás algunos píxeles del borde para sombras paralelas sutiles u otros efectos sutiles.
Nota: Al igual que con los controles en las actividades, debes asegurarte de que los controles de interacción tengan distintos estados visuales enfocados y presionados usando los elementos de diseño de la lista de estados.
Figura 5: Píxeles de borde de nueve parches que indican regiones extensibles y relleno de contenido
Algunos widgets de apps, como los que usan un StackView, tienen un fondo transparente. En este caso, cada elemento individual en StackView debe usar un fondo de nueve parches que sea de borde a borde con pocos píxeles transparente de borde (o ninguno) para los márgenes.
Para el contenido del widget, debes usar diseños flexibles, como RelativeLayout, LinearLayout o FrameLayout. Así como los diseños de tus actividades deben adaptarse a diferentes tamaños de pantalla física, los diseños de los widgets deben adaptarse a diferentes tamaños de celdas de la cuadrícula de la pantalla principal.
A continuación, se muestra un diseño de ejemplo que puede usar un widget de música que muestra información de texto y dos botones.
Se basa en el debate previo de agregar márgenes según la versión del SO. Ten en cuenta que la forma más robusta y resistente de agregar márgenes al widget es unir el marco del widget y el contenido en un FrameLayout con relleno.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="@dimen/widget_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="@drawable/my_widget_background">
<TextView
android:id="@+id/song_info"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:id="@+id/play_button"
android:layout_width="@dimen/my_button_width"
android:layout_height="match_parent" />
<Button
android:id="@+id/skip_button"
android:layout_width="@dimen/my_button_width"
android:layout_height="match_parent" />
</LinearLayout>
</FrameLayout>
Si observas el widget de música de ejemplo de la sección anterior, puedes comenzar a usar atributos de diseños flexibles de la siguiente manera:
Figura 6: Extracción de diseños y atributos flexibles
Si un usuario agrega el widget a su pantalla principal en un dispositivo Android 4.0 de ejemplo donde cada celda de la cuadrícula tiene un tamaño de 80 dp × 100 dp y se aplican automáticamente 8 dp de márgenes en todos los tamaños, el widget se extenderá de la siguiente manera:
Figura 7: Widget de música en una cuadrícula de ejemplo de 80 dp x 100 dp con 8 dp de márgenes automáticos agregados por el sistema
Cómo usar el paquete de plantillas de widgets de apps
Cuando se comienza a diseñar un nuevo widget o a actualizar un widget existente, es una buena idea mirar primero las siguientes plantillas de diseño de widgets. El siguiente paquete descargable incluye gráficos de fondo de nueve parches, XML y archivos Adobe® Photoshop de origen para varias densidades de pantalla, estilos de widgets de versiones de SO y colores de widgets. El paquete de plantillas también contiene gráficos útiles para hacer que todo tu widget o parte de él (por ejemplo, los botones) sean interactivos.
Figura 8: Extractos del paquete de plantillas de widgets de apps (densidad media, oscuro, Android 4.0/estilos anteriores, estados predeterminados/enfocados/presionados)
Puedes obtener el último archivo del paquete de plantillas de widgets de apps mediante el siguiente vínculo:
Descargar el paquete de plantillas de widgets de apps para Android 4.0 »