Comunidad de diseño web y desarrollo en internet

Introducción a Android Wear


Imagen cortesía de Jennifer lopez @Hell_McNamara

¿Qué es Android Wear?


Android nació con la filosofia de ser una sola plataforma de software para todo tipo de hardware. Si bien los primeros productos que vimos fueron smartphones y tablets, el sistema operativo móvil de google ahora lidera el mercado e itera sobre otras posibilidades, tal como:

    -Android Wear
    -Android Auto
    -Android TV

Cada una de ellas con diversos contextos de uso, pero que juntos, proporcionan un ecosistema tanto familiar, como lleno de posibilidades.

La intención de este tutorial (y proximos) es el estudiar plataforma pensada especialmente para wearables, sus posibilidades, su alcance y el futuro de la misma.

¿Que es un wearable?




Llevar un smartphone se volvió algo tan cotidiano como vestir, no podemos salir de casa sin él y cuando se termina la bateria, nos sentimos casi desnudos. Su portabilidad y hardware los hacen perfectos a la hora de consumir contenido y realizar algunas tareas del dia a dia. Sin embargo, su funcionalidad decrece de manera considerable si no tenemos total atención sobre el, algo tan simple como responder un mensaje se vuelve casi imposible sin ver la pantalla.

Un wearable es una propuesta de tener información a tu alcance de una manera menos invasiva, presentando como algo que "vestirias" de forma casual. Si el smartphone lo usamos para todo menos para hablar, porque limitar un reloj a solo mostrar la hora. No pensemos por ahora que un wearable sustituye todo lo que puedes hacer con tu smartphone, la comodidad no se puede lograr sin tener unas especificaciones algo simples. Son un complemento para hacer acciones mas puntuales y llevar algunos registros mas precisos. Igual nuestro nuevo compañero requiere un poco mas de datos y batería por parte de tu smartphone.

Diferencias entre Android y Android Wear


¿Que propone Android Wear?


Android wear es una versión ajustada y optimizada para wearables, corriendo Android 5.0 Lollipop. No solo a nivel de código, si no con un equilibrio perfecto entre experiencia de usuario e interfaz de usuario (muy diferente a Glass). Dentro de lo mucho que podemos hacer con Android Wear encontramos:

    -Una nueva manera para visualizar y responder sobre notificaciones
    -Comandos de voz (Multilenguaje) que funcionan muy bien
    -Un SDK para crear aplicaciones propetarias para Wear
    -Sensores optimizados en temas de fitness



¿Que es lo que cambia?


Si vienes del mundo del desarrollo de aplicaciones móviles para Android, las diferencias son minimas, seguimos teniendo Activities, Intents, Views y todo aquello que ya dominas. Si eres nuevo, quizás esto te parezca ajeno y es muy recomendable estudiar la plataforma para móviles primero.

En Android Wear tenemos 3 tipos de aplicaciones:

- Handheld Apps
- Wearable Apps (StandAlone Apps)
- Watch Faces

De igual manera, el uso de un wearable va getionado mediante la aplicación Android Wear ya sea para un dispositivo real o uno emulado:



Handheld Apps


Son aplicaciones instaladas en el smartphone con cierta interacción para tu wearable. La funcionalidad en el wearable es totalmente dependiente de la conexión entre ambos. Como ejemplos tenemos:

Mejores notificaciones, tal como lo hace Whatsapp:


En whatsapp no solo podemos ver un preview de los mensajes, si no que por medio del menú podemos responder el mismo o ignorarlo. A nivel de código, esto es posible con el uso de NotificationCompat API.

Ademas, por ser Handheld, Whatsapp esta limitado a ser usado en el wearable solo mediante notificaciones, no podemos ver ni responder de otro modo.

Compartir diversa información, como el uso de Navegación:



Pedir una dirección wearable significa dos cosas: Internet y GPS, si la mayoria de ellos no cuentan con ellos: ¿Cómo es que se comunican?. Es sencillo, se usa el Wearable Data Layer API. Wearable Data Layer API permite que el intermabio de datos entre el smartphone y el wearable sea mas sencilla.

Wearable Apps (StandAlone Apps)


Son aplicaciones que funcionan en el wearable exista o no conexión con tu smartphone. Sus caracteristicas son algo limitadas ya que se ejecuta directamente en el hardware del mismo. Estas aplicaciones se ejecutan desde el menú inicar:



Como ejemplos tenemos:

Flopsy Droid: un juego que rinde tributo al original Flappy Bird



Aplicaciones conocidas como Duolingo y Tinder



Watch Faces


Son aplicaciones especificamente diseñadas para funcionar como caratulas de reloj, estas se instalan en el wearable y pueden ser tan sencillas como para no requerir conexión entre ambos. Algunos Watch Faces pueden incluir información del clima y status de tu telefono (Cómo bateria, toggles, etc)



Requisitos para Desarrollar en Android Wear



Android Studio


El desarrollo para Android Wear solo es posible en Android Studio, de hecho, ADT pronto dejara de tener soporte. Android Studio es libre y multiplataforma, puede ser descargado en:

Android Developers SDK

Lollipop SDK


Mediante el Android SDK Manager, debemos tener instalado el SDK de Android 5.0 Lollipop, ademas de sus respectivas System Images si quieres emular:



En extras, asegurarnos que tenemos acceso a Google Play Services y Support Libraries:



En caso de no tener un dispositivo con Android Wear:


Para crear un emulador de Android Wear, se recomienda instalar Intel Hardware Accelerated Execution Manager:

Intel Hardware Accelerated Execution Manage

En la siguiente parte, mostrare como crear un AVD de Android Wear.

Hola Mundo de Wearable Apps (StandAlone Apps)


Vamos a crear y entender nuestra primera aplicación en Android Wear.El ejemplo mas sencillo que podemos tener es un Wearable App (StandAlone App).

Lo primero que debemos hacer es abrir Android Studio y crear un nuevo proyecto, en este caso el nombre de la aplicación es WearApp:



En la siguiente pantalla podriamos seleccionar solo una aplicación para Wear, sin embargo, para publicar en el PlayStore es necesario haber crear la aplicación de Wear junto a la de Phone, por lo que lo crearemos en conjunto. Igual de importante tener como versión minima en Phone 4.3 Jelly Bean o superior.



Lo primero que configuraremos es la aplicación Phone, para ello no es necesario hacer alguna modificación, pero una vez que llegamos a la configuración para Wear es importante señalar que tendremos un Blank Wear Activity con sus respectivos Layouts:




Entender cual es nuestra aplicación para los telefonos y cual la del wearable es sencillo, tendremos separadas ambas por paquetes:



Y a nivel de carpetas, la aplicación para wear conserva la misma jerarquia:



A nivel de codigo, el MainActivity.java de la aplicación en Wear se muestra de la siguiente manera:

Código :

  public class MainActivity extends Activity {
 
    private TextView mTextView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        final WatchViewStub stub = (WatchViewStub) findViewById(R.id.watch_view_stub);
        stub.setOnLayoutInflatedListener(new WatchViewStub.OnLayoutInflatedListener() {
            @Override
            public void onLayoutInflated(WatchViewStub stub) {
                mTextView = (TextView) stub.findViewById(R.id.text);
            }
        });
    }
}


Seguimos tendiendo el mismo ciclo de vida de un Activity, sin embargo, de inmediato debemos "inflar" una vista. ¿Pórque?. Sucede que WatchViewStub es una especie de contenedor que puede ser tanto un Layout Redondo o uno Cuadrado (Los dos tipos de vista que tienen los primeros Android Wear), y por medio de su Listener se muestra el correcto.

Es por eso que en nuestro activity_main.xml solo vemos este Widget, sin embargo se hace referencia a las vistas rectangulares y redondas, estas vistas son un layout independiente, y de hecho, no tienen que ser estrictamente iguales.

Código :

<?xml version="1.0" encoding="utf-8"?>
<android.support.wearable.view.WatchViewStub
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/watch_view_stub"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:rectLayout="@layout/rect_activity_main"
    app:roundLayout="@layout/round_activity_main"
    tools:context=".MainActivity"
    tools:deviceIds="wear">
</android.support.wearable.view.WatchViewStub>


Para notar la diferencia, en este ejemplo modifique el round_activity_main.xml agregando una imagen, pero el rect_activity_main.xml lo deje igual (La mayoria de Widgets son compatibles):

rect_activity_main.xml:



Código :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" 
    tools:deviceIds="wear_square">
 
    <TextView android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:text="@string/hello_square" />    
</LinearLayout>



round_activity_main.xml:


Código :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#333366"
    tools:context=".MainActivity"
    tools:deviceIds="wear_round">
 
    <TextView android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_round"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="59dp" />
 
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/mejorandopapel"
        android:id="@+id/imageView"
        android:layout_below="@+id/text"
        android:layout_centerHorizontal="true" />
 
</RelativeLayout>


Lo unico que falta es probar el proyecto, para ello mostrare el ejemplo funcionando sobre un AVD, si tienes un dispositivo real existen dos opciones, depuración USB o Bluetooth. Con USB es de la misma forma que en telefonos, para Bluetooth solo es necesario consultar esta información:

Bluetooth Debugging

Lo primero que hacemos es iniciar nuestro AVD Manager, donde de primera, nos muestra los dispositivos que hemos creado, en este caso vamos a crear uno nuevo:




Nos dirigimos al apartado de Wear, donde tendremos dos configuraciones, yo creare uno tipo Round:



Lo siguiente es la versión del dispositivo, si recordamos los requerimientos esto debe ser Lollipop, de preferencia x86 para que sea mas rapido:



En Actions, es donde ejecutamos la Maquina Virtual, con el boton de Play:



Esperamos un momento a que inicie:



Antes de correr proyecto, nos aseguramos que vamos a compilar el proyecto Wear:




Y listo, tenemos nuestra primera App para Android Wear:



Y aqui en un dispositivo real:




Ya por ultimo, si ejecutamos el ejemplo en una vista rectangular, se ve de la siguiente manera:


Eso sucede ya que no lo modificamos. Estare muy agradecido si me mandas una captura de tu diseño en cuadraro por twitter (@thespianartist), esto es una señal de que querías aprender algo nuevo y me motiva en crear mas material.

El código esta disponible en Github

Nos vemos pronto.
Uriel Ramirez @thespianartist - Developer Advocate Mejorando.la - Platzi

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate