Pautas de diseño de widgets de apps

Los widgets de apps (a veces, solo "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, incluido un widget para el reloj analógico, la música y otras aplicaciones.

Ejemplos de widgets de apps en Android 4.0

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 a otros widgets y a los demás elementos de la pantalla principal de Android, como los íconos de selector y las combinaciones de teclas. También se describen algunos estándares para el material gráfico del widget 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, imágenes y botones. 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 padding entre los bordes internos del marco y los controles del widget.

Por lo general, los widgets tienen márgenes y relleno entre el cuadro de límite, el marco y los controles.

Figura 2: Por lo general, los widgets tienen márgenes entre el cuadro de límite y el marco, y padding entre los controles del marco y del widget.

Nota: A partir de Android 4.0, los widgets de apps reciben automáticamente márgenes entre el marco y el cuadro delimitador del widget de la app para proporcionar una mejor alineación con otros íconos y widgets en la pantalla principal del usuario. Para aprovechar este comportamiento altamente recomendado, establece la targetSdkVersion de la aplicación en 14 o superior.

Los widgets diseñados para adaptarse visualmente con otros widgets en la pantalla principal toman señales de los demás elementos de la pantalla principal para alinearse; también usan efectos de sombreado estándar. Todos estos detalles se describen en esta página.

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 colocar íconos y widgets. Esta cuadrícula puede variar según el dispositivo. Por ejemplo, muchos teléfonos ofrecen una cuadrícula de 4 × 4, y las tablets pueden ofrecer una cuadrícula más grande de 8 × 7. Cuando se agregue el widget, se estirará para ocupar la cantidad mínima de celdas, horizontal y vertical, necesarias para satisfacer sus restricciones minWidth y minHeight. Como se explica en Cómo diseñar widgets y gráficos de fondo a continuación, el uso de fondos nine-patch y diseños flexibles para los widgets de la app permitirá que tu widget se adapte correctamente a la cuadrícula de la pantalla principal del dispositivo y siga siendo útil y estéticamente increíble.

Si bien el ancho y el alto de una celda, así como la cantidad de márgenes automáticos aplicados a los widgets, pueden variar según el dispositivo, puedes usar la siguiente tabla para estimar de forma aproximada 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 conservador con minWidth y minHeight, y especificar el tamaño mínimo que renderiza el widget en un buen estado predeterminado. Para ver un ejemplo de cómo proporcionar una 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 (apilados verticalmente), los botones Play y Next:

Un ejemplo de widget de reproductor de música

Figura 3: Un ejemplo de widget de reproductor de música

La altura mínima debe ser la altura de dos TextViews del artista y el título, más algunos márgenes de texto. El ancho mínimo debe ser el ancho mínimo utilizable de los botones Play y Next, más el ancho mínimo del texto (por ejemplo, el ancho de 10 caracteres), más cualquier margen de texto horizontal.

Tamaños y márgenes de ejemplo para cálculos de ancho/altura mínimos

Figura 4: Tamaños y márgenes de ejemplo para los cálculos de minWidth y minHeight Elegimos 144 dp como ejemplo de buen ancho mínimo para las etiquetas de texto.

Estos son ejemplos de cálculos:

  • minWidth = 144dp + (2 × 8dp) + (2 × 56dp) = 272dp
  • minHeight = 48 dp + (2 × 4 dp) = 56 dp

Si hay algún padding de contenido inherente en tu nine-patch de fondo del widget, debes agregar a minWidth y minHeight según corresponda.

Widgets que pueden cambiar de tamaño

Los widgets se pueden cambiar de tamaño horizontal o vertical 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 superior. Esto ayuda a equilibrar visualmente la pantalla principal y, por lo tanto, te recomendamos que no agregues ningún margen adicional 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 versiones posteriores. Consulta Cómo agregar márgenes a los widgets de apps en la Guía para desarrolladores a fin de 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 diferentes pantallas para obtener más información). 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 de 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 interactivos tengan distintos estados visuales enfocados y presionados mediante los elementos de diseño de la lista de estados.

Píxeles de borde de nueve parches

Figura 5: Píxeles de borde de nueve parches que indican regiones expandibles y relleno de contenido

Algunos widgets de apps, como los que usan un StackView, tienen un fondo transparente. En este caso, cada elemento individual de StackView debe usar un fondo de nine-patch de borde a borde con pocos píxeles transparentes de borde o ninguno para los márgenes.

Para el contenido del widget, debes usar diseños flexibles, como RelativeLayout, LinearLayout o FrameLayout. Al igual que 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 sólida y resistente de agregar márgenes al widget es unir el marco del widget y el contenido en un FrameLayout con padding.

<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:

Extracción de diseños y atributos flexibles para un widget de música de ejemplo

Figura 6: Extracción de diseños y atributos flexibles

Cuando un usuario agrega el widget a su pantalla principal (en un dispositivo Android 4.0 de ejemplo en el que 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 estirará de la siguiente manera:

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

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 comiences a diseñar un widget nuevo o actualices un widget existente, te recomendamos que primero observes las siguientes plantillas de diseño de widgets. El siguiente paquete descargable incluye gráficos de fondo nine-patch, XML y archivos Adobe® Photoshop de origen para varias densidades de pantalla, estilos de widgets de versión del SO y colores de widgets. El paquete de plantillas también contiene gráficos útiles para hacer que todo el widget o algunas partes de él (p.ej., los botones) sean interactivos.

Extractos de plantillas de widgets

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 »