2. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
¿QUÉ
SON
LOS
“WEARABLES”?
Dispositivo ponible, wearable o dispositivo wearable es dentro del sector tecnológico y más
concretamente de la electrónica de consumo es aquel dispositivo que se lleva sobre, debajo o
incluido en la ropa y que está siempre encendido, no necesita encenderse y apagarse.
Algunas de sus sorprendentes características son que permiten la funcionalidad multitarea. Osea
que requiere dejar de hacer otra cosa para ser usado y puede actuar como extensión del cuerpo o
mente del usuario.
A pesar de que en la actualidad se le conoce a esta categoría de productos como dispositivos
wearable también pueden llamarse dispositivos vestibles, llevables o ponibles e incluso
complementos inteligentes.
Hoy en día, existe una amplia gama de dispositivos wearables como: relojes inteligentes o
smartwatches, pulseras de actividad, gafas inteligentes o ropa inteligente entre otros.
3. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
EVOLUCIÓN
Recordando un poco la historia de los wearables podemos mirar atrás y recordar aquél primer reloj
con fecha, diseñado y creado para la Reina de Nápoles, o el dispositivo oculto en zapatos que
usaron Thorp y Shannon para hacer trampas en las ruletas de los casinos en las décadas de los
60´ y 70´.
Pero usando el contexto completo de wearable como aquel dispositivo electrónico capaz de ser
programado por el usuario para realizar acciones complejas, el primero lo inventó Steve Mann al
final de la década de los 70´.
En los últimos cinco años, con la irrupción de la tecnología de masas con formatos cada vez más
pequeños, es cuando los wearables han comenzado a surgir como un elemento de cambio para
los consumidores y las empresas.
4. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
¿QUÉ
ES
ANDROID
WEAR?
Es el sistema operativo para wearables, basado en Android que Google presentó a la sociedad el
18 de marzo de 2014. El sistema en sí está pensado para ser utilizado en relojes inteligentes
(smartwatches), pulseras inteligentes (smartbands), y cualquier otro wearable que pueda surgir en
el futuro.
Android Wear es una versión de Android 4.4.2 (KitKat) con una interfaz totalmente táctil y
funcionalidades adaptadas a dispositivos wearables que simplemente nos permitirá ver e
interactuar con las notificaciones de nuestros dispositivo Android y ver información útil
dependiendo del contexto.
5. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
Actualmente el Android Wear Preview soporta relojes con pantalla redonda con una resolución
circular de 320x320 píxeles y relojes con pantalla cuadra con una resolución 280x280 píxeles.
Todavía no han ofrecido las especificaciones técnicas de los primeros dispositivos, pero parecen
que tendrán un procesador de doble núcleo, 512 MB de RAM, 4 GB de memoria interna, Bluetooth
4.0 y algunos sensores.
En la vista principal de Android Wear veremos la hora, un acceso para realizar comandos de voz y
nuestra lista de notificaciones y tarjetas contextuales con información útil.
Con un desplazamiento vertical iremos viendo todas las notificaciones y tarjetas, y con un
desplazamiento hacia la izquierda veremos más información y acciones de una determinada
tarjeta. Con un desplazamiento hacia la derecha del todo la eliminaremos una notificación/tarjeta
de la lista.
6. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
Las notificaciones siempre estarán sincronizadas entre nuestro Android y Android Wear, si la
descartamos en un dispositivo será descartada en el otro.
Además de las notificaciones de mensajes y llamadas, Google Now nos mostrará sus tarjetas del
tiempo, resultados deportivos, vuelos, y una aplicación deportiva podrá mostrarnos las calorías que
hemos consumido, entre otros ejemplos.
En muchas de las notificaciones nos ofrecerán una serie de acciones para interactuar con ellas,
como por ejemplo contestar con voz o con mensajes predefinidos a un mensaje, controlar el
reproductor de música de nuestro Android, u obtener indicaciones para llegar a una dirección.
En muchas de las notificaciones nos ofrecerán una serie de acciones para interactuar con ellas,
como por ejemplo contestar con voz o con mensajes predefinidos a un mensaje, controlar el
reproductor de música de nuestro Android, u obtener indicaciones para llegar a una dirección.
8. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
Para realizar acciones y obtener expresamente información ya tenemos que usar sus comandos de
voz al pulsar el icono de la "G" de Google.
Al pulsar sobre la "G" o al decir "Ok Google" ya podremos pedir solicitar expresamente acciones
para crear notas, poner alarmas, mandar mensajes, obtener indicaciones, reproducir música,
identificar canciones, poner un temporizador y más. Al desplazar hacía arriba esta vista veremos la
lista de comandos soportados.
9. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
DESARROLLANDO
PARA
ANDROID
WEAR
El diseño de aplicaciones para Android Wear es sustancialmente diferente que el diseño de los
teléfonos o tabletas, existen diferentes fortalezas y debilidades, diferentes casos de uso,
ergonomías distintas, etc.
Debes entender la visión general de la experiencia Android Wear en un wearable, para así diseñar
aplicaciones que se ajusten a las necesidades de los usuarios. Si estamos hablando que esto
involucra un nuevo factor de forma por lo tanto también tendremos una nueva interfaz de usuario.
En Android Wear tendremos tres casos específicos en los que podemos desarrollar:
1. Notificaciones (Sugeridas – Contextuales y Puenteadas por el móvil)
2. En demanda
3. Watch Faces
10. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
1. Notificaciones
Las notificaciones tienen que estar diseñadas para mostrarse en tarjetas que estén presentes en
un flujo vertical y horizontal, cada una mostrándose como pieza útil y oportuna. Solo una tarjeta se
muestra a la vez se pueden utilizar imágenes de de fondo para proporcionar información como
ayuda visual adicional.
Este modelo garantiza que lo usuarios no tienen que acceder a muchas aplicaciones diferentes
para comprobar sus estados, simplemente echan un vistazo a una breve notificación.
2. En Demanda
Para los casos en donde no se sugiere alguna notificación los usuarios pueden hablar con Google,
usando el comando de voz “OK Google” o tocando el ícono. Cada comando de voz activa un
“intent” (disparador) específico, podrías hacer coincidir tus aplicaciones a alguno de estos intent
para activarlas. Muchas aplicaciones podrían estar registradas y responder al mismo comando de
voz por lo que el usuario tendrá la posibilidad de elegir cual de ellas lanzar.
Demás de los comandos por voz las aplicaciones pueden responder a un toque en el menú
haciendo que sean lanzadas a pantalla completa.
11. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
3. Watch Faces
Estos Pueden ser elegidos por el usuario para mostrarse en la pantalla de inicio, los fondos de
pantalla pueden mostrar la hora y pueden cambiarse dejándose presionado prolongadamente.
VISION
ANDROID
WEAR
INICIAR
AUTOMÁTICAMENTE
La mayoría de la gente está acostumbrada a lanzar aplicaciones haciendo clic en un icono. Android
Wear, es diferente. Las aplicaciones portátiles son conscientes del contexto del usuario, como la
hora, el lugar, la actividad física, y así sucesivamente.
12. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
INFORMACIÓN
LEGIBLE
Un reloj de pulsera inteligente, está diseñado para que pueda ver el tiempo en una fracción de
segundo y seguir adelante con lo que estaba haciendo. Cuanto menos tiempo necesite para utilizar
su software, mayor será el tiempo que el usuario puede estar presente en lo que están haciendo.
Android Wear es rápido, preciso, e inmediato.
TODO
SOBRE
CUANDO
NOTIFICAR
ALGO.
Android Wear es como un asistente personal que sabe tus preferencias, y que solo deben ser
interrumpidas cuando sea absolutamente necesario, y siempre a la mano para dar una respuesta
fácil. Android Wear es útil, respetuoso y sensible.
13. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
CERO
O
LA
MENOR
INTERACCIÓN
POSIBLE
La mayoría de las entradas deben basarse en toques o comandos por voz, y entradas que
requieran movimientos de dedos deben evitarse. Android Wear es gestual, sencillo y rápido.
PRINCIPIOS
DE
DISEÑO
Algunos principios para el diseño son los siguientes:
CONCÉNTRESE
EN
NO
DETENER
EL
USUARIO
Y
QUE
EL
RESTO
SIGA
Un reloj es un factor de forma perfecta para un dispositivo que se puede utilizar mientras se hace
otra cosa, como cocinar, comer, caminar, correr, o incluso tener una conversación.
El tiempo requerido para realizar una acción debe ser de 5 segundos.
15. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
DISEÑO
CON
GESTOS
GRANDES
Cuando el usuario usa su Smartphone, está utilizando una gran superficie de la pantalla, o sea que
no requiere de tanta precisión. Sin embargo, al utilizar un Smart watch la pantalla es mucho mas
pequeña y por consiguiente necesita de una precisión mucho mayor.
Si tienes que reducir la velocidad al caminar o parar una conversación para ser precisos, debes
considerar diseñar gestos más grandes.
16. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
PIENSA
EN
FLUJO
DE
TARJETAS
PRIMERO
La mejor experiencia en un dispositivo portátil es cuando el contenido correcto esta ahí sólo
cuando el usuario lo necesita.
Haz una lista de todas las situaciones en las que un usuario se podría encontrar para hacer tu
aplicación útil.
• Cosas en común
• La hora del día
• Ciertas actividades físicas
Lo más probable es llegar a visualizar situaciones diferentes, lo cual es bueno, ya que significa que
se puede diseñar una tarjeta para cada una de esas situaciones. Recuerda que el usuario siempre
tiene la opción de silenciar por completo las tarjetas (notificaciones) si siente que no son lo
suficientemente relevantes.
Por ejemplo. Una aplicación que ofrece a los usuarios el registro de entrada podría aparecer
sugiriendo otro lugar más cercano, después de estar cierta cantidad de tiempo en ese lugar.
17. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
HACER
ALGO,
MUY
RÁPIDO
Si a los usuarios les toma unos segundos interactuar con tu aplicación ellos la utilizarán muchas
veces durante el día.
Si estás utilizando una tarjeta recuerda que puedes utilizar varias páginas.
DISEÑO
DE
LA
ESQUINA
DEL
OJO
Si piensas en diseñar tu aplicación a solo un vistazo puede ayudar al usuario a obtener todo el
valor de tu aplicación y rápidamente volver a lo que estaba haciendo.
18. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
NO
SEAS
UN
ACOSADOR
CONSTANTE
No utilices demasiado la vibración. Un reloj toca constantemente la piel del usuario. Siendo esto
íntimo, se desea hacer vibrar el reloj lo menos posible que como normalmente lo haces con tu
teléfono
19. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
ESTRUCTURA
DE
LAS
APLICACIONES
En un Smartphone los usuarios tienen que tocar los íconos para abrir las aplicaciones. Android
Wear es diferente;; una aplicación wearable muestra solo una tarjeta en pantalla solo cuando
sucede algo realmente relevante.
Resumiendo lo anterior podemos decir lo siguiente:
• La interacción que tienen los usuarios con los teléfonos es distinta a la que tienen con
Android Wear.
• Se recomienda no utilizar flujos que hagan pensar demasiado al usuario.
FUNCIONALIDAD.
NOTIFICACIONES
• Notificaciones puenteadas
Esta es la forma más sencilla de conseguir en Android Wear. Se pueden añadir características
de wearables como páginas adicionales y respuestas de voz mediante el uso de las nuevas
API de notificación.
20. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
• Notificaciones contextuales
Esto es lo que hace Android Wear mejor: muestra la información de los usuarios y la
funcionalidad solo cuando lo necesitan.
He aquí cómo funciona: La aplicación sabe cuando algo es importante para el usuario. Cuando
se produce el evento apropiado, la aplicación desencadena una notificación.
La obtención de activación del contexto adecuado es una de las cosas más impactantes que
se pueden hacer para elaborar una gran experiencia de usuario.
La forma más sencilla de hacerlo es utilizar plantillas estándar para las notificaciones de
Android. Pero también puedes hacer tu propio diseño desde cero con una actividad dentro de
una tarjeta.
21. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
INTERFAZ
DE
USUARIO.
MAPA
COMPLETO
DE
LA
PANTALLA
• 2D Picker
Normalmente estamos acostumbrados a visualizar listas en una sola fila (dimensión), este tipo
de listas se les llama 1D.
El 2D Picker es un patrón que se utiliza para mostrar opciones de una lista una matriz 2D de
opciones, una forma de presentar opciones categorizadas.
En una vista de cuadrícula (dos dimensiones) el usuario puede desplazarse libremente en
ambas dimensiones, como se muestra.
22. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
La navegación debe ser vertical y luego horizontal, no horizontal-vertical
Algunos consejos para la navegación 2D:
• Reducir al mínimo el número de tarjetas
• Mostrar la tarjeta más popular en la parte superior
• Mantén las tarjetas extremadamente simples
• Layouts Personalizados. Nos solo uses tarjetas crea tus
propios layouts
Hay algunas cosas que no se puede hacer en una tarjeta. En un mapa por ejemplo, surge la
necesidad de deslizarse en muchas direcciones, si estamos en un juego, probablemente
suceda algo similar. En esos casos, podría ser una buena idea diseñar pantalla completa.
1. Se muestra una
notificación
contextual en tarjeta.
2. El usuario hace tap
en la tarjeta.
3. Se abre un activity
en pantalla completa
para una micro
interacción.
4. Se quita la
actividad y el
usuario regresa
al flujo.
23. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
Se recomienda hacer una aplicación de pantalla completa solo cuando el trabajo deseado no se
puede realizar en una tarjeta, en esos casos se puede diseñar un activity a full-screen para
posteriormente salir rápidamente. Esto hará sentir al usuario que tu aplicación funciona como una
parte integrada del sistema. Android Wear utiliza una pantalla completa para sus propias
aplicaciones como la de comandos por voz y cronómetro.
Haz
que
tus
aplicaciones
de
pantalla
sean
completamente
distintas
Debes procurar que tu diseño de pantalla completa no luzca como una tarjeta ya que podría
confundir a los usuarios, un diseño 2D te puede ayudar mucho para estos casos.
Salidas
automáticas
Muchos dispositivos no tienen botón de “home” o “back”, por lo que salir de una aplicación a veces
será más difícil, por esta razón debes procurar las salidas automáticas, por ejemplo:
• Un mapa que le pida a un usuario colocar un pin, y al ponerlo la aplicación salga de la
aplicación
• Un juego corto que al terminar salga de la aplicación automáticamente.
• Una aplicación de dibujo que se termine al detectar 5 segundos de inactividad.
Salidas
manuales
Aún con los puntos de salida automáticos pueden existir momentos en los que el usuario desea
salir inmediatamente de la aplicación. En todas las aplicaciones se debe tratar el long-press dando
a los usuarios la oportunidad de salir, para esto puedes utilizar DismissOverlayView.
24. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
RECURSOS
PARA
ANDROID
WEAR
1. Kit de herramientas para interfaz de usuario:
El kit de herramientas contiene las especificaciones y las mediciones de
todos los componentes de interfaz de usuario de Android Wear, primarios
detallados. Disponible en formatos PDF e Illustrator.
http://developer.android.com/downloads/design/Android_Wear_T
oolkit_20140722.ai
http://developer.android.com/downloads/design/Android_Wear_T
oolkit_20140722.pdf
2. Patrones de flujo muestra:
Ejemplos de cómo se encadenan los componentes en los patrones de
flujo en la interfaz de usuario de Android Wear, desde simples
notificaciones hasta las interacciones complejas que implican actividades
de pantalla completa.
http://developer.android.com/downloads/design/Android_Wear_P
atterns_20140722.ai
http://developer.android.com/downloads/design/Android_Wear_P
atterns_20140722.pdf
3. Diseño muestra de maquetación de una aplicación
Tarjetas y elementos de interfaz de usuario para algunas aplicaciones de
ejemplo en formato PSD completamente editable.
http://developer.android.com/downloads/design/Android_Wear_S
ample_Assets.zip
4. Kit de herramientas de interfaz de usuario para Watch Faces
Especificaciones y medidas detalladas para fondos, tarjetas de
notificación, e indicadores del sistema.
http://developer.android.com/downloads/design/AndroidWear_De
signSpec_11.13.pdf
25. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
GESTOS
Solamente los taps están disponibles. Esta restricción es importante para mantener las
interacciones del sistema claras y coherentes, y para hacer que las interacciones en el watch-face
lo más simple posible
Como regla general, la interacción watch-face debe ser sencilla con el usuario de completar su
acción deseada dentro de un o dos toques.
ESTILOS
Existe una serie de consideraciones de diseño a tener en cuenta que son particulares de Android
Wear, a continuación se muestran algunas:
• Tamaño de pantalla:
Se consciente de los diferentes tamaños de los dispositivos y formas. Los dispositivos
portátiles son una forma de expresión de sus propietarios, y de la moda. La mayor parte de
las complejidades de apoyo a estos dispositivos diferentes es atendido a nivel de sistema,
pero hay que tener en cuenta diferentes tipos de pantalla en el diseño de aplicaciones de
pantalla completas.
26. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
Utiliza el emulador de Android Wear para probar los dispositivos tanto en cuadrados, como
redondos, y tenga en cuenta que WatchViewStub está disponible para las actividades
para detectar si se está utilizando un dispositivo cuadrado o redondo.
• Los recursos específicos requeridos
Un conjunto básico de recursos estándar, puede ser proporcionado en función del diseño
de la tarjeta:
• icono de la aplicación
• imagen de fondo o imágenes
• iconos de acción
• animaciones de confirmación de la acción.
Por supuesto, el diseño específico puede requerir otros activos. Las imágenes de fondo
deben ser proporcionados en formato landscape al menos 600px de ancho para las
notificaciones que incluyen páginas de tarjetas, ya que el sistema añade automáticamente
un efecto “parallax”.
27. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
• La
legibilidad
de
la
tarjeta
Pruebe el diseño de la tarjeta para asegurar que la información útil es visualizada en la
pantalla de inicio. El mensaje principal de la tarjeta debe ser legible y fácilmente de ser
visualizada la información, sobre todo para las notificaciones de contexto.
• Baja
densidad
de
información
Las tarjetas deben ser diseñadas para ser vistas en una fracción de segundo, al igual que
la lectura de la hora en un reloj tradicional. En la mayoría de los casos, el par icono y valor,
o un título y subtítulo debería ser suficiente para transmitir un mensaje significativo.
Tenga en cuenta que la foto de fondo también se debe utilizar para transmitir información;;
fondos que cambian para reflejar y apoyar el mensaje principal de la tarjeta.
28. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
• Separa
la
información
en
trozos
En los casos en que sea absolutamente necesario obtener información adicional no
diseñes una tarjeta en el punto en que se vea afectada la legibilidad de la información, en
su lugar añade una o varias páginas adicionales a la derecha de la tarjeta principal.
• Animaciones
para
confirmaciones
Si tu aplicación permite al usuario realizar una acción, es necesario proporcionar
retroalimentación positiva. Mostrar una animación de confirmación genérica o crear una
propia.
Una animación de confirmación es una oportunidad para expresar el carácter de tu
aplicación e inserta un momento agradable para tu usuario.
Crea animaciones cortas (menos de 1000 ms) y simples. La animación del icono de
confirmación es una forma efectiva para transmitir al usuario un nuevo estado después de
haber completado una acción.
29. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
CREANDO
Y
CORRIENDO
UNA
APLICACIÓN
WEARABLE
Las aplicaciones de Wearable se ejecutan directamente en el dispositivo portátil, que le da acceso
al hardware de bajo nivel, tales como sensores, actividades, servicios y más.
Una aplicación wearable necesita de la aplicación principal si se quiere publicar en la tienda de
Google Play. Esto debido a que los wearables no son compatibles con la tienda de Google Play.
30. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
PRELIMINARES
Actualiza
el
SDK
Antes de empezar a crear aplicaciones para weareable, debes:
• Tener lista la actualización de sus herramientas de SDK a la versión 23.0.0 o superior.
Las herramientas de SDK actualizadas le permiten crear y probar aplicaciones weareable.
• Actualiza tu SDK de Android con 4.4W.2 (API 20) o más alto.
La versión actualizada plataforma ofrece nuevas APIs para aplicaciones weareable,.
Verifica que tengas instalada una imagen de Android Wear, ya sea ARM EABI o Intel en tu SDK
Manager
Recomendamos que pruebes en el hardware real para que puedas evaluar mejor la experiencia del
usuario. Sin embargo, el emulador te permite probar diferentes tipos de formas de pantalla, lo cual
es sumamente útil.
31. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
LEVANTANDO
UN
DISPOSITIVO
VIRTUAL
WEAREABLE
Configurar un Android Wear de dispositivos virtuales
Para configurar un dispositivo virtual Android Wear:
• Haga clic en Herramientas> Administrador de Android> AVD.
32. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
• Selecciona el tipo de dispositivo
• Seleccionar Android Wear cuadrada o redonda
• Haga clic en Siguiente.
33. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
• Seleccione un Sistema Operativo (por ejemplo, KitKat Wear).
• Haga clic en Siguiente.
• (Opcional) Cambie sus preferencias para el dispositivo virtual.
• Haga clic en Finalizar.
34. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
• Iniciar el emulador:
• Seleccione el dispositivo virtual que acaba de crear.
• Haga clic en el botón Play.
• Espere hasta que el emulador se inicie y muestre la pantalla principal de Android
Wear.
35. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
Enlazar
el
teléfono
con
el
emulador:
1. En el teléfono, instalar la aplicación Android Wear de Google Play.
https://play.google.com/store/apps/details?id=com.google.android.wearable.app&hl=es_419
36. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
2. Conecta el teléfono a la computadora vía USB.
3. Verifica en qué ubicación se encuentra el path de tu Android sdk puedes verlo abriendo tu
SDK Manager
37. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
4. Una vez que localizaste el path accede desde la terminal del IDE a ella, con el comando cd
Dirígete a la carpeta platform-tools
5. Corre el siguiente comando para transmitir el puerto de comunicación entre el AVD al
teléfono conectado (debes hacerlo cada vez que el teléfono esté conectado):
adb -‐d forward tcp:5601 tcp:5601
6. Iniciar la aplicación Android Wear en tu teléfono y conectar con el emulador.
38. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
7. Pulse en el menú de la esquina superior derecha de la aplicación Android Wear y
seleccione Probar notificaciones del reloj o algo similar.
8. Las tarjetas que seleccione aparecen como notificaciones en la pantalla principal del
emulador.
39. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
CONFIGURACIÓN
DE
UN
DISPOSITIVO
ANDROID
WEAR
Para configurar un dispositivo Android Wear:
1. Instalar la aplicación Android Wear, disponible en Google Play, en la teléfono.
https://play.google.com/store/apps/details?id=com.google.android.wearable.app&hl=es_41
9
Siga las instrucciones de la aplicación para vincular el teléfono con su weareable,. Esto le
permite probar las notificaciones sincronizadas del teléfono, si se les está construyendo.
Deja la aplicación Android Wear abierta en tu teléfono.
2. Habilitar la depuración ADB en el dispositivo Android Wear.
• Vaya a Configuración> Acerca de.
• Toque Número de Compilación siete veces.
• Deslízate hacia la derecha para volver al menú de configuración.
• Ir a Opciones de desarrollador en la parte inferior de la pantalla.
• Toque ADB depuración para permitir adb.
40. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
3. Conectar el wearable, a su equipo a través de USB, por lo que puede instalar aplicaciones
directamente a ella a medida que desarrolla. Aparece un mensaje en tanto el wearable, y la
aplicación Android Wear le pide que permita la depuración.
4. En la aplicación Android Wear, compruebe Permitir siempre desde este equipo y pulse OK.
El wearable, deberá aparecer cuando se ejecute el comando adb devices.
Si no puede conectar su wearable, a la máquina a través de USB, se puede intentar la conexión
a través de Bluetooth.
CONEXIÓN
A
TRAVÉS
DE
BLUETOOTH
1.
Configuración
del
dispositivo:
1. Habilitar la depuración USB en el teléfono:
• Abre la aplicación Ajustes y desplácese hasta la parte inferior.
• Si no tiene una configuración de Opciones de desarrollo, toque Acerca del teléfono
(o Acerca de la tableta), vaya a la parte inferior, y pulse el número de compilación
7 veces.
• Volver atrás y pulse Opciones de desarrollo.
• Habilitar depuración de USB.
41. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
2. Habilitada la depuración de Bluetooth en el weareable:
1. Toque en la pantalla de inicio dos veces para que aparezca el menú
2. Seleccionar los ajustes de fondo y toque.
3. Desplazarse hasta la parte inferior. Si no hay ningún elemento Opciones de
desarrollo, toque Acerca de, y luego toque el número de compilación 7 veces.
4. Pulse el elemento Opciones de desarrollo.
5. Habilitar depuración a través de Bluetooth.
2.
Configurando
una
sesión
de
debugging:
1. Abra la aplicación Android Wear en el teléfono
2. En la parte superior derecha seleccione Configuración
42. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
3. Habilitar la depuración a través de Bluetooth.
Deberías ver lo siguiente:
Host: disconnected
Target: connected
4. Conecta el teléfono a la computadora por USB
5. Verifica en qué ubicación se encuentra el path de tu Android sdk puedes verlo abriendo tu SDK
Manager
43. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
6. Una vez que localizaste el path accede desde la terminal del IDE a ella, con el comando cd
Una vez ahí dirígete a la carpeta platform-tools
7. Corre el siguiente comando para establecer un puente de conexión:
adb forward tcp:4444 localabstract:/adb-‐hub
adb connect localhost:4444
Si estas en sistema Mac OS o Linux, debes anteponer ./ en el comando adb de la siguiente
forma:
./adb forward tcp:4444 localabstract:/adb-‐hub
./adb connect localhost:4444
Si se rechaza la conexión, verifica todos los pasos anteriores y en vez de colocar localhost coloca
la dirección ip: 127.0.0.1
44. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
adb forward tcp:4444 localabstract:/adb-‐hub
adb connect 127.0.0.1:4444
Una vez conectado, te saldrá una notificación en el dispositivo Watch, y en la aplicación Android
Wear, se debe ver los siguiente:
Host: connected
Target: connected
45. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
CREAR
UN
PROYECTO
Corre tu proyecto con normalidad y ahora debe aparecer tu dispositivo Watch disponible para
correr.
Para comenzar el desarrollo, crear un proyecto de aplicación que contiene los módulos de
aplicaciones portátiles y de mano. En Android Studio, haga clic en Archivo> Nuevo proyecto y siga
las instrucciones del asistente de proyectos, como se describe en Creación de un proyecto. A
medida que siga el asistente, introduzca la siguiente información:
1. En la ventana de su proyecto Configurar, introduzca un nombre para la aplicación y el
nombre del paquete.
46. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
2. En la ventana de los factores de forma:
• Seleccionar teléfono y la tableta y seleccione API 9: Android 2.3 (Gingerbread) bajo SDK
mínimo.
• Seleccione Wear y seleccione API 20: Android 4.4 (KitKat desgaste) bajo SDK mínimo.
3. En la primera ventana Añadir una actividad en blanco
47. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
4. En la segunda ventana Añadir una actividad en blanco para Wear
48. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
Cuando se complete el asistente, Android Studio crea un nuevo proyecto con dos módulos, mobile
y wear.
Ahora tienes un proyecto para la teléfono y Android wear para cualquiera de estos crear
actividades, servicios y layouts personalizados.
La aplicación para teléfono hace la mayor parte del trabajo, tales como comunicaciones de red,
procesamiento intensivo o tareas que requieren largos períodos de interacción con el usuario.
Cuando la aplicación completa estas operaciones, deberá notificar a wearable de los resultados a
través de notificaciones o mediante la de los datos.
Nota: El módulo de wear también contiene una actividad de "Hello World" que utiliza un
WatchViewStub. Esta clase infla un diseño en función de si la pantalla del dispositivo es redonda
o cuadrada. La clase WatchViewStub es uno de los widgets de interfaz de usuario que la biblioteca
de soporte para weareables proporciona.
49. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
COMPOSICIÓN
DEL
PROYECTO,
ANDROID
WEAR
Un proyecto Android Wear luce muy similar aun proyecto para mobile.
50. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
ANDROIDMANIFEST.XML
Existe un archivo AndroidManifest.xml el cual tendrá toda la configuración de la aplicación wear, la
declaración de activities, servicios, permisos etc. además de una feature que se observa en la
imagen, el cuál significa que esta aplicación será utilizada para un hardware de tipo watch.
51. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
ARCHIVOS
.JAVA
Observaremos que también tenemos una carpeta java, en la cual se colocarán todas nuestras
clases. En particular el IDE nos crea el archivo MainActivity.java este archivo contiene todo lo
necesario para tener un completo control del layout activity_mail.xml, además observamos que
contiene código adicional el cual tendrá todo el manejo de los views para un Watch.
Observamos estas líneas de código:
La clase WatchViewStub será la que controle todos los views contenidos en el layout, el método
setOnLayoutInflatedListener, estará escuchando cuando la vista sea mostrada en pantalla
(inflada), a partir de ese momento se puede proceder a manipular los views.
La manipulación de los views declarados en el layout, debe darse dentro del método
onLayoutInflated, como se muestra en la figura anterior.
52. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
ARCHIVOS
DE
RECURSOS
-‐
RES
Dentro de un proyecto wear podemos tener recursos que estén accesibles solo para la aplicación
wearable como:
• Imágenes – drawable
• Layouts – layout
• Iconos – mipmap
• Strings – values
53. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
LAYOUTS
En Android Wear tendremos que diseñar layouts siempre tomando en cuenta los dos estilos de
SmartWatch que tenemos.
Para esto necesitaremos crear dos layouts, uno para cada estilo de dispositivo.
• rect_activity_layout.xml
• round_activity_layout.xml
El último layout que alcanzamos a ver activity_main.xml se encargará de hacer la coordinación
sobre qué layout mostrar oportunamente dependiendo del dispositivo en donde abierta la
aplicación en ese momento.
54. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
STRINGS
Aquí también tendremos disponible un archivo strings.xml para concentrar todos los textos de la
aplicación wear.
GRADLE
Cuando creamos una aplicación Android Wear tendremos disponible dos archivos de configuración
gradle, uno para mobile y otro para wear.
En el archivo gradle mobile será necesario que esté presente la línea wearApp project(‘:wear’) en
la sección de dependencias, pues esté hará que la aplicación wear sea una extensión de mobile y
que dependa de este, sin esta línea la aplicación wear sería invisible y todo lo que esté contenido
en el proyecto no funcionaría
55. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
El archivo gradle wear contendrá todas las dependencias y librerías y serán exclusivas para el
proyecto wear. Es muy importante que estas dos estén presentes pues así podremos disponer de
widgets diseñados para wear.
compile 'com.google.android.support:wearable:1.3.0'
compile 'com.google.android.gms:play-services-wearable:8.3.0'
También es importante señala que en ambos archivos gradle deberá estar incluida la librería
correspondiente a play services.
Mobile: compile 'com.google.android.gms:play-services:8.3.0'
Wear: compile 'com.google.android.gms:play-services:8.3.0'
56. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
INSTALAR
LA
APLICACIÓN
DE
WEARABLE
Cuando estés desarrollando tus aplicaciones wear se instalarán directamente en el wearable como
una extensión de tu aplicación móvil. Para correr tu aplicación puedes utilizar el comando:
adb install
O el botón de Play de Android Studio
Cuando tu aplicación esté lista para ser publicada, la aplicación wear vendrá incrustada en la app
mobile. Cuando un usuario instala la aplicación mobile de Google Play, y tiene un conectado
weareable, recibe automáticamente la aplicación weareable,.
Nota: La instalación automática de aplicaciones wear, no funciona si firmas tu aplicación con una
llave debug (debug key), solo funciona con llaves release (release key).
Para instalar la aplicación "Hello World" wear, en Android Studio selecciona el menú que se
muestra en la figura, elige la opción wear y posteriormente oprime el botón de Play. La actividad se
presenta en el weareable, e imprime "¡Hola mundo!"
58. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
CREANDO
NOTIFICACIONES
El uso de notificaciones en Android fue a partir de la versión 3.0 en donde se incluyó la clase
Notificaction.Builder.
En este enlace puedes encontrar todos los métodos asociados:
http://developer.android.com/intl/es/reference/android/app/Notification.Builder.html
NOTIFICACIONES
WEAR
Las notificaciones Android Wear utilizan el API estándar de notificaciones pero se han agregado
características propias para Wear atreves de la clase
NotificationCompat.WearableExtender. Los métodos se muestran en la siguiente tabla:
59. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
Para generar una notificación se deberá crear una instancia de WearableExtender como se
muestra en el siguiente código.
CONSTRUYENDO
NOTIFICACIONES
No existe una gran diferencia en la visualización de notificaciones en Android Mobile y Android
Wear. Probablemente la única diferencia sea la clase.
Se puede utilizar la clase NotificationManagerCompat para levantar una notificación, en ella
se han incluído las librerías de soporte necesarias para wear desde que salieron a la luz.
Puedes descargar el ejemplo del siguiente repositorio:
NotificationCompat.WearableExtender wearFeatures = new
NotificationCompat.WearableExtender();
Notification notification = new NotificationCompat.Builder(this)
.setContentTitle("Mi primera notificación")
https://github.com/anncode1/AndroidWear/tree/master/MiAppWeareable
60. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
public class MainActivity extends Activity {
int NOTIFICATION_ID = 1;
NotificationManagerCompat mNotificationManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mNotificationManager = NotificationManagerCompat.from(this);
Notification notification = new NotificationCompat.Builder(this)
.setSmallIcon(R.mipmap.ic_launcher)
.setContentTitle("Mi Notificación Android Wear")
.setContentText("Mi primera notificación!")
.build();
mNotificationManager.notify(NOTIFICATION_ID, notification);
}
}
61. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
Añadiendo
un
icono
de
aplicación
Las aplicaciones Android Wear pueden tener su propio icono definiéndolo en el archivo
AndroidManifes.xml de ambos módulos (mobile y wear) como se muestra en la figura.
AndroidManifest.xml (mobile)
MainActivity.java (mobile)
63. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
Notificación
con
texto
largo
Si quieres construir una notificación en donde se muestren más líneas de texto, necesitarás definir
un objeto NotificationCompat.BigTextStyle para que tu notificación tenga un estilo
configurado y la habilite para mostrar textos largos.
64. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
Notificación
con
imagen
de
fondo
Al igual que el ejemplo anterior podemos construir una notificación que utilice una imagen de fondo
utilizando la clase NotificacionCompat.BigPictureStyle.
Cuando incluyamos una imagen de fondo es muy importante que la imagen cumpla con las
medidas adecuadas definidas en las métricas de diseño que vimos anteriormente.
La imagen de fondo debe medir al menos 600px.
65. Anahí
Salgado
@anncode
Leonel
Hernández
@profedenegocios
REFERENCIAS
• http://developer.google.com
LIBRO:
“Professional Android Wearables”
David Cuartielles Ruiz and Andreas Göransson
Editorial Wrox Programmer to Programmer
AUTORES
LAE. Leonel Hernández y Brito - @profedenegocios
Ing. Irene Anahí Salgado Díaz de la Vega - @anncode