Upload
juan-manuel-baiutti
View
154
Download
4
Tags:
Embed Size (px)
Citation preview
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