TEMAS AVANZADOS DE ANDROID

WIDGETS
 Temas avanzados de Android

TEMAS AVANZADOS DE ANDROID

WIDGETS

Los widgets son vistas de apps en miniatura que pueden incorporarse en otras
apps (como la pantalla principal) y recibir actualizaciones periódicas. Estas vistas
se denominan widgets en la interfaz de usuario, y puedes publicar una con un
proveedor de widgets de apps. Se denomina host de widgets de la app el
componente de esta que puede contener otros widgets de la app.
Para crear el widget de una app, necesitamos lo siguiente:
Objeto AppWidgetProviderInfo:

Describe los metadatos del widget de una app, como el diseño, la

frecuencia de actualización y la clase “AppWidgetProvider”. Se debe
definir en formato XML.
Implementación de la clase “AppWidgetProvider”:

Define los métodos básicos que te permiten interactuar de manera

programática con el widget de la app, en función de los eventos de
emisión. De esta manera, recibirás emisiones cuando se actualice, se
habilite, se inhabilite o se borre el widget de la app.
Diseño de la vista:
Define el diseño inicial del widget de la app en formato XML.

Además, podemos implementar una actividad de configuración del widget de la

app. Este es un “Activity” opcional que se inicia cuando el usuario agrega el
widget de nuestra app y le permite modificar la configuración de este durante la
creación.

Cómo declarar el widget de una app en el manifiesto:

Primero, declaramos la clase “AppWidgetProvider” en el archivo

“AndroidManifest.xml” de nuestra app.
Por ejemplo:

1
 Temas avanzados de Android

El elemento <receiver> requiere el atributo “android:name”, que especifica el

“AppWidgetProvider” que utiliza el widget de la app.

El elemento <intent-filter> debe incluir un elemento <action> con el atributo

“android:name”. Este atributo especifica que el “AppWidgetProvider” acepta la
emisión de “ACTION_APPWIDGET_UPDATE”. Esta es la única emisión que
debemos declarar de manera explícita. El “AppWidgetManager” envía
automáticamente todas las demás emisiones del widget de la app al
“AppWidgetProvider” según sea necesario.

El elemento <meta-data> especifica el recurso “AppWidgetProviderInfo” y

requiere los siguientes atributos:

• “android:name”: Especifica el nombre de los metadatos. Usa

“android.appwidget.provider” para identificar los datos como el descriptor
“AppWidgetProviderInfo”.

• “android:resource”: Especifica la ubicación del recurso

“AppWidgetProviderInfo”.

Cómo agregar los metadatos de “AppWidgetProviderInfo”:

El “AppWidgetProviderInfo” define las cualidades esenciales de un widget de

app, como las dimensiones mínimas de diseño, el recurso de diseño inicial, la
frecuencia con la que se actualiza el widget y (opcionalmente) una actividad de
configuración para iniciar durante la creación. Definimos el objeto
“AppWidgetProviderInfo” en un recurso XML utilizando un solo elemento
<appwidget-provider> y lo guardamos en la carpeta res/xml/ del proyecto.

Por ejemplo:

Atributos <appwidget-provider>:

• Los valores de los atributos “minWidth” y “minHeight” especifican la

cantidad mínima de espacio que consume el widget de la app de forma
predeterminada. En la pantalla principal predeterminada, se colocan los
widgets de las apps en la ventana según una cuadrícula de celdas que

2
 Temas avanzados de Android

tienen una altura y un ancho definidos. Si los valores de altura o ancho

mínimos del widget de una app no coinciden con las dimensiones de las
celdas, el tamaño del widget de la app se redondea hacia arriba según el
tamaño de la celda más cercana. Para que el widget de la app sea portátil
en todos los dispositivos, debe tener un tamaño mínimo que nunca sea
superior a 4 x 4 celdas.

• Los atributos “minResizeWidth” y “minResizeHeight” especifican el

tamaño mínimo absoluto del widget de la app. Estos valores deben
especificar el tamaño mínimo por debajo del cual el widget de la app sería
ilegible o inutilizable. El uso de estos atributos permite al usuario cambiar
el tamaño del widget por un tamaño que puede ser menor que el
predeterminado, definido por los atributos “minWidth” y “minHeight”. Esta
opción se introdujo en Android 3.1.

• El atributo “updatePeriodMillis” define la frecuencia con la que el marco

de trabajo del widget de la app debe solicitar una actualización desde el
“AppWidgetProvider” llamando al método de devolución de llamada
“onUpdate()”. Con este valor, no se garantiza que la actualización real
ocurra exactamente a tiempo, y sugerimos realizarla con la menor
frecuencia posible (tal vez no más de una por hora para conservar la
batería). También podemos permitir que el usuario ajuste la frecuencia en
una configuración; es posible que algunos usuarios quieran que un código
bursátil se actualice cada 15 minutos, o tal vez solo cuatro veces al día.

• El atributo “initialLayout” está orientado al recurso de diseño que define el

diseño del widget de la app.

• El atributo “configure” define el “Activity” que se iniciará cuando el usuario

agregue el widget de la app, a fin de que pueda configurar las propiedades
del widget. Esto es opcional.

• El atributo “previewImage” especifica una vista previa del aspecto del

widget de la app después de la configuración, es decir, lo que el usuario
ve cuando selecciona el widget. Si no se proporciona este atributo, el
usuario ve el ícono del selector de tu app. Este campo corresponde al
atributo “android:previewImage” del elemento <receiver> del archivo
“AndroidManifest.xml”. Esta opción se introdujo en Android 3.0.

• El atributo “autoAdvanceViewId” especifica el ID de vista de la subvista

del widget de la app, que el host debe hacer avanzar automáticamente.
Esta opción se introdujo en Android 3.0.

• El atributo “resizeMode” especifica las reglas por las que se puede

cambiar el tamaño de un widget. Usamos este atributo para hacer que se
pueda cambiar el tamaño de los widgets de la pantalla principal de forma
horizontal o vertical, o en ambos ejes. Los usuarios deben mantener

3
 Temas avanzados de Android

presionado un widget para mostrar los controladores de cambio de

tamaño y, luego, arrastrar los controladores de forma horizontal y/o
vertical para cambiar el tamaño en la cuadrícula de diseño. Los valores
para el atributo “resizeMode” incluyen "horizontal", "vertical" y "none".
Para declarar un widget como horizontal y vertical, proporciona el valor
"horizontal|vertical". Esta opción se introdujo en Android 3.1.

• El atributo “minResizeHeight” especifica la altura mínima (en dps) a la que

se puede cambiar el tamaño del widget. Este campo no tiene efecto si es
mayor que “minHeight” o si el cambio de tamaño vertical no está
habilitado. Esta opción se introdujo en Android 4.0.

• El atributo “widgetCategory” declara si el widget de tu app se puede

mostrar en la pantalla principal (home_screen), la pantalla de bloqueo
(keyguard) o ambas. Solo las versiones de Android anteriores a 5.0
admiten widgets de pantalla de bloqueo. Para Android 5.0 y versiones
posteriores, solo es válido home_screen.

Cómo crear el diseño del widget de la app:

Debemos definir un diseño inicial para el widget de nuestra app en formato XML
y guardarlo en el directorio res/layout/ del proyecto.

Pautas de diseño de widgets de apps

Vamos a ver 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 describiremos algunos
estándares para las imágenes de los widgets y algunas sugerencias y trucos de
gráficos para widgets.

4
 Temas avanzados de Android

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

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. 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 iconos en la pantalla principal del usuario.

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.

Cómo determinar un tamaño para tu widget:

Como ya habíamos comentado anteriormente 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

5
 Temas avanzados de Android

“minHeight”. Tal como veremos más adelante, el uso de fondos de nueve

parches y diseños flexibles para widgets de apps permitirá que nuestro 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,
podemos usar la siguiente tabla para estimar aproximadamente las dimensiones
mínimas de nuestro widget según la cantidad deseada de celdas de cuadrícula
ocupadas:

Cantidad de celdas Tamaño disponible (dp)

(columnas o filas) (minWidth o minHeight)

1 40 dp

2 110 dp

3 180 dp

4 250 dp

… …

n 70 x 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:

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.

6
 Temas avanzados de Android

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. Podemos 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 nuestra app:

Como mencionamos 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, se recomienda
no agregar márgenes adicionales fuera de la forma de fondo del widget de
nuestra 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.

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. Si usamos un mapa de bits como fondo en
una vista que cambia de tamaño, veremos que Android escalará nuestra imagen
a medida que la vista se expanda o se contraiga en función del tamaño de la
pantalla o del contenido en la vista, lo que suele provocar imágenes borrosas o
algún otro artefacto de escalamiento. La solución es utilizar mapas de bits de
9-Patch, es decir, archivos PNG con formato especial que indican las áreas
expandibles y no expandibles.

Un mapa de bits de 9-Patch es básicamente un archivo PNG estándar, pero con

un borde adicional de 1 px que indica qué píxeles se deben expandir (y con una
extensión .9.png en lugar de solo .png). 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.

7
 Temas avanzados de Android

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, debemos usar diseños flexibles, como

“RelativeLayout”, “LinearLayout” o “FrameLayout”. Así como los diseños de
nuestras 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.

8
 Temas avanzados de Android

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.

9
 Temas avanzados de Android

Fijándonos en el widget de música del ejemplo, podemos comenzar a usar atributos de

diseños flexibles de la siguiente manera:

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:

10
 Temas avanzados de Android

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.

En la propia web de Android existe un paquete descargable de plantillas que

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 nuestro widget o parte de él (por ejemplo, los botones) sean
interactivos.

Habiendo visto las pautas de diseño para widgets, podemos diseñar el widget de
nuestra app utilizando los objetos de vista.

Debemos tener en cuenta que los diseños de los widgets de las apps se basan
en “RemoteViews”, que no son compatibles con todo tipo de diseño o widget de
vista.
Un objeto RemoteViews (y, en consecuencia, el widget de una app) puede
admitir las siguientes clases de diseño:

• FrameLayout

• LinearLayout

• RelativeLayout

• GridLayout
Y las siguientes clases de widgets:

• AnalogClock

11
 Temas avanzados de Android

• Button

• Chronometer

• ImageButton

• ImageView

• ProgressBar

• TextView

• ViewFlipper

• ListView

• GridView

• StackView

• AdapterViewFlipper
No son compatibles los elementos descendientes de estas clases.
RemoteViews también admite “ViewStub”, una vista invisible de tamaño cero que
podemos usar para ampliar de manera diferida los recursos de diseño durante el
tiempo de ejecución.

Cómo usar la clase “AppWidgetProvider”:

La clase “AppWidgetProvider” extiende “BroadcastReceiver” como una clase de

conveniencia para manejar las emisiones del widget de la app.
“AppWidgetProvider” recibe solo las emisiones de eventos que son relevantes
para el widget de la app, como cuando este se actualiza, se borra, se habilita o
se deshabilita.

Cómo fijar widgets de apps:

En los dispositivos con Android 8.0 (API nivel 26) o posterior, los selectores que
te permiten crear accesos directos fijos también te permiten fijar widgets de apps.
Al igual que los accesos directos fijos, estos widgets fijos ofrecen a los usuarios
acceso a tareas específicas de tu app.

Cómo crear una actividad de configuración del widget de una app:

Si deseas que el usuario ajuste la configuración cuando agregue un nuevo

widget, puedes crear una actividad de configuración del widget de la app. El host
de widget de apps iniciará automáticamente este “Activity” y permitirá al usuario

12
 Temas avanzados de Android

configurar el widget de la app durante la creación. Por ejemplo, podrá establecer

el color, el tamaño, el período de actualización y otras configuraciones de la app.

Se debe declarar la actividad de configuración como una actividad normal en el

archivo de manifiesto de Android. Sin embargo, el host de widgets de apps lo
iniciará con la acción “ACTION_APPWIDGET_CONFIGURE”, por lo que la
actividad debe aceptar este intent. Por ejemplo:

Además, se debe declarar la actividad en el archivo XML AppWidgetProviderInfo,

con el atributo android:configure (consulta Cómo agregar los metadatos de
AppWidgetProviderInfo más arriba). Por ejemplo, se puede declarar la actividad
de configuración de la siguiente manera:

Ten en cuenta que se declara la actividad con un espacio de nombres totalmente

calificado, ya que se hará referencia desde fuera del alcance de tu paquete.

Cómo actualizar el widget de la app desde la actividad de configuración:

Cuando el widget de una app utiliza una actividad de configuración, es

responsabilidad de la actividad actualizar el widget cuando se completa la
configuración. Puedes hacerlo solicitando una actualización directamente desde
“AppWidgetManager”.

A continuación, encontraremos un resumen del procedimiento que debes seguir

para actualizar correctamente el widget de la app y cerrar la actividad de
configuración:

1. Primero, obtén el ID del widget de la app desde el intent que inició la

actividad:

13
 Temas avanzados de Android

2. Configura el widget de tu app.

3. Cuando termines de configurarlo, obtén una instancia del

“AppWidgetManager” llamando a “getInstance(Context)”:

4. Actualiza el widget de la app con un diseño de “RemoteViews” llamando

al “updateAppWidget(int, RemoteViews)”:

5. Por último, crea el intent de retorno, configúralo con el resultado de la

actividad y finaliza la actividad.

Cómo configurar una imagen de vista previa:

En Android 3.0, se introdujo el campo “previewImage”, que especifica una vista

previa del aspecto del widget de la app. El usuario puede ver esta vista previa
desde el selector de widgets. Si no se proporciona este campo, se usa el ícono
del widget de la app para la vista previa.
Debes especificar esta configuración en XML de la siguiente manera:

Si queremos crear una imagen de vista previa para el widget de nuestra app
(para especificar en el campo “previewImage”), el emulador de Android incluye
una app llamada "Widget Preview". Para crear una imagen de vista previa,
iniciamos esta app, seleccionamos el widget de nuestra app y configuramos el
aspecto que deseemos para la imagen de vista previa. Luego, lo guardamos y lo
colocamos en los recursos de elementos de diseño de nuestra app.

14