Como crear un watchface Android Wear  parte 1

Propósito de como crear un watchface Android Wear

Hola, hoy os traigo un tutorial para crear un watchface Android Wear (o carátula de reloj), la idea de este tutorial surge tras ver que hay muy poca información en español sobre todo lo relacionado con los watchfaces y su desarrollo y considero que es un buen punto de partida para comenzar este blog. El propósito es acercaros al mundillo de Android Studio y el mundo de Android Wear, aunque el tutorial va dirigido a programadores, intentaré hacerlo lo más asequible que pueda y que sin tener mucha idea puedas conseguir crear un watchface Android Wear personalizado a tu gusto. Sin más, vamos a empezar con el tutorial, que yo soy un hombre al que le gusta ir al grano sin extenderme (al menos lo intento), espero que os guste 🙂 .

Puedes encontrar el código fuente del watchface completo en: GitHub

Para saber más sobre nosotros puedes pulsar  Aquí.

 

1 Pasos previos

Antes de empezar a programar y crear un watchface Android Wear necesitaremos instalar Android Studio, ya que este será el entorno de desarrollo para este tutorial y además tener instalado el SDK de Android, a parte de Java, yo en este caso uso Windows 10 como sistema operativo y con este trabajaremos. A continuación os dejo los enlaces:

-Podréis aprender Java gracias a este Blog lleno de tutoriales sobre java Guru99.es

-Podréis descargar Android Studio desde el siguiente enlace: Android Studio + SDK

-Podréis descargar Java desde el siguiente enlace: Java Development Kit (JDK) 7

Tras instalarlos, primero java y luego el kit Android Studio + SDK, poner en las variables de entorno el JAVA_HOME (en este enlace tenéis como hacerlo: configuración java), podremos crear nuestro primer proyecto.

De momento todo fácil, no?, bueno vamos a empezar a complicarlo un poco más.

 

2 Configuración Android Studio

Bueno ha llegado la hora de crear nuestro primer proyecto watchface, así que vamos a empezar, vamos a abrir Android Studio y nos aparecerá una pantalla de bienvenida como esta:

Tutorial watchface android wear proyecto nuevo en android studio

Proyecto nuevo en android studio

Tan sencillo como picar en siguiente para llegar a la siguiente pantalla:

pantalla de configuración estandar o personalizada

Configuración estándar o personalizada de android studio

En mi caso voy a personalizar la instalación ya que nunca considero la opción de dejar que las cosas se instalen / configuren por defecto, así me evito posteriores ajustes o bien si es una instalación de software evito que me instalen cosas que no quiero (que es lo que suelen hacer últimamente los softwares “gratuitos”, ¿a quien no se le ha instalado una barra en el navegador que luego cuesta quitar la vida y media? casi hay que llamar a un hacker de nivel 80 para que la quite por completo del sistema jejeje. Sin enrollarnos más, yo selecciono personalizar la instalación y pico en next para llegar a la siguiente pantalla:

pantalla de selección de tema android studio

selección de tema de android studio

En esta pantalla seleccionaremos el tema de Android Studio, simplemente podéis elegir el que más os guste, yo elijo el tema drácula ya que por experiencia los temas claros me dejan los ojos muy cansados tras horas y horas delante del ordenador, además si eres afortunado de tener una pantalla OLED consumirá menos energía cuanto más oscuro sea lo que hay que mostrar.

Picamos en siguiente y accedemos a la siguiente pantalla:

selección de la API

selección de la API con la que queremos trabajar

Aquí seleccionaremos tanto con la API de Android con la que vamos a trabajar y la ubicación donde se instaló el SDK de Android, debiera venir todo preseleccionado por lo que es tan fácil como picar en siguiente para llegar al resumen de la configuración:

resumen de la configuración

resumen de la configuración

Bien, con esto ya hemos configurado Android Studio para trabajar con un proyecto nuevo, ahora vamos a crear el proyecto, así que picamos en finish, con ello creará un ADV o dispositivo virtual (si es que lo seleccionamos en la pantalla donde elegimos el lugar del SDK) y descargará la API del nivel seleccionado si es que es necesario, en mi caso ya lo tenía descargado por lo que me creó el ADV solo, ahora alguien me dirá, ¿pero para que un ADV Android como el que crea? pues por que aunque no sea necesario para crear un watchface Android Wear, viene bien si quieres tener una app que controle la carátula, como por ej. para cambiar el color de fondo, información a mostrar o simplemente  para explicar como funciona al usuario final. Una vez finalizado solo hay que pulsar en finish de nuevo y con esto hemos acabado esta parte de configurar Android Studio para cualquier proyecto nuevo.

3 Crear el proyecto base

Veo que has llegado hasta aquí, ánimo que ya estamos a punto de terminar la parte 1 de este tutorial para crear un watchface Android Wear. Una vez que hemos configurado todo nos aparecerá esta pantalla:

Pantalla inicio Android Studio

Pantalla de inicio de Android Studio

Desde esta pantalla podemos abrir un proyecto nuevo, abrir uno existente, bajarnos uno de un VCS o repositorio de software (en castellano de a pie: como un dropbox donde guardas los archivos de tus proyectos y así poder tener una copia de seguridad, compartir el proyecto, trabajar con más gente, etc), importar un proyecto desde Eclipse, bueno y alguna cosa más pero que veremos otro día.

Para empezar con nuestro proyecto picamos en la primera opción “Start a new Android…” y nos llevará a la configuración del proyecto como sigue:

Pantalla nombrar proyecto nuevo

Pantalla nombrar proyecto nuevo

En esta pantalla rellenaremos el “Application name” o nombre del proyecto, el “Company Domain” o el dominio de tu empresa (si es que tienes empresa, si no tu dominio simplemente, si no dispones de el ponle un nombre parecido al que tengo puesto en la imagen de ejemplo) y podemos ver un campo que se autorrellena cuando escribimos tanto el nombre de la app como el nombre del dominio, este se llama “Package name” o nombre del paquete y será el identificador de la app en el Play Store además de ser el paquete (o directorio) general de la app, y por último abajo seleccionaremos la ubicación del proyecto, una vez rellenos todos los campos picamos en next y llegamos a la siguiente pantalla:

Selección de los SDK del proyecto

Selección de los SDK del proyecto

En esta pantalla se seleccionará los SDK necesarios para el proyecto, en este caso como vamos a tener una app y un watchface seleccionamos los dos SDK, tanto el de wear como el de teléfono, no, aquí no me enrollo más, vamos al lío y le picamos a siguiente tras seleccionarlos.

Selección de una actividad por defecto

Selección de una actividad por defecto

En esta pantalla seleccionaremos si queremos que Android Studio nos cree una Activity en blanco o bien de algún tipo de las que se ven en la imagen, aquí seleccionamos una “Blank Activity” y picamos en siguiente:

Detalles de la actividad

Detalles de la actividad

Vamos a explicar un poco los campos que vemos, “Activity Name” es el nombre de nuestra actividad principal, me gusta dejar el nombre de MainActivity (una de esas cosas que si hago por defecto jejeje), el “Layout Name” va a ser el nombre de la vista (donde insertaremos la parte visual de la app) relacionada con el Activity Main del campo anterior. El campo “Title” será el texto que se visualizará en la barra de título en la app. Por último nos encontramos con “Menu Resource Name” que será el nombre que le daremos al xml que generará Android Studio por ti para hacer el menú en la parte superior derecha de la vista o layout.

Este asistente también os saldrá si pulsáis en botón derecho en el árbol de directos y en el menú buscáis: new–>activity–>blank activity o cualquier otro.

Ahora yo lo voy a dejar así por el momento así que le picamos en Next para llegar a la siguiente pantalla del proceso:

Selección de Activity en Wear

Selección de Activity en Wear

En esta podríamos hacerlo fácil, pero no, vamos a seleccionar Add No Activity para así explicaros después como se hace y que lo entendáis, si os vais por el camino fácil es posible que luego no entendáis el código, o bien si eres un hacha puedes ir por la vía rápida y picar en Watch Face y así te encontrarás medio camino hecho. Picamos en finish y ya con esto tendríamos listo nuestro proyecto cuando termine de compilar Android Studio:

Vista principal del proyecto

Vista principal del proyecto

 

Bueno y hasta aquí hemos llegado en esta primera parte del tutorial de como crear un watchface para Android Wear, en el próximo post os introduciré por el maravilloso mundo del watchface y así luego vosotros podréis crearos el vuestro como más os guste.

Antes de despedirme me gustaría recordaros un par de cosillas, por un lado que tenéis a disposición el proyecto completo en GitHub para los que se atrevan con todo, esta bastante comentado así que para un programador que sepa un poco de Android y Java no tendrá problemas. Por otro lado pediros que si os ha sido útil la información la compartáis por que puede que alguien como vosotros este buscándola.

Un saludo SamSofit@s y hasta el próximo post!

Leave a Reply

Tu dirección de correo electrónico no será publicada.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>