Android Wear

Juan Manuel Baiutti

Un nuevo modelo de UI

2 nuevos espacios para:

Suggest

y

Demand

Tu aplicacion Android Wear es para los dos!

Suggest - El context stream

Lista vertical de tarjetas

Cada tarjeta es útil

Copiar Google Now

Navegacion vertical

Podemos incluir fondo!

Tu App publica ahi!

Suggest - El context stream

Navegacion lateral:

Notificación + páginas

Notificación + botones

Notificación + acciones

Un tip:

Tocar arriba lleva al home

Demand: The Cue Card

Cuando el context stream no anticipa al usuario

Es para hablarle al device

¿Como?? ..

diciendo "Ok Google"

O tocando la “g” !!

Demand: The Cue Card

Acciones predefinidas arrastrando hacia arriba

En las próximas versiones tu App podrá agregar comandos aquí!

Principios de diseño

La información correcta

En el momento correcto

Conectar el mundo real con el mundo virtual

Principios de diseño

Android Wear

≠Phones or Tablets

Principios de diseño

Contextual

Inteligente

La información justa en el momento justo

Principios de diseño

“Cortito y al pie”

Una buena App muestra la información justa

Esta pensada para usarse todo el dia, y para entregar en cada momento la info indicada

Principios de diseño

“Cero interaccion”..

Bueno .. casi cero..

Tamaño pequeño!

Interacciones simples!

Solo lo necesario!

Tocar, arrastrar, hablar!

Principios de diseño

“Tu asistente personal”..

Conoce tus preferencias!

Interrumpe solo lo necesario

Siempre tiene una respuesta

Principios de diseño

Android Wear

=

Conexión “inteligente” con el mundo

Principios de diseño

Un antepasado: El GPS

Principios de diseño

El presente: Google Now

Principios de diseño

El presente: Siri

Principios de diseño

El presente: Cortana

Principios de diseño

El futuro: Her ??

Notificaciones

Tarjetas, son lo principal

Solo lo necesario, no interrumpas al usuario

Utiliza mensajes visuales

El contenido es largo se trunca automáticamente

Notificaciones

Notificaciones

Notificaciones

Acciones

Aparecen a la derecha de tu notificación.

Maximo 3!

Primero la por defecto!

Deben ser verb-driven

Cortas, una línea

Imagenes

Aparecen detrás de las notificaciones

Dan un “contexto visual”

Icono de aplicacion

Se agrega en la notificación para identificar tu App

No utilices texto o la imagen de fondo para esto

Paginas

Apilando notificaciones

Respuestas de voz

Wear versus Glass

Codelab!

Configurar el entorno

Analisis de la aplicacion de ejemplo

Un nuevo paso

Una nueva receta

Agregando un action y un video de YouTube

Codelab: Configurar el entorno

Pre requisitos

• Instalar Android SDK, .. o mejor ADT

• Darse de alta en el preview de Android Wear• Descargar la biblioteca• Instalar Android Wear Preview desde Play

Codelab: Configurar el entorno

Instalar imagen de Android Wear

• Android SDK Tools revision 22.6 o superior• Agregar el Android Wear ARM EABI v7a• Actualizar Android Support Library

Codelab: Configurar el entorno

Crear un dispositivo virtual

• Abrir Android Virtual Device Manager• Target Android 4.4.2 - API Level 19• CPU Android Wear ARM (armeabi-v7a)• Hardware keyboard present• Launch from snapshot

Codelab: Configurar el entorno

Configurar Android Wear Preview

• Dar permiso notification access• Conectar via USB• adb -d forward tcp:5601 tcp:5601• Si el icono del emulador cambia a “g” OK!

Codelab: Configurar el entorno

Agregar biblioteca de soporte

• /extras/android/support/v4/android-support-v4.jar

• Copia wearable-preview-support.jar a libs/

Ejemplo: RecipeAssistant

Crear notificaciones

Ejemplo: RecipeAssistant

Crear notificaciones: incluirimport android.preview.support.wearable.notifications.*;

import android.preview.support.v4.app.NotificationManagerCompat;

import android.support.v4.app.NotificationCompat;

Ejemplo: RecipeAssistant

Crear notificaciones: Notification Builder

builder.setContentTitle(mRecipe.titleText);

builder.setContentText(mRecipe.summaryText);

builder.setSmallIcon(R.mipmap.ic_notification_recipe);

Ejemplo: RecipeAssistant

Crear notificaciones: Notification BuilderNotification notification = new WearableNotifications.Builder(builder)

.addPages(notificationPages)

.build();

mNotificationManager.notify(Constants.NOTIFICATION_ID, notification);

Ejemplo: RecipeAssistant

Crear paginasRecipe.RecipeStep recipeStep = mRecipe.recipeSteps.get(i);

NotificationCompat.BigTextStyle style = new NotificationCompat.BigTextStyle();

style.bigText(recipeStep.stepText);

Ejemplo: RecipeAssistant

Crear paginasstyle.setBigContentTitle(String.format(

getResources().getString(R.string.step_count), i + 1, stepCount));

style.setSummaryText("");

Ejemplo: RecipeAssistant

Crear paginasNotificationCompat.Builder builder = new NotificationCompat.

Builder(this);

builder.setStyle(style);

notificationPages.add(builder.build());

Ejemplo: RecipeAssistant

Incorporar accionesString videoId = "tHVzFLtvbGQ";

Intent videoIntent = YouTubeIntents.createPlayVideoIntentWithOptions(this, videoId, true, false);

PendingIntent videoPendingIntent =

PendingIntent.getActivity(this, 0, videoIntent, 0);

Ejemplo: RecipeAssistant

Lanzar un video de YouTube desde el deviceWearableNotifications.Action action = new

WearableNotifications.Action.Builder(

R.drawable.youtube,

getString(R.string.video_youtube),videoPendingIntent)

.build();

Ejemplo: RecipeAssistant

Lanzar un video de YouTube desde el deviceNotification notification = new WearableNotifications.Builder

(builder)

.addAction( action )

.addPages(notificationPages)

.build();

Preguntas?

+JuanmaBaiutti

@juanmab