Este documento presenta los principios de diseño y las características de las aplicaciones para Android Wear. Describe dos nuevos espacios para las sugerencias y las demandas de los usuarios, así como las notificaciones, páginas, acciones y otras funciones. El objetivo es proporcionar información oportuna de una manera contextual, inteligente y con interacciones simples optimizadas para dispositivos wearables.

1. Android Wear

2. Juan Manuel Baiutti

3. Un nuevo modelo de UI
2 nuevos espacios para:
Suggest
y
Demand
Tu aplicacion Android Wear es para los dos!

4. Suggest - El context stream
Lista vertical de tarjetas
Cada tarjeta es útil
Copiar Google Now
Navegacion vertical
Podemos incluir fondo!
Tu App publica ahi!

5. Suggest - El context stream
Navegacion lateral:
Notificación + páginas
Notificación + botones
Notificación + acciones
Un tip:
Tocar arriba lleva al
home

6. 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” !!

7. Demand: The Cue Card
Acciones predefinidas
arrastrando hacia arriba
En las próximas
versiones tu App podrá
agregar comandos aquí!

8. Principios de diseño
La información correcta
En el momento correcto
Conectar el mundo real
con el mundo virtual

9. Principios de diseño
Android Wear
≠
Phones or Tablets

10. Principios de diseño
Contextual
Inteligente
La información justa en
el momento justo

11. 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

12. Principios de diseño
“Cero interaccion”..
Bueno .. casi cero..
Tamaño pequeño!
Interacciones simples!
Solo lo necesario!
Tocar, arrastrar, hablar!

13. Principios de diseño
“Tu asistente personal”..
Conoce tus preferencias!
Interrumpe solo lo
necesario
Siempre tiene una
respuesta

14. Principios de diseño
Android Wear
=
Conexión “inteligente” con el
mundo

15. Principios de diseño
Un antepasado: El GPS

16. Principios de diseño
El presente: Google Now

17. Principios de diseño
El presente: Siri

18. Principios de diseño
El presente: Cortana

19. Principios de diseño
El futuro: Her ??

20. Notificaciones
Tarjetas, son lo principal
Solo lo necesario, no
interrumpas al usuario
Utiliza mensajes visuales
El contenido es largo se
trunca automáticamente

21. Notificaciones

22. Notificaciones

23. Notificaciones

24. Acciones
Aparecen a la derecha de
tu notificación.
Maximo 3!
Primero la por defecto!
Deben ser verb-driven
Cortas, una línea

25. Imagenes
Aparecen detrás de las
notificaciones
Dan un “contexto visual”

26. Icono de aplicacion
Se agrega en la
notificación para
identificar tu App
No utilices texto o la
imagen de fondo para
esto

27. Paginas

28. Apilando notificaciones

29. Respuestas de voz

30. Wear versus Glass

31. Codelab!
Configurar el entorno
Analisis de la aplicacion de ejemplo
Un nuevo paso
Una nueva receta
Agregando un action y un video de YouTube

32. 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

33. 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

34. 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

35. 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!

36. Codelab: Configurar el entorno
Agregar biblioteca de soporte
• /extras/android/support/v4/android-support-
v4.jar
• Copia wearable-preview-support.jar a libs/

37. Ejemplo: RecipeAssistant
Crear notificaciones

38. Ejemplo: RecipeAssistant
Crear notificaciones: incluir
import android.preview.support.wearable.notifications.*;
import android.preview.support.v4.app.
NotificationManagerCompat;
import android.support.v4.app.NotificationCompat;

39. Ejemplo: RecipeAssistant
Crear notificaciones: Notification Builder
builder.setContentTitle(mRecipe.titleText);
builder.setContentText(mRecipe.summaryText);
builder.setSmallIcon(R.mipmap.ic_notification_recipe);

40. Ejemplo: RecipeAssistant
Crear notificaciones: Notification Builder
Notification notification = new WearableNotifications.Builder
(builder)
.addPages(notificationPages)
.build();
mNotificationManager.notify(Constants.NOTIFICATION_ID,
notification);

41. Ejemplo: RecipeAssistant
Crear paginas
Recipe.RecipeStep recipeStep = mRecipe.recipeSteps.get(i);
NotificationCompat.BigTextStyle style = new
NotificationCompat.BigTextStyle();
style.bigText(recipeStep.stepText);

42. Ejemplo: RecipeAssistant
Crear paginas
style.setBigContentTitle(String.format(
getResources().getString(R.string.step_count), i + 1,
stepCount));
style.setSummaryText("");

43. Ejemplo: RecipeAssistant
Crear paginas
NotificationCompat.Builder builder = new NotificationCompat.
Builder(this);
builder.setStyle(style);
notificationPages.add(builder.build());

44. Ejemplo: RecipeAssistant
Incorporar acciones
String videoId = "tHVzFLtvbGQ";
Intent videoIntent = YouTubeIntents.
createPlayVideoIntentWithOptions(this, videoId, true, false);
PendingIntent videoPendingIntent =
PendingIntent.getActivity(this, 0, videoIntent, 0);

45. Ejemplo: RecipeAssistant
Lanzar un video de YouTube desde el device
WearableNotifications.Action action = new
WearableNotifications.Action.Builder(
R.drawable.youtube,
getString(R.string.video_youtube),videoPendingIntent)
.build();

46. Ejemplo: RecipeAssistant
Lanzar un video de YouTube desde el device
Notification notification = new WearableNotifications.Builder
(builder)
.addAction( action )
.addPages(notificationPages)
.build();

47. Preguntas?
+JuanmaBaiutti
@juanmab