Android Wear: diseño de layout para smartwatches

Comenzamos una nueva serie de tutoriales sobre Android Wear. En ella trataremos diversos aspectos sobre esta plataforma de desarrollo Android:

• Diseño de layout para smartwatches
• Clases de la biblioteca UI para Wearables.
• Soporte para comandos de voz.
• Ejercicio práctico con Android Wear

Diseño de layout

En esta primera publicación, se describirán los diferentes enfoques que se deben tener en cuenta a la hora de diseñar aplicaciones para la plataforma Android Wear, y en especial, la adaptación de apps a las pantallas de los relojes inteligentes o smartwatches.

Durante el diseño de interfaces de usuario sobre dispositivos corporales, se presentan una serie de limitaciones definidas por la forma en que se presentan las pantalla de cada dispositivo. Al desarrollar un proyecto destinado al sistema operativo Android Wear, es necesario tener muy presente el diseño físico del dispositivo, ya que este puede presentar formas cuadradas o redondas, impidiendo en determinados casos que la información que se muestre por pantalla no sea legible o de acceso difícil para determinadas funcionalidades.

Es muy común que a la hora de mostrar datos dentro de la aplicación, y al tratarse de dispositivos con una pantalla bastante reducida, se desee utilizar el total de la misma, mostrando texto, imágenes o incluso componentes para lanzar eventos cerca de las esquinas de la pantalla. Al utilizar un layout con forma redonda, parte de ese contenido no será visible completamente, y por lo tanto el uso de esta aplicación se verá limitada a dispositivos con pantalla cuadrada. Para evitar este problema, Android propone, dentro del uso de bibliotecas de interfaz de usuario para wearables, los siguientes enfoques para solucionar esta limitación o inconveniente:

Como se puede apreciar en la imagen superior, el diseño creado en un dispositivo con forma cuadrada, no es óptimo para dispositivos con forma redonda, ya que parte del contenido no es visible.

• Enfoque 1: Definir diferentes diseños en función de si la forma de la pantalla es redonda o cuadrada.
• Enfoque 2: Utilizar la clase BoxInsetLayout, que define una vista personalizada, incluida en la biblioteca UI proporcionada. Esta vista permite, a partir de un diseño único, ser válido tanto para dispositivos con forma cuadrada como redonda.

De manera mayoritaria, se utilizan diferentes diseños en función de si la forma del dispositivo es cuadrada o redonda, debido a que si se desea definir un solo diseño que sea válido para ambas opciones, es recomendable tener en cuenta una serie de factores que deberán configurarse previamente para controlar su posicionamiento en pantallas redondas.

Tanto si se opta por la primera opción, como por la segunda, a continuación se describirán ambos procesos, que permitan utilizar el diseño que se adapte mejor a nuestras necesidades, sin renunciar al funcionamiento de la aplicación en ambas opciones.

Nota: Para las siguientes técnicas de diseño, se deberá añadir la siguiente dependencia al módulo «wear»:

Diferentes diseños para pantallas cuadradas y redondas

Al crear un proyecto para Android Wear, y más concretamente dentro de la Activity creada al generar un proyecto en el módulo «wear», se aprecia como se ha declarado e inicializado una clase llamada WatchViewStub. Una vez se ha creado la estructura principal del proyecto, y desde el módulo «wear» destinado a dispositivos corporales, deberán tenerse en cuenta los siguientes puntos:

• En primer lugar es necesario declarar e inicializar la clase WatchViewStub, que permitirá especificar el tipo de diseño a utilizar. Esta clase detecta en tiempo de ejecución la forma del dispositivo, e infla el layout asignado. Por lo tanto se debe establecer WatchViewStub como elemento principal de la Activity. A continuación, a partir del objeto creado de la clase WatchViewStub, se deberán establecer los dos layouts,
  
  package com.academiaandroid.appwear; import android.app.Activity; import android.os.Bundle; import android.support.wearable.view.WatchViewStub; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); /*Se declara e inicializa la clase WatchViewStub, para almacenar los dos diseños definidos. Esta vista permitirá incorporar uno de los dos diseños creados en función de la forma de la pantalla del dispositivo.*/ final WatchViewStub stub = new WatchViewStub(this); stub.setRectLayout(R.layout.rect_activity_main); stub.setRoundLayout(R.layout.round_activity_main); /*Evento encargado de ser lanzado cuando el diseño interno apropiado haya sido incorporado.*/ <!--Aquí se integra el código comentado en el punto 3.--> [...] } }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  package com.academiaandroid.appwear;   import android.app.Activity; import android.os.Bundle; import android.support.wearable.view.WatchViewStub;   public class MainActivity extends Activity {       @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         /*Se declara e inicializa la clase WatchViewStub, para almacenar los dos diseños definidos. Esta vista permitirá incorporar uno de los dos diseños creados en función de la forma de la pantalla del dispositivo.*/         final WatchViewStub stub = new WatchViewStub(this);         stub.setRectLayout(R.layout.rect_activity_main);         stub.setRoundLayout(R.layout.round_activity_main);         /*Evento encargado de ser lanzado cuando el diseño interno apropiado haya sido incorporado.*/         <!--Aquí se integra el código comentado en el punto 3.-->         [...]       } }

• Para el paso anterior, se han debido diseñar y definir los dos layouts a utilizar, mediante el atributo app:rectLayout para el diseño de dispositivos con forma cuadrada, y el atributo app:roundLayout para dispositivos con forma redonda. Este proceso se realizará dentro del layout principal de la Activity:
  • Layout AppWear\wear\src\main\res\layout\activity_main.xml
    
    <!--?xml version="1.0" encoding="utf-8"?--> app:rectLayout="@layout/rect_activity_main" <!--Layout para diseño redondo--> app:roundLayout="@layout/round_activity_main" tools:context=".MainActivity" tools:deviceIds="wear"/>

    1 2 3 4 5 6 7 8

    <!--?xml version="1.0" encoding="utf-8"?-->       app:rectLayout="@layout/rect_activity_main"     <!--Layout para diseño redondo-->     app:roundLayout="@layout/round_activity_main"     tools:context=".MainActivity"     tools:deviceIds="wear"/>

  • Layout AppWear\wear\src\main\res\layout\round_activity_main.xml
    
    En la imagen anterior se puede observar como se ha modificado el diseño del layout asociado a un dispositivo con pantalla redonda, permitiendo visualizar el contenido de la aplicación adaptado a una nueva disposición de los elementos. Además se establece el atributo «id», para posteriormente establecer en tiempo de ejecución el diseño más adecuado para el dispositivo que implementará la aplicación.
    
    <!--?xml version="1.0" encoding="utf-8"?-->

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

    <!--?xml version="1.0" encoding="utf-8"?-->

• Por último se invoca al método setContentView(), que recibirá como parámetros la vista que defina la clase WatchViewStub, a partir del diseño que más se adapte a la forma del dispositivo. Esta línea deberá insertarse justo donde finalice el evento stub.setOnLayoutInflatedListener(new WatchViewStub.OnLayoutInflatedListener(){...});
  
  /*Evento encargado de ser lanzado cuando el diseño interno apropiado haya sido incorporado.*/ stub.setOnLayoutInflatedListener(new WatchViewStub.OnLayoutInflatedListener() { @Override public void onLayoutInflated(WatchViewStub stub) { /*Aquí es donde se declaran y asignan los recursos a utilizar en la Activity.*/ [...] } }); /*Se infla el layout en la Activity principal encargado de seleccionar el diseño que mejor se adapte a la pantalla del dispositivo.*/ setContentView(stub); } }

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

  /*Evento encargado de ser lanzado cuando el diseño interno apropiado haya sido incorporado.*/ stub.setOnLayoutInflatedListener(new WatchViewStub.OnLayoutInflatedListener() {         @Override         public void onLayoutInflated(WatchViewStub stub) {             /*Aquí es donde se declaran y asignan los recursos a utilizar en la Activity.*/             [...]         }     });     /*Se infla el layout en la Activity principal encargado de seleccionar el diseño que mejor se adapte a la pantalla del dispositivo.*/     setContentView(stub);     } }

Uso de un diseño único para ambas formas.

Para este enfoque es necesario utilizar la clase BoxInsetLayout. Esta clase, que hereda de FrameLayout, permite controlar la forma de la pantalla del dispositivo. Este tipo de implementación posibilita la definición de un diseño único, proporcionando los mecanismos necesarios para que los componentes implementados en la aplicación, puedan situarse de una manera óptima para ser visualizados en pantallas con forma cuadrada o redonda.

 

• En primer lugar se define una vista personalizada de la clase BoxInsetLayout, para definir un solo diseño válido para ambas formas, y así delimitar la superficie que será usada para la disposición de los elementos. Además se establece el valor del atributo android:padding="15dp" que se adapte mejor al diseño realizado:
  
  <!--?xml version="1.0" encoding="utf-8"?--> android:background="@drawable/g2989" android:padding="15dp" tools:context=".MainActivity" tools:deviceIds="wear"> [...]

  1 2 3 4 5 6 7 8 9 10 11

  <!--?xml version="1.0" encoding="utf-8"?-->       android:background="@drawable/g2989"     android:padding="15dp"     tools:context=".MainActivity"     tools:deviceIds="wear">       [...]

• Finalmente, dentro del layout principal (para el ejemplo un FrameLayout), se asigna un valor al atributo android:padding = "5dp" (cuanto mayor sea el valor, menor será la superficie disponible para mostrar los elementos). Además se define el atributo app:layout_box = "all", con el que se indica que tanto el FrameLayout implementado, como todos los elementos situados dentro de este, se adaptarán a la superficie establecida:
  
  [...]

  1 2 3 4 5 6

  [...]