Menu Animado para Wear Developer

5
Menú Animado Wear (Moto 360) El siguiente tutorial nos explica cómo crear un menú animado en una aplicación Wear. Este tutorial ha sido probado en un Moto360 y desarrollado en AndroidStudio bajo sistema operativo Mac. Este menú ha sido adopatdo del proyecto https://github.com/florent37/WearMenu Para la depuración de la aplicación, ya se ha configurado previamente el ADB y su depuración vía bluetooth. Lo primero es crear nuestra app wear, para esto le asignamos un nombre y un dominio. Seguido a esto, definimos que nuestro proyecto será sólo wear y dejamos al API que tiene por defecto, el 21. Luego seleccionamos el tipo de activity, en este caso como vamos a desarrollar una app, seleccionamos “Always On Wear Activity”. Seguido a esto, definimos el nombre y el layout y finalmente finalizamos para tener nuestro espacio de trabajo.

Transcript of Menu Animado para Wear Developer

Page 1: Menu Animado para Wear Developer

Menú Animado Wear (Moto 360)

El siguiente tutorial nos explica cómo crear un menú animado en una aplicación Wear. Este tutorial ha sido probado en un Moto360 y desarrollado en AndroidStudio bajo sistema operativo Mac. Este menú ha sido adopatdo del proyecto https://github.com/florent37/WearMenu Para la depuración de la aplicación, ya se ha configurado previamente el ADB y su depuración vía bluetooth. Lo primero es crear nuestra app wear, para esto le asignamos un nombre y un dominio. Seguido a esto, definimos que nuestro proyecto será sólo wear y dejamos al API que tiene por defecto, el 21.

Luego seleccionamos el tipo de activity, en este caso como vamos a desarrollar una app, seleccionamos “Always On Wear Activity”. Seguido a esto, definimos el nombre y el layout y finalmente finalizamos para tener nuestro espacio de trabajo.

Page 2: Menu Animado para Wear Developer
Page 3: Menu Animado para Wear Developer

Como vamos a implementar una librería externa, la adicionamos en el archivo build.gradle compile 'com.github.florent37:wearmenu:1.0.0@aar' Luego compilamos y ya tenemos lista nuestra librería para implementarla dentro de nuestro proyecto.

Ahora procedemos a desarrollar el modelo de nuestro menú. Para eso creamos la clase Element, donde se definirá cada item de la lista del menú, en nuestro caso tendrá cuatro atributos con sus respectivos GET y SET.

Page 4: Menu Animado para Wear Developer

Ya teniendo nuestro holder,vamos a crear el adaptador. Este componente que extiende de FragmentGridPagerAdapter nos permitirá navegar entre los fragmentos del menú.

Por último, vamos a nuestro ActivityMain y configuramos el menú. Para esto definimos los elementos, sus títulos y los íconos final WearMenu wearMenu = (WearMenu) findViewById(R.id.wear_menu); wearMenu.setMenuElements( new String[] "Título 1", "Título 2", "Título 3", "Título 4" , new Drawable[] getResources().getDrawable(R.drawable.ic_car,null), getResources().getDrawable(R.drawable.ic_notif,null), getResources().getDrawable(R.drawable.ic_picture,null), getResources().getDrawable(R.drawable.ic_speak,null) );

Page 5: Menu Animado para Wear Developer

Y por último definimos y adicionamos los elementos y sus atributos, instanciando el holder que creamos previamente. Ya sólo nos queda ejecutar la aplicación y correrla en nuestro dispositivo wear. Toda la documentación y código fuente lo puedes encontrar en: https://github.com/joseberna/MoscoDevWearMenuDemo Jose Fernando Berna Molano @josefbernam