contacto[arroba]digitallearning.es
Screen Shapes Invert

Desarrollo de diseños Watch Faces para smartwatch Android

Post Series: Plataformas Android (III)

En este publicación, se detallarán los pasos necesarios para el desarrollo e implementación de diseños Watch Faces para dispositivos smartwatch Android además de describir las directrices que se deberán tener en cuenta a la hora del diseño de la interfaz del reloj.

Como ya comentamos en la publicación anterior de esta serie, con la llegada de la nueva versión Android Lollipop, y la liberación de la API 21, se proporcionan las herramientas necesarias para un mayor acceso a la capa de diseño y configuración del dispositivo wearable. Dentro de esta nueva actualización, destaca la posibilidad de desarrollar nuevos diseños para la pantalla principal del dispositivo, y más concretamente la implementación de Watch Faces para la consulta de la hora.

Vamos por tanto a ver cómo desarrollar nuestros propios diseños para la interfaz principal del reloj, utilizando el IDE Android Studio:

Creación del proyecto

  • Se creará un nuevo proyecto (File > New project… o en pantalla de bienvenida en la opción “Start a new Android Studio Project“), seleccionando tanto la plataforma de teléfonos y tablets (SDK mínimo API 18 con Android 4.3 o superior) como la plataforma wear (SDK mínimo API 21 con Android 5.0 o superior).
  • A continuación, se indica la opción Add No Activity en las dos ventanas que solicite añadir tanto una Activity para la plataforma móvil, como para la plataforma wear.
  • Una vez se ha construido el proyecto, si seleccionamos el listado “Project“, podrán apreciarse los módulos wear y mobile.

Dependencias

  • Añadir las siguientes dependencias dentro de los archivo build.gradle de cada módulo:Módulo mobile:
    Módulo wear:

La librería de servicios de Google Play (compile 'com.google.android.gms:play-services-wearable:6.5.+' y compile 'com.google.android.gms:play-services:6.5.+'), permite la sincronización de la capa de datos entre el dispositivo móvil y el smartwatch. Además, la librería de compatibilidad (compile 'com.google.android.support:wearable:1.1.+') proporciona las clases necesarias para el desarrollo de Watch Faces.

Permisos a declarar en AndroidManifest.xml

  • Estos permisos deberán declararse tanto en el archivo AndroidManifest.xml del módulo “mobile” como del módulo “wear”. Como se puede apreciar los permisos declarados permiten la gestión en segundo plano, y el control del uso de energía oscureciendo la pantalla o manteniendo el procesador en un estado de bloqueo:

Implementación del servicio

A la hora del desarrollo de Watch Faces, es imprescindible comprender que será necesaria la implementación de un servicio, que controle en todo momento la atenuación de la pantalla por inactividad, o incluso las notificaciones entrantes sincronizadas con el dispositivo. Para realizar esta tarea, se deberá heredar de la clase CanvasWatchFaceService, y de la clase CanvasWatchFaceService.Engine.

  • Proporciona el Watch Face implementado:

  • Implementación del servicio, que sobrescribe una serie de métodos:

  • Se inicializa Whatch Face:

  • Obtiene las funciones del dispositivo:

  • Actualización de la hora:

  • El dispositivo controla el cambio entre modos:

  • Método encargado de dibujar el diseño de la cara del reloj:

  • Watch Face se convierte en visible o invisible:

Registro del servicio en AndroidManifest.xml en el módulo “wear”

Directrices de diseño para Watch Faces

Una de las principales premisas a la hora del diseño de un Watch Face, es controlar que el comportamiento del reloj diseñado, funcione correctamente en diferentes situaciones. Con este motivo, se describirán los aspectos más destacados para un correcto diseño de un Watch Face:

  • Diseño compatible con dispositivos que presenten tanto pantallas que tengan formas redondas, como cuadradas.Screen Shapes Invert
  • Integración con la capa de datos, que proporcione información sobre notificaciones o citas en el calendario, directamente desde la pantalla del reloj.
    Render Saturn
  • Implementación de capa de configuración para la modificación del estilo, como pueden ser modificar los colores, e incluso añadir una imagen de fondo propia, realizando esta tarea tanto desde el smartwatch como desde el dispositivo móvil vinculado con la app Android Wear.
    Companion App BuildDevice Settings Build
  • Permitir que la funcionalidad del Wath Face diseñado no se vea alterada al recibir cualquier notificación del dispositivo vinculado (por ejemplo, que las agujas del reloj o los números sean visibles al recibir cualquier alerta).
    CardsRender Build
  • Soporte de los modos ambiente e interactivo, con diseños adaptados a conservar la batería del dispositivo, y por otro lado, diseños más acorde al uso de colores en el modo interactivo.
    Render AmbientRender Interactive

En la web de Android Developers, puedes encontrar información oficial adicional, para el diseño e implementación de Watch Faces
(créditos: las imágenes proceden de dicha documentación con licencia Creative Commons Attribution 2.5)

Capa de información en Watch Faces

Cuando un usuario accede a su dispositivo Android Wear, no sólo desea visualizar la hora del día, sino que gran parte de su atractivo consiste en mostrar información relevante, sincronizada con el dispositivo móvil vinculado, como pueden ser las diferentes notificaciones recibidas. Con el fin de comprender las posibilidades de comunicación con la capa de datos del dispositivo wearable, se describirá un ejemplo en tres simples pasos, para el proceso de mostrar información almacenada en el calendario, y todo esto desde la aplicación encargada de mostrar la hora:

  1. Definir una tarea que recupere los datos:
    Para realizar este proceso, se deberá crear una clase dentro de CanvasWatchFaceService.Engine, que herede de la clase base Asynctask, en la que una tarea asíncrona cargará las reuniones almacenadas en el calendario, a partir de un content provider, y devolverá el número con el método onMeetingsLoaded():
  2. La clase WearableCalendarContract, proporciona acceso directo a los eventos del calendario del dispositivo vinculado:
  3. Devuelve el número de reuniones:
  4. Creación de un temporizador personalizado:
    A continuación, se deberá crear un temporizador que actualice periódicamente los datos. Para ello se instancia la clase Handler, que enviará y procesará la cola de mensajes.
  5. Handler que carga las reuniones almacenadas una vez por minuto en modo interactivo:
  6. El siguiente método se encargará de inicializar el temporizador una vez que Watch Face es visible. Al invocar el método sendEmptyMessage(), mostrará el número de reuniones previstas del calendario en la aplicación del reloj:
  7. Redibujar Watch Face con los datos actualizados:
    Con el siguiente método se controla que la tarea ha recuperado los datos, para posteriormente invocar al método invalidate(), que redibujará el Watch Face. La variable mNumMeetings, variable miembro (variable declarada a nivel de clase, fuera de cualquier método o constructor), recibirá los datos, que ya podrán ser tratados directamente desde el método onDraw().

Podrás acceder a ejemplos para la creación de Watch Faces (además de ejemplos para otros componentes y plataformas) desde Android Studio 1.0, a través de File > Import Sample…, y dentro del campo de búsqueda indicar “Watch Face”. Además, desde la documentación oficial para desarrolladores Android, se recomienda utilizar la versión 1.0 o superior de Android Studio como entorno para la realización de proyectos sobre Android Wear.