Fundamentals Bulding Apps for Wereables_29_mar_2016

Embed Size (px)

Citation preview

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    1/63

    1

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    FUNDAMENTALSBUILDING APPS FOR WEARABLES

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    2/63

    2

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    CONTENIDOS:

    Introduccin.................................................................................................................................................................................................3Qu son los Wearables?.........3

    Evolucin........4

    Qu es Android Wear?........5

    Desarrollando para Android Wear..........9

    Visin Android Wear.......11

    Principios de Diseo.......12

    Estructura de las Aplicaciones..............15

    Recursos para Android Wear.........19

    Gestos........21

    Estilos......22

    Creando y corriendo una aplicacin wearable.............................................................................................................................25

    Preeliminares.............................................................................................................................................................................................25

    Actualiza el SDK.......................................................................................................................................................................................25

    Levantando un dispositivo virtual wearable..................................................................................................................................26

    Configuracin de un dispositivo virtual wearable.......................................................................................................................26

    Configuracin de un dispositivo Android Wear...........37

    Crear un proyecto..........43

    Composicin del proyecto Android Wear............49

    Layouts.........52

    Strings.........53

    Gradle........54

    Instalar la aplicacin de wearable..........55

    Creando notificaciones.........................................................................................................................................................................56

    Notificaciones wear........61

    REFERENCIAS............................................................................................................................................................................................63

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    3/63

    3

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    INTRODUCCIN:

    QUSONLOSWEARABLES?Dispositivo ponible, wearable o dispositivo wearable es dentro del sector tecnolgico y ms concretamentede la electrnica de consumo es aquel dispositivo que se lleva sobre, debajo o incluido en la ropa y que estsiempre encendido, no necesita encenderse y apagarse.

    Algunas de sus sorprendentes caractersticas son que permiten la funcionalidad multitarea. Osea que requie-re dejar de hacer otra cosa para ser usado y puede actuar como extensin del cuerpo o mente del usuario.A pesar de que en la actualidad se le conoce a esta categora de productos como dispositivos wearable tam-bin pueden llamarse dispositivos vestibles, llevables o ponibles e incluso complementos inteligentes.

    Hoy en da, existe una amplia gama de dispositivos wearables como: relojes inteligentes o smartwatches,

    pulseras de actividad, gafas inteligentes o ropa inteligente entre otros.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    4/63

    4

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    EVOLUCIN:

    Recordando un poco la historia de los wearables podemos mirar atrsy recordar aqul primer reloj con fecha, diseado y creado para la Reinade Npoles, o el dispositivo oculto en zapatos que usaron Thorp y Shannonpara hacer trampas en las ruletas de los casinos en las dcadas de los 60sy 70s.

    Pero usando el contexto completo de wearable como aquel dispositivo elec-trnico capaz de ser programado por el usuario para realizar acciones com-plejas, el primero lo invent Steve Mann al final de la dcada de los 70s.

    En los ltimos cinco aos, con la irrupcin de la tecnologa de masas conformatos cada vez ms pequeos, es cuando los wearables han comenzado

    a surgir como un elemento de cambio para los consumidores y las empresas

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    5/63

    5

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    QUESANDROIDWEAR?

    Es el sistema operativo para wearables, basado en Android que Google present a la sociedad el 18 de mar-zo de 2014. El sistema en s est pensado para ser utilizado en relojes inteligentes (smartwatches), pulserasinteligentes (smartbands), y cualquier otro wearable que pueda surgir en el futuro.

    Android Wear es una versin de Android 4.4.2 (KitKat) con una in-terfaz totalmente tctil y funcionalidades adaptadas a dispositivoswearables que simplemente nos permitir ver e interactuar con lasnotificaciones de nuestros dispositivos Android y ver informacintil dependiendo del contexto.

    Actualmente el Android Wear Preview soporta relojes con pantallaredonda con una resolucin circular de 320x320 pixeles y relojes

    con pantalla cuadra con una resolucin 280x280 pixeles.

    Todava no han ofrecido las especificaciones tcnicas de los pri-meros dispositivos, pero parecen que tendrn un procesador dedoble ncleo, 512 MB de RAM, 4 GB de memoria interna, Bluetoo-th 4.0 y algunos sensores.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    6/63

    6

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    En la vista principal de Android Wear veremos la hora, un acceso para realizar comandos de voz y nuestralista de notificaciones y tarjetas contextuales con informacin til.

    Con un desplazamiento vertical iremos viendo todas las notificaciones y tarjetas, y con un desplazamientohacia la izquierda veremos ms informacin y acciones de una determinada tarjeta.

    Con un desplazamiento hacia la derecha del todo la eliminaremos una notificacin/tarjeta de la lista.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    7/63

    7

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    Las notificaciones siempre estarn sincronizadas entre nuestro Android y Android Wear, si la descartamosen un dispositivo ser descartada en el otro.

    Adems de las notificaciones de mensajes y llamadas, Google Now nos mostrar sus tarjetas del tiempo,resultados deportivos, vuelos, y una aplicacin deportiva podr mostrarnos las caloras que hemos consumi-do, entre otros ejemplos.

    En muchas de las notificaciones nos ofrecern una serie de acciones para interactuar con ellas, como porejemplo contestar con voz o con mensajes predefinidos a un mensaje, controlar el reproductor de msicade nuestro Android, u obtener indicaciones para llegar a una direccin.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    8/63

    8

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    Para realizar acciones y obtener expresamente informacin ya tenemos que usar sus comandos de voz al pul-sar el icono de la G de Google.

    Al pulsar sobre la G o al decir Ok Google ya podremos pedir solicitar expresamente acciones para crearnotas, poner alarmas, mandar mensajes, obtener indicaciones, reproducir msica, identificar canciones, poneun temporizador y ms. Al desplazar haca arriba esta vista veremos la lista de comandos soportados.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    9/63

    9

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    DESARROLLANDOPARAANDROIDWEAR

    El diseo de aplicaciones para Android Wear es sustancialmente diferente que el diseo de los telfonos otabletas, existen diferentes fortalezas y debilidades, diferentes casos de uso, ergonomas distintas, etc.

    Debes entender la visin general de la experiencia Android Wear en un wearable, para as disear aplicacionesque se ajusten a las necesidades de los usuarios. Si estamos hablando que esto involucra un nuevo factor deforma por lo tanto tambin tendremos una nueva interfaz de usuario.

    ENANDROIDWEARTENDREMOSTRESCASOSESPECFICOSENLOSQUEPODEMOSDESARROLLAR:

    Notificaciones

    (Sugeridas- Contextuales

    y Puenteadas por el mvil)

    En demanda Watch Faces

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    10/63

    10

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    NOTIFICACIONES:Las notificaciones tienen que estar diseadas para mostrarse en tarjetas que estn presentes en un flujovertical y horizontal, cada una mostrndose como pieza til y oportuna. Solo una tarjeta se muestra a la vezy se pueden utilizar imgenes de fondo para proporcionar informacin como ayuda visual adicional.

    Este modelo garantiza que los usuarios no tienen que acceder a muchas aplicaciones diferentes para com-probar sus estados, simplemente echan un vistazo a una breve notificacin.

    ENDEMANDA:Para los casos en donde no se sugiere alguna notificacin los usuarios pueden hablar con Google, usandoel comando de voz OK Google o tocando el cono. Cada comando de voz activa un intent (disparador)especfico, podras hacer coincidir tus aplicaciones a alguno de estos intent para activarlas.

    Muchas aplicaciones podran estar registradas y responder al mismo comando de voz por lo que el usuario

    tendr la posibilidad de elegir cul de ellas lanzar.Adems de los comandos por voz las aplicaciones pueden responder a un toque en el men haciendo quesean lanzadas a pantalla completa.

    WATCHFACES:Estos pueden ser elegidos por el usuario para mostrarse en la pantalla de inicio, los fondos de pantalla pue-den mostrar la hora y pueden cambiarse dejndose presionado prolongadamente.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    11/63

    11

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    VISINANDROIDWEAR

    INICIARAUTOMTICAMENTE:La mayora de la gente est acostumbrada a lanzar aplicaciones haciendo clic eun icono. Android Wear, es diferente. Las aplicaciones porttiles son conscientes decontexto del usuario, como la hora, el lugar, actividad fsica, y as sucesivamente.

    INFORMACINLEGIBLE:Un reloj de pulsera inteligente, est diseado para que pueda ver el tiempo en unfraccin de segundo, y seguir adelante con lo que estaba haciendo. Cuanto menos tiempo necesite para utilizar su software, mayor ser el tiempo que el usuaripuede estar presente en lo que estn haciendo. Android Wear es rpido, precisoe inmediato.

    TODOSOBRECUANDONOTIFICARALGO:Android Wear es como un asistente personal que sabe tus preferencias, y que soldeben ser interrumpidas cuando sea absolutamente necesario, y siempre a la manpara dar una respuesta fcil. Android Wear es til, respetuoso y sensible.

    CEROOLAMENORINTERACCINPOSIBLE:

    La mayora de las entradas deben basarse en toques o comandos por voz, yentradas que requieran movimientos de dedos deben evitarse. Android Wear esgestual, sencillo y rpido.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    12/63

    12

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    PRINCIPIOSDEDISEO

    ALGUNOSPRINCIPIOSPARAELDISEOSONLOSSIGUIENTES:

    Concntrese 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 conversacin. El tiempo requerido para realizar unaaccin debe ser de 5 segundos.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    13/63

    13

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    Diseo con gestos grandes:Cuando el usuario usa su Smartphone, est utilizando una gran superficie de la pantalla, o sea que no re-

    quiere de tanta precisin. Sin embargo, al utilizar un Smart watch la pantalla es mucho ms pequea y porconsiguiente necesita de una precisin mucho mayor.

    Si tienes que reducir la velocidad al caminar o parar una conversacin para ser precisos, debes considerardisear gestos ms grandes.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    14/63

    14

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    tLa mejor experiencia en un dispositivo porttil es cuando el contenido correcto est ah slo cuando el usua-

    rio lo necesita. Haz una lista de todas las situaciones en las que un usuario se podra encontrar para hacer tuaplicacin til.

    Cosas en comn.

    La hora del da.

    Ciertas actividades fsicas.

    Lo ms probable es llegar a visualizar situaciones diferentes, lo cual es bueno, ya que significa que se puededisear una tarjeta para cada una de esas situaciones. Recuerda que el usuario siempre tiene la opcin desilenciar por completo las tarjetas (notificaciones) si siente que no son lo suficientemente relevantes.

    Hacer algo, muy rpido:Si a los usuarios les toma unos segundos interactuar con tu aplicacin ellos la utilizarn muchas veces duran-te el da. Si ests utilizando una tarjeta recuerda que puedes utilizar varias pginas.

    Diseo de la esquina del ojo:Si piensas en disear tu aplicacin a solo un vistazo puede ayudar al usuario a obtener todo el valor de tuaplicacin y rpidamente volver a lo que estaba haciendo.

    No seas un acosador constante:No utilices demasiado la vibracin. Un reloj toca constantemente la piel del usuario. Siendo esto ntimo, sedesea hacer vibrar el reloj lo menos posible que como normalmente lo haces con tu telfono.

    Por ejemplo:Una aplicacin que ofrece a los usuarios el registro de entrada podra aparecesugiriendo otro lugar ms cercano, despus de estar cierta cantidad de tiempoen ese lugar.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    15/63

    15

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    ESTRUCTURADELASAPLICACIONES

    En un Smartphone los usuarios tienen que tocar los conos para abrir las aplicaciones. Android Wear es diferen-te; una aplicacin wearable muestra solo una tarjeta en pantalla solo cuando sucede algo realmente relevante.

    Resumiendo lo anterior podemos decir lo siguiente:

    La interaccin que tienen los usuarios con los telfonos es distinta a la que tienen con Android Wear.

    Se recomienda no utilizar flujos que hagan pensar demasiado al usuario.

    FUNCIONALIDAD.NOTIFICACIONES.

    NOTIFICACIONESCONTEXTUALES:Esto es lo que hace Android Wear mejor: muestra lainformacin de los usuarios y la funcionalidad solo

    cuando lo necesitan.HEAQUCMOFUNCIONA:La aplicacin sabe cundo algo es importante para elusuario. Cuando se produce el evento apropiado, laaplicacin desencadena una notificacin.

    La obtencin de activacin del contexto adecuado es

    una de las cosas ms impactantes que se pueden hacerpara elaborar una gran experiencia de usuario.

    La forma ms sencilla de hacerlo es utilizar plantillas es-

    tndar para las notificaciones de Android. Pero tambinpuedes hacer tu propio diseo desde cero con unaactividad dentro de una tarjeta.

    NOTIFICACIONESPUENTEADAS:Esta es la forma ms sencilla de conseguir en AndroidWear. Se pueden aadir caractersticas de wearables

    como pginas adicionales y respuestas de voz medianteel uso de las nuevas API de notificacin.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    16/63

    16

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    INTERFAZDEUSUARIO.MAPACOMPLETODELAPANTALLA

    2DPICKER:Normalmente estamos acostumbrados a visualizar listas en una sola fila (dimensin), este tipo de listas se lesllama 1D.

    El 2D Picker es un patrn que se utiliza para mostrar opciones de una lista una matriz 2D de opciones, unaforma de presentar opciones categorizadas.

    En una vista de cuadrcula (dos dimensiones) el usuario puede desplazarse libremente en ambas dimensio-nes, como se muestra.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    17/63

    17

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    LANAVEGACINDEBESERVERTICALYLUEGOHORIZONTAL,NOHORIZONTAL-VERTICAL:Algunos consejos para la navegacin 2D:

    Reducir al mnimo el nmero de tarjetas.

    Mostrar la tarjeta ms popular en la parte superior.

    Mantn las tarjetas extremadamente simples.

    LAYOUTSPERSONALIZADOS.NOSOLOUSESTARJETAS,CREATUSPROPIOSLAYOUTS. Hay algunas cosas que no se puede hacer en una tarjeta. En un mapa por ejemplo, surge lanecesidad de deslizarse en muchas direcciones, si estamos en un juego, probablemente suce-da algo similar. En esos casos, podra ser una buena idea disear pantalla completa.

    1.Se muestra una notificacin

    contextual en tarjeta.

    2.El usuario hace tap en la

    tarjeta.

    3.Se abre un activity enpantalla completa parauna micro interaccin.

    4.Se quita la actividad y elusuario regresa al flujo.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    18/63

    18

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    CUNDOHACERUNAAPLICACINDEPANTALLACOMPLETA?Se recomienda hacer una aplicacin de pantalla completa solo cuando el trabajo deseado nose puede realizar en una tarjeta, en esos casos se puede disear un activity a full-screen paraposteriormente salir rpidamente. Esto har sentir al usuario que tu aplicacin funciona comouna parte integrada del sistema. Android Wear utiliza una pantalla completa para sus propiasaplicaciones como la de comandos por voz y cronmetro.

    HAZQUETUSAPLICACIONESDEPANTALLASEANCOMPLETAMENTEDISTINTASDebes procurar que tu diseo de pantalla completa no luzca como una tarjeta ya que podraconfundir a los usuarios, un diseo 2D te puede ayudar mucho para estos casos.

    SALIDASAUTOMTICASMuchos dispositivos no tienen botn de home o back, por lo que salir de una aplicacin aveces ser ms difcil, por esta razn debes procurar las salidas automticas, por ejemplo:

    Un mapa que le pida a un usuario colocar un pin, y al ponerlo la aplicacin salga de la aplicacin.

    Un juego corto que al terminar salga de la aplicacin automticamente.

    Una aplicacin de dibujo que se termine al detectar 5 segundos de inactividad.

    SALIDASMANUALESAn con los puntos de salida automticos pueden existir momentos en los que el usuariodesea salir inmediatamente de la aplicacin.

    En todas las aplicaciones se debe tratar el long-press dando a los usuarios la oportunidad de

    salir, para esto puedes utilizar DismissOverlayView.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    19/63

    19

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    RECURSOSPARAANDROIDWEAR

    1: KITDEHERRAMIENTASPARAINTERFAZDEUSUARIO:

    2: PATRONESDEFLUJOMUESTRA:

    El kit de herramientas contiene las especificaciones y las medicionede todos los componentes de interfaz de usuario de Android Wearprimarios detallados.

    Ejemplos de cmo se encadenan los componentes en los patronesde flujo en la interfaz de usuario de Android Wear, desde simples

    notificaciones hasta las interacciones complejas que implican acti-vidades de pantalla completa.

    Disponible en formatos PDF e Illustrator.

    http://developer.android.com/downloads/design/Android_Wear_Toolkit_20140722.ai

    http://developer.android.com/downloads/design/Android_Wear_Toolkit_20140722.pdf

    Disponible en formatos PDF e Illustrator.

    http://developer.android.com/downloads/design/Android_Wear_Patterns_20140722.ai

    http://developer.android.com/downloads/design/Android_Wear_Patterns_20140722.pdf

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    20/63

    20

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    3: DISEOMUESTRADEMAQUETACINDEUNAAPLICACIN:

    4: KITDEHERRAMIENTASDEINTERFAZDEUSUARIOPARAWATCHFACES:

    Tarjetas y elementos de interfaz de usuario para algunas aplicacionde ejemplo en formato PSD completamente editable.

    Especificaciones y medidas detalladas para fondos, tarjetas de no-tificacin, e indicadores del sistema.

    Disponible en formato PSD.

    http://developer.android.com/downloads/design/Android_Wear_Sample_Assets.zip

    Disponible en formato PDF.

    http://developer.android.com/downloads/design/AndroidWear_DesignSpec_11.13.pdf

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    21/63

    21

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    GESTOS

    Solamente los taps estn disponibles. Esta restriccin es importante para mantener las interacciones del siste-ma claras y coherentes, y para hacer que las interacciones en el watch-face lo ms simple posible.

    Como regla general, la interaccin watch-face debe ser sencilla con el usuario de completar su accin desea-da dentro de uno o dos toques.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    22/63

    22

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    ESTILOS

    Existe una serie de consideraciones de diseo a tener en cuenta que son particulares de Android Wear, acontinuacin se muestran algunas:

    TAMAODEPANTALLA:Se consciente de los diferentes tamaos de los dispositivos y formas. Los disposi-tivos porttiles son una forma de expresin de sus propietarios, y de la moda.La mayor parte de las complejidades de apoyo a estos dispositivos diferentes esatendiendo a nivel de sistema, pero hay que tener en cuenta diferentes tipos depantalla en el diseo de aplicaciones de pantalla completas.

    Utiliza el emulador de Android Wear para probar los dispositivos tanto en cua-drados, como redondos, y tenga en cuenta que WatchViewStubest disponiblepara las actividades para detectar si se est utilizando un dispositivo cuadrado oredondo.

    LOSRECURSOSESPECFICOSREQUERIDOSUn conjunto bsico de recursos estndar, puede ser proporcionado enfuncin del diseo de la tarjeta:

    Icono de la aplicacin.

    Imagen de fondo o imgenes.

    Iconos de accin.

    Animaciones de confirmacin de la accin.

    Por supuesto, el diseo especfico puede requerir otros activos.

    Las imgenes de fondo deben ser proporcionados en formato landscapeal menos 600px de ancho para las notificaciones que incluyen pginas detarjetas, ya que el sistema aade automticamente un efecto parallax.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    23/63

    23

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    LALEGIBILIDADDELATARJETA:Pruebe el diseo de la tarjeta para asegurar que la informacin til es visualizada

    en la pantalla de inicio. El mensaje principal de la tarjeta debe ser legible y fcil-mente de ser visualizada la informacin, sobre todo para las notificacionesde contexto.

    BAJADENSIDADDEINFORMACIN:Las tarjetas deben ser diseadas para ser vistas en una fraccin de segundo, aligual que la lectura de la hora en un reloj tradicional. En la mayora de los casos,el par icono y valor, o un ttulo y subttulo debera ser suficiente para transmitirun mensaje significativo.

    Tenga en cuenta que la foto de fondo tambin se debe utilizar para transmitirinformacin; fondos que cambian para reflejar y apoyar el mensaje principalde la tarjeta.

    SEPARALAINFORMACINENTROZOS:

    En los casos en que sea absolutamente necesario obtener informacin adicionalno disees una tarjeta en el punto en que se vea afectada la legibilidad de lainformacin, en su lugar aade una o varias pginas adicionales a la derecha dela tarjeta principal.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    24/63

    24

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    ANIMACIONESPARACONFIRMACIONES:Si tu aplicacin permite al usuario realizar una accin, es necesario proporcionar

    retroalimentacin positiva. Mostrar una animacin de confirmacin genrica ocrear una propia.

    Una animacin de confirmacin es una oportunidad para expresar el carcter detu aplicacin e inserta un momento agradable para tu usuario.

    Crea animaciones cortas (menos de 1000 ms) y simples. La animacin del iconode confirmacin es una forma efectiva para transmitir al usuario un nuevo estadodespus de haber completado una accin.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    25/63

    25

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    CREANDOYCORRIENDOUNAAPLICACINWEAREABLE

    Las aplicaciones de Wearable se ejecutan directamente en el dispositivo porttil, que le daacceso al hardware de bajo nivel, tales como sensores, actividades, servicios y ms.

    Una aplicacin wearable necesita de la aplicacin principal si se quiere publicar en la tiendade Google Play. Esto debido a que los wearables no son compatibles con la tienda de GooglePlay.

    PRELIMINARESACTUALIZAELSDK:Antes de empezar a crear aplicaciones para weareable, debes:

    Tener lista la actualizacin de sus herramientas de SDK a la versin 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 ms alto.

    La versin actualizada plataforma ofrece nuevas APIs para aplicaciones weareable.

    Verifica que tengas instalada una imagen de Android Wear, ya sea ARM EABI o Intel en tuSDK Manager.

    Recomendamos que pruebes en el hardware real para que puedas evaluar mejor la experiencdel usuario. Sin embargo, el emulador te permite probar diferentes tipos de formas de pantallalo cual es sumamente til.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    26/63

    26

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    LEVANTANDOUNDISPOSITIVOVIRTUALWEAREABLE

    CONFIGURARUNANDROIDWEARDEDISPOSITIVOSVIRTUALESPara configurar un dispositivo virtual Android Wear:

    Haga clic en Herramientas> Administrador de Android> AVD.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    27/63

    27

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    Haga clic en Crear dispositivo virtual

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    28/63

    28

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    Selecciona el tipo de dispositivo

    Seleccionar Android Wear cuadrada o redondaHaga clic en Siguiente.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    29/63

    29

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    Seleccione un Sistema Operativo (por ejemplo, KitKat Wear).

    Haga clic en Siguiente.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    30/63

    30

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    (Opcional) Cambie sus preferencias para el dispositivo virtual.

    Haga clic en Finalizar.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    31/63

    31

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    Iniciar el emulador.

    Seleccione el dispositivo virtual que acaba de crear.Haga clic en el botn Play.

    Espere hasta que el emulador se inicie y muestre la pantalla principal de Android Wear.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    32/63

    32

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    Enlazar el telfono con el emulador:

    1.En el telfono, instalar la aplicacin Android Wear de Google Play.

    Link de descarga:

    https://play.google.com/store/apps/details?id=com.google.android.wearable.app&hl=es_419

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    33/63

    33

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    2.Conecta el telfono a la computadora va USB.

    3.Verifica en qu ubicacin se encuentra el path de tu Android sdk puedes verlo abriendo tuSDK Manager.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    34/63

    34

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    4.Una vez que localizaste el path accede desde la terminal del IDE a ella, con el comando cd

    Dirgete a la carpeta platform-tools.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    35/63

    35

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    5.Corre el siguiente comando para transmitir el puerto de comunicacin entre el AVD al tel-fono conectado (debes hacerlo cada vez que el telfono est conectado):

    6.Iniciar la aplicacin Android Wear en tu telfono y conectar con el emulador.

    7.Pulse en el men de la esquina superior derecha de la aplicacin Android Wear y seleccio-ne Probar notificaciones del reloj o algo similar.

    adb -d forward tcp:5601 tcp:5601

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    36/63

    36

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    8.Las tarjetas que seleccione aparecen como notificaciones en la pantalla principal delemulador.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    37/63

    37

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    CONFIGURACINDEUNDISPOSITIVOANDROIDWEARPara configurar un dispositivo Android Wear:

    1.Instalar la aplicacin Android Wear, disponible en Google Play, en la telfono.

    Link de descarga:

    https://play.google.com/store/apps/details?id=com.google.android.wearable.app&hl=es_419

    Siga las instrucciones de la aplicacin para vincular el telfono con su weareable. Esto le permite probar las notificaciones sincronizadas del telfono, si se les est construyendo.

    Deja la aplicacin Android Wear abierta en tu telfono.

    2.Habilitar la depuracin ADB en el dispositivo Android Wear.

    Vaya a Configuracin> Acerca de.Toque Nmero de Compilacin siete veces.

    Deslzate hacia la derecha para volver al men de configuracin.

    Ir a Opciones de desarrollador en la parte inferior de la pantalla.

    Toque ADB depuracin para permitir adb.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    38/63

    38

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    3.Conectar el wearable, a su equipo a travs de USB, por lo que puede instalar aplicacionesdirectamente a ella a medida que desarrolla. Aparece un mensaje en tanto el wearable, y la

    aplicacin Android Wear le pide que permita la depuracin.

    4.En la aplicacin Android Wear, compruebe Permitir siempre desde este equipo y pulse OK.

    El wearable, deber aparecer cuando se ejecute el comando adb devices.

    Si nopuedeconectarsuwearable, a la mquina a travs de USB, se puede intentar la conexinatravsdeBluetooth.

    CONEXINATRAVSDEBLUETOOTHConfiguracin del dispositivo:

    1.Habilitar la depuracin USB en el telfono:Abre la aplicacin Ajustes y desplcese hasta la parte inferior.

    Si no tiene una configuracin de Opciones de desarrollo, toque Acerca del telfono (o

    Acerca de la tableta), vaya a la parte inferior, y pulse el nmero de compilacin 7 veces.

    Volver atrs y pulse Opciones de desarrollo.

    Habilitar depuracin de USB.

    2.Habilitada la depuracin 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 ningn elemento Opciones de desarrollo,toque Acerca de, y luego toque el nmero de compilacin 7 veces.

    4. Pulse el elemento Opciones de desarrollo.

    5. Habilitar depuracin a travs de Bluetooth.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    39/63

    39

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    CONFIGURANDOUNASESINDEDEBUGGING:

    1.Abra la aplicacin Android Wear en el telfono.2.En la parte superior derecha seleccione Configuracin.

    3.Habilitar la depuracin a travs de Bluetooth.

    Deberas ver lo siguiente:

    4.Conecta el telfono a la computadora por USB.

    Host:disconnectedTarget:connected

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    40/63

    40

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    5.Verifica en qu ubicacin se encuentra el path de tu Android sdk puedes verlo abriendo tuSDK Manager.

    6.Una vez que localizaste el path accede desde la terminal del IDE a ella, con el comando cd

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    41/63

    41

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    Una vez ah dirgete a la carpeta platform-tools.

    7.Corre el siguiente comando para establecer un puente de conexin:

    Si estas en sistemaMacOSoLinux, debes anteponer ./ en el comando adb de la siguienteforma:

    Siserechazalaconexin, verifica todos los pasos anteriores y en vez de colocar localhostcoloca la direccin ip: 127.0.0.1

    adb forward tcp:4444localabstract:/adb-hub adb connect localhost:4444

    ./adb forward tcp:4444localabstract:/adb-hub ./adb connect localhost:4444

    adb forward tcp:4444localabstract:/adb-hub adb connect 127.0.0.1:4444

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    42/63

    42

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    Una vez conectado, te saldr una notificacin en el dispositivo Watch, y en la aplicacinAndroid Wear, se debe ver los siguiente:

    Corre tu proyecto con normalidad y ahora debe aparecer tu dispositivo Watch disponible paracorrer.

    Host:connectedTarget:connected

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    43/63

    43

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    CREARUNPROYECTOPara comenzar el desarrollo, crear un proyecto de aplicacin que contiene los mdulos deaplicaciones porttiles y de mano. En Android Studio, haga clic en Archivo> Nuevo proyecto ysiga las instrucciones del asistente de proyectos, como se describe en Creacin de un proyec-to. A medida que siga el asistente, introduzca la siguiente informacin:

    1.En la ventana de su proyecto Configurar, introduzca un nombre para la aplicacin y el nombre del paquete.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    44/63

    44

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    2.En la ventana de los factores de forma:

    Seleccionar telfono y la tableta y seleccione API 9: Android 2.3 (Gingerbread) bajo SDKmnimo.Seleccione Wear y seleccione API 20: Android 4.4 (KitKat desgaste) bajo SDK mnimo

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    45/63

    45

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    3.En la primera ventana Aadir una actividad en blanco.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    46/63

    46

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    4.En la segunda ventana Aadir una actividad en blanco para Wear.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    47/63

    47

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    48/63

    48

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    Cuando se complete el asistente, Android Studio crea un nuevo proyecto con dos mdulos,mobile y wear.

    Ahora tienes un proyecto para la telfono y Android wear para cualquiera de estos crear

    actividades,serviciosylayoutspersonalizados.La aplicacin para telfono hace la mayor parte del trabajo, tales como comunicaciones de redprocesamiento intensivo o tareas que requieren largos perodos de interaccin con el usuario.

    Cuando la aplicacin completa estas operaciones, deber notificar a wearable de los resultado

    a travs de notificaciones o mediante la de los datos.

    Nota:El mdulo de wear tambin contiene una actividad de Hello World que utiliza un WatchViewStub.Esta clase infla un diseo en funcin 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 paraweareables proporciona.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    49/63

    49

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    COMPOSICINDELPROYECTOANDROIDWEAR.Un proyecto Android Wear luce muy similar an proyecto para mobile.

    ANDROIDMANIFEST.XMLExiste un archivo AndroidManifest.xml el cual tendr toda la configuracin de la aplicacinwear, la declaracin de activities, servicios, permisos etc. adems de una feature que se obser-va en la imagen, el cual significa que esta aplicacin ser utilizada para un hardware de tipowatch.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    50/63

    50

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    ARCHIVOS.JAVAObservaremos que tambin tenemos una carpeta java, en la cual se colocarn todas nuestrasclases. En particular el IDE nos crea el archivo MainActivity.java este archivo contiene todo lonecesario para tener un completo control del layout activity_mail.xml, adems observamos qucontiene cdigo adicional el cual tendr todo el manejo de los views para un Watch.

    Observamos estas lneas de cdigo:

    La clase WatchViewStubser la que controle todos los views contenidos en el layout,el mtodo setOnLayoutInflatedListener, estar escuchando cuando la vista sea mostradaen pantalla (inflada), a partir de ese momento se puede proceder a manipular los views.

    La manipulacin de los views declarados en el layout, debe darse dentro del mtodoonLayoutInflated, como se muestra en la figura anterior.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    51/63

    51

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    IMGENESDRAWABLE

    LAYOUTSLAYOUT

    ICONOSMIPMAP

    STRINGSVALUES

    ARCHIVOSDERECURSOS-RES

    Dentro de un proyecto wear podemos tener recursos que estn accesibles solo parala aplicacin wearable como:

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    52/63

    52

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    El ltimo layout que alcanzamos a ver activity_main.xml se encargar de hacer la coordinacin sobre qulayout mostrar oportunamente dependiendo del dispositivo en donde abierta la aplicacin en ese momento.

    LAYOUTS

    En Android Wear tendremos que disear layouts siempre tomando en cuenta los dos estilosde SmartWatch que tenemos.

    Para esto necesitaremos crear dos layouts, uno para cada estilo de dispositivo.

    rect_activity_layout.xml

    round_activity_layout.xml

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    53/63

    53

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    STRINGS

    Aqu tambin tendremos disponible un archivo strings.xml para concentrar todos los textosde la aplicacin wear.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    54/63

    54

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    GRADLECuando creamos una aplicacin Android Wear tendremos disponible dos archivos de confi-

    guracin gradle, uno para mobile y otro para wear.

    En el archivo gradlemobileser necesario que est presente la lnea wearApp projec-t(:wear) en la seccin de dependencias, pues est har que la aplicacin wear sea unaextensin de mobile y que dependa de este, sin esta lnea la aplicacin wear sera invisibley todo lo que est contenido en el proyecto no funcionara.

    El archivo gradlewearcontendr todas las dependencias y libreras y sern exclusivas parael proyecto wear. Es muy importante que estas dos estn presentes pues as podremosdisponer de widgets diseados para wear.

    compile com.google.android.support:wearable:1.3.0compile com.google.android.gms:play-services-wearable:8.3.0Tambin es importante seala que en ambos archivos gradle deber estar incluida la librera

    correspondiente a play services.Mobile:compilecom.google.android.gms:play-services:8.3.0Wear:compilecom.google.android.gms:play-services:8.3.0

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    55/63

    55

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    INSTALARLAAPLICACINDEWEARABLECuando ests desarrollando tus aplicaciones wear se instalarn directamente en el wearable

    como una extensin de tu aplicacin mvil.Para correr tu aplicacin puedes utilizar el comando:

    Cuando tu aplicacin est lista para ser publicada, la aplicacin wear vendr incrustada en laapp mobile. Cuando un usuario instala la aplicacin mobile de Google Play, y tiene un conec-tado weareable, recibe automticamente la aplicacin weareable,.

    Para instalar la aplicacin Hello World wear, en Android Studio selecciona el men que semuestra en la figura, elige la opcin wear y posteriormente oprime el botn de Play. La acti-vidad se presenta en el weareable, e imprime Hola mundo!

    O el botn de Playde Android Studio

    adb install

    Nota:La instalacin automtica de aplicaciones wear, no funciona si firmas tu aplicacin con una llave debug(debug key), solo funciona con llaves release (release key).

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    56/63

    56

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    CREANDONOTIFICACIONESEl uso de notificaciones en Android fue a partir de la versin 3.0 en donde se incluy la clase

    Notificaction.Builder.En este enlace puedes encontrar todos los mtodos asociados:

    http://developer.android.com/intl/es/reference/android/app/Notification.Builder.html

    NOTIFICACIONESWEARLas notificaciones Android Wear utilizan el API estndar de notificaciones pero se han agrega-do caractersticas propias para Wear atreves de la clase NotificationCompat.WearableExtenderLos mtodos se muestran en la siguiente tabla:

    Para generar una notificacin se deber crear una instancia de WearableExtender como semuestra en el siguiente cdigo.

    NotificationCompat.WearableExtender wearFeatures = newNotificationCompat.WearableExtender();

    Notification notification = new NotificationCompat.Builder(this)

    .setContentTitle(Mi primera notificacin).setContentText(Mi Notificacin Android Wear!)

    .extend(wearFeatures)

    .build();

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    57/63

    57

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    CONSTRUYENDONOTIFICACIONESNo existe una gran diferencia en la visualizacin de notificaciones en Android Mobile y An-

    droid Wear. Probablemente la nica diferencia sea la clase.Se puede utilizar la clase NotificationManagerCompat para levantar una notificacin, en ella sehan incluido las libreras de soporte necesarias para wear desde que salieron a la luz.

    Puedes descargar el ejemplo del siguiente repositorio:

    http://github.com/anncode1/AndroidWear/tree/master/MiAppWeareable

    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 Notificacin Android Wear) .setContentText(Mi primera notificacin!) .build();

    mNotificationManager.notify(NOTIFICATION_ID, notification);

    }

    }

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    58/63

    58

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    59/63

    59

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    AADIENDOUNICONODEAPLICACIN.Las aplicaciones Android Wear pueden tener su propio icono definindolo en el archivo An-

    droidManifes.xml de ambos mdulos (mobile y wear) como se muestra en la figura.

    AndroidManifest.xml(mobile)

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    60/63

    60

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    MainActivity.java(mobile)

    AndroidManifest.xml(wear)

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    61/63

    61

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    NOTIFICACIONESWEAR:

    NOTIFICACINCONTEXTOLARGO.Si quieres construir una notificacin en donde se muestren ms lneas de texto, necesitarsdefinir un objeto NotificationCompat.BigTextStyle para que tu notificacin tenga un estilo configurado y la habilite para mostrar textos largos.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    62/63

    62

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    NOTIFICACINCONIMAGENDEFONDO.Al igual que el ejemplo anterior podemos construir una notificacin 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 lasmedidas adecuadas definidas en las mtricas de diseo que vimos anteriormente.

    La imagen de fondo debe medir al menos 600px.

  • 7/26/2019 Fundamentals Bulding Apps for Wereables_29_mar_2016

    63/63

    FUNDAMENTALS BUILDING APPS FOR WEARABLES

    Professional Android WearablesAutor: David Cuartielles Ruiz and Andreas GranssonEditorial Wrox Programmer to Programmer

    http://developer.google.com

    CIBERGRAFA

    BIBLIOGRAFA: