Desarrollo de diseños Watch Faces para smartwatch Android

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:
  
  apply plugin: 'com.android.application' android { ... } dependencies { ... wearApp project(':wear') compile 'com.google.android.gms:play-services:6.5.+' }

  1 2 3 4 5 6 7 8 9 10

  apply plugin: 'com.android.application'   android { ... }   dependencies {     ...     wearApp project(':wear')     compile 'com.google.android.gms:play-services:6.5.+' }

  Módulo wear:
  
  apply plugin: 'com.android.application' android { ... } dependencies { ... compile 'com.google.android.support:wearable:1.1.+' compile 'com.google.android.gms:play-services-wearable:6.5.+' }

  1 2 3 4 5 6 7 8 9 10

  apply plugin: 'com.android.application'   android { ... }   dependencies {     ...     compile 'com.google.android.support:wearable:1.1.+'     compile 'com.google.android.gms:play-services-wearable:6.5.+' }

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:
  
  <manifest ... > <uses-permission android:name = "com.google.android.permission.PROVIDE_BACKGROUND" /> <uses-permission android:name = "android.permission.WAKE_LOCK" /> [...] </manifest>

  1 2 3 4 5 6 7 8

  <manifest ... >     <uses-permission         android:name = "com.google.android.permission.PROVIDE_BACKGROUND"  />     <uses-permission         android:name = "android.permission.WAKE_LOCK"  />     [...] </manifest>

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:
  @Override public Engine onCreateEngine() { return new Engine(); }

  1 2 3 4 5

  @Override     public Engine onCreateEngine() {         return new Engine();     }

• Implementación del servicio, que sobrescribe una serie de métodos:
  private class Engine extends CanvasWatchFaceService.Engine {

  1 2	private class Engine extends CanvasWatchFaceService.Engine {

• Se inicializa Whatch Face:
  @Override public void onCreate(SurfaceHolder holder) { }

  1 2 3 4

  @Override         public void onCreate(SurfaceHolder holder) {         }

• Obtiene las funciones del dispositivo:
  @Override public void onPropertiesChanged(Bundle properties) { }

  1 2 3 4

  @Override         public void onPropertiesChanged(Bundle properties) {         }

• Actualización de la hora:
  @Override public void onTimeTick() { }

  1 2 3 4

  @Override         public void onTimeTick() {         }

• El dispositivo controla el cambio entre modos:
  @Override public void onAmbientModeChanged(boolean inAmbientMode) { }

  1 2 3 4

  @Override         public void onAmbientModeChanged(boolean inAmbientMode) {         }

• Método encargado de dibujar el diseño de la cara del reloj:
  @Override public void onDraw(Canvas canvas, Rect bounds) { }

  1 2 3 4

  @Override         public void onDraw(Canvas canvas, Rect bounds) {         }

• Watch Face se convierte en visible o invisible:
  @Override public void onVisibilityChanged(boolean visible) { } } }

  1 2 3 4 5 6

  @Override         public void onVisibilityChanged(boolean visible) {         }     } }

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.
• Integración con la capa de datos, que proporcione información sobre notificaciones o citas en el calendario, directamente desde la pantalla del reloj.
  
• 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.
  
• 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).
  
• 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.
  

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():
   
   private class LoadMeetingsTask extends AsyncTask<Void, Void, Integer> { @Override protected Integer doInBackground(Void... voids) { long begin = System.currentTimeMillis();

   1 2 3 4 5

   private class LoadMeetingsTask extends AsyncTask<Void, Void, Integer> {     @Override     protected Integer doInBackground(Void... voids) {         long begin = System.currentTimeMillis();

2. La clase WearableCalendarContract, proporciona acceso directo a los eventos del calendario del dispositivo vinculado:
   
   Uri.Builder builder = WearableCalendarContract.Instances.CONTENT_URI.buildUpon(); ContentUris.appendId(builder, begin); ContentUris.appendId(builder, begin + DateUtils.DAY_IN_MILLIS); final Cursor cursor = getContentResolver() .query(builder.build(), null, null, null, null); int numMeetings = cursor.getCount(); return numMeetings; }

   1 2 3 4 5 6 7 8

   Uri.Builder builder =  WearableCalendarContract.Instances.CONTENT_URI.buildUpon();         ContentUris.appendId(builder, begin);         ContentUris.appendId(builder, begin + DateUtils.DAY_IN_MILLIS);         final Cursor cursor = getContentResolver() .query(builder.build(), null, null, null, null);         int numMeetings = cursor.getCount();                     return numMeetings;     }

3. Devuelve el número de reuniones:
   
   @Override protected void onPostExecute(Integer result) { onMeetingsLoaded(result); } }

   1 2 3 4 5 6

   @Override     protected void onPostExecute(Integer result) {         onMeetingsLoaded(result);     } }

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.
   
   private class Engine extends CanvasWatchFaceService.Engine { [...] int mNumMeetings; private AsyncTask<Void, Void, Integer> mLoadMeetingsTask;

   1 2 3 4 5

   private class Engine extends CanvasWatchFaceService.Engine {     [...]     int mNumMeetings;     private AsyncTask<Void, Void, Integer> mLoadMeetingsTask;

5. Handler que carga las reuniones almacenadas una vez por minuto en modo interactivo:
   
   final Handler mLoadMeetingsHandler = new Handler() { @Override public void handleMessage(Message message) { switch (message.what) { case MSG_LOAD_MEETINGS: cancelLoadMeetingTask(); mLoadMeetingsTask = new LoadMeetingsTask(); mLoadMeetingsTask.execute(); break; } } }; [...] }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   final Handler mLoadMeetingsHandler = new Handler() {         @Override         public void handleMessage(Message message) {             switch (message.what) {                 case MSG_LOAD_MEETINGS:                     cancelLoadMeetingTask();                     mLoadMeetingsTask = new LoadMeetingsTask();                     mLoadMeetingsTask.execute();                     break;             }         }     };     [...] }

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:
   
   @Override public void onVisibilityChanged(boolean visible) { super.onVisibilityChanged(visible); if (visible) { mLoadMeetingsHandler.sendEmptyMessage(MSG_LOAD_MEETINGS); } else { mLoadMeetingsHandler.removeMessages(MSG_LOAD_MEETINGS); cancelLoadMeetingTask(); } }

   1 2 3 4 5 6 7 8 9 10 11

   @Override public void onVisibilityChanged(boolean visible) {     super.onVisibilityChanged(visible);     if (visible) {         mLoadMeetingsHandler.sendEmptyMessage(MSG_LOAD_MEETINGS);     } else {         mLoadMeetingsHandler.removeMessages(MSG_LOAD_MEETINGS);         cancelLoadMeetingTask();     } }

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().
   
   private void onMeetingsLoaded(Integer result) { if (result != null) { mNumMeetings = result; invalidate(); } if (isVisible()) { mLoadMeetingsHandler.sendEmptyMessageDelayed(MSG_LOAD_MEETINGS, LOAD_MEETINGS_DELAY_MS); } }

   1 2 3 4 5 6 7 8 9 10

   private void onMeetingsLoaded(Integer result) {     if (result != null) {         mNumMeetings = result;         invalidate();     }     if (isVisible()) {         mLoadMeetingsHandler.sendEmptyMessageDelayed(MSG_LOAD_MEETINGS, LOAD_MEETINGS_DELAY_MS);     } }

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.