contacto[arroba]digitallearning.es

Desarrollo App ejemplo en Android Wear: cuenta de usuario

Post Series: Plataformas Android (III)

Vamos a detallar los elementos y el código de la aplicación sobre Android Wear que ya presentamos en un video anterior de esta serie.  Como explicamos, esta App nos sirve para mostrar cómo utilizar el sistema de tarjetas en un smartwatch (adaptadas tanto a un diseño redondo como cuadrado), de forma que el usuario pueda navegar entre pantallas para configurar una cuenta de usuario y en el que se le mostrará una ventana de confirmación al final del proceso.

Para realizar dicha tarea, en primer lugar se deberán enumerar los elementos necesarios, tanto para la realización del proyecto principal, como para el funcionamiento de las diferentes vistas que intervienen en la aplicación:

pntalla App en Smartwatch redondo con Perfil usuario

 

Pantalla en smartwatch cuadro de confirmación

Dos imágenes de la App. En el video del proyecto puedes ver un demo de la misma

Proyecto en Android Studio denominado “CuentaUsuario”, formado por las siguientes clases y layouts (módulo “wear”):

  • Clase SplashScreen, que herede de la clase base Activity, encargada de lanzar una pantalla de presentación al iniciar la aplicación.
  • Clase CuentaUsuario, que herede de la clase base Activity, cuya tarea principal será la de seleccionar la cuenta de usuario a configurar.
  • Clase PerfilUsuario, que herede de la clase base Activity, encargada de mostrar los perfiles disponibles para la configuración de la cuenta de usuario seleccionada.
  • Clase PasswordCuenta, que herede de la clase base Activity, que permita asignar una contraseña a la cuenta de usuario seleccionada.
  • Clase NuevoUsuario, que herede de la clase base Activity, que implemente la interfaz DelayedConfirmationListener, que proporciona los mecanismos necesarios para informar al usuario de la realización de una tarea.
  • Clase Usuario, que declara los métodos de acceso getters y setters, encargados de almacenar y devolver valores de usuario, perfil y contraseña de la cuenta configurada.
  • Layout splash_screen.xml, que define un componente de tipo ImageView, con la imagen representativa de la aplicación.
  • Layout activity_main.xml, formado por tres vistas personalizadas que proporcionan un diseño único para ambos formatos de pantalla (clases BoxInsetLayout,CardScrollView y CardFrame), formado por un componente Spinner para la selección de la cuenta de usuario a configurar.
  • Layout activity_perfil_usuario.xml, al igual que el layout anterior, está formado por tres vistas personalizadas, además de un componente de tipo Spinner que mostrará los perfiles de usuario disponibles.
  • Layout activity_password.xml, cuya principal características será la definición de un componente ListView a modo de teclado numérico. Este layout permite la asignación de una contraseña a la cuenta configurada.
  • Layout nuevo_usuario.xml, que define una vista personalizada que mostrará un mensaje de confirmación (además de un temporizador que permita cancelar la acción), indicando que la tarea realizada se ha completado correctamente. Al mostrar dicha confirmación, se añadirán los datos seleccionados al componente ListView declarado.
  • Layout spinner.xml, que define un diseño único para asignar al adaptador del componente de tipo selección Spinner. Estaría formado por un componente TextView.
  • Layout listview.xml, formado por un componente de tipo TextView, que mostrará la configuración seleccionada por el usuario.

Estructura del proyecto

Estructura Proyecto

Lógica de navegación

En la siguiente imagen se mostrará la lógica de navegación del proyecto a describir, mostrando de izquierda a derecha, el proceso de configuración de una cuenta de usuario, además de su visualización en pantallas con forma redonda y cuadrada:

  1. Pantalla de presentación inicial.
  2. Selección de la cuenta de usuario, a partir de un componente de tipo selección Spinner en modo diálogo.
  3. Selección del tipo de perfil de la cuenta de usuario a partir de una lista en un componente Spinner.
  4. Pantalla para establecer una contraseña numérica, que no podrá superar los 6 caracteres.
  5. Lógica de creación de usuario, con mensaje de confirmación.

Diagrama lógica App

Documentación código fuente

A continuación, se describirá el código fuente del proyecto, destacando aquellas partes diferenciadoras entre las clases y Activities declaradas. Como siempre, puedes descargar todo el código al final de este tutorial.

Al definirse estructuras similares de navegación entre Activity y Activity (clases CuentaUsuario.java, PerfilUsuario.java y PasswordCuenta.java), sólo se abordará la construcción de dicha funcionalidad en la primera clase a tratar, permitiendo describir sólo aquellas partes no comunes en el resto de clases:

CuentaUsuario\wear\src\main\java\com\academiaandroid\cuentausuario\CuentaUsuario.java

  1. Clase que hereda de la clase base Activity, cuya tarea principal será la de
    seleccionar la cuenta de usuario a configurar:
  2. Se asigna el componente declarado a nivel de layout a la clase CardScrollView, además de alinear la tarjeta al centro de la línea vertical que separa la pantalla:
  3. También comentar que se implementa el evento que controlará la pulsación de la tarjeta para mostrar la siguiente Activity con los datos de la cuenta de usuario seleccionada:

CuentaUsuario\wear\src\main\java\com\academiaandroid\cuentausuario\PerfilUsuario.java

Al tratarse de una estructura muy similar a la de la anterior clase (CuentaUsuario.java), es recomendable tomar como referencia dicha clase, ya que presentan un funcionamiento casi idéntico.

CuentaUsuario\wear\src\main\java\com\academiaandroid\cuentausuario\PasswordCuenta.java

  1. Clase que hereda de la clase base Activity,
    que permitirá asignar una contraseña a la cuenta de usuario seleccionada:
  2. Se asignan los recursos a nivel de layout con las clases declaradas:
  3. Se define el evento encargado de controlar la selección de un ítem de la lista, añadiendo su contenido (teclado numérico) al campo EditText:
  4. Además se declara el evento onClick() asociado a un componente EditText, que permitirá borrar la contraseña introducida:

CuentaUsuario\wear\src\main\java\com\academiaandroid\cuentausuario\NuevoUsuario.java

  1. Clase que hereda de la clase base Activity, e implementa la interfaz DelayedConfirmationListener, que proporciona los mecanismos necesarios para informar al usuario de la realización de una tarea:
  2. Se asigna el componente declarado a nivel de layout a la clase DelayedConfirmationView:
  3. Se establece un temporizador de 5 segundos para la cancelación de la tarea por parte del usuario:
  4. Se lanza la tarea al mostrar la nueva Activity, ya que se invoca al método start() dentro de onCreate():
  5. Para finalizar se sobrescriben los métodos onTimerFinished() y onTimerSelected(), encargados de implementar la acción a realizar transcurrido el tiempo establecido, o en caso contrario de la cancelación de la tarea:

CuentaUsuario\wear\src\main\res\layout\activity_main.xml

  1. Layout que define tres vistas personalizadas, formada por una principal a partir de la clase BoxInsetLayout, que establecerá un diseño único para la aplicación, y anidadas dentro de esta se encontrarían la vista CardScrollView, encargada de envolver a la vista CardFrame para poder navegar entre tarjetas. Este layout estaría formado principalmente por un componente Spinner que mostrará los elementos disponibles para la configuración:

CuentaUsuario\wear\src\main\res\layout\activity_perfil_usuario.xml

  1. Al igual que el anterior layout, define tres vistas personalizadas, pero con la diferencia de que se define un componente de tipo TextView que recogerá el valor seleccionado en la configuración anterior, además de un componente de tipo Spinner que mostrará los perfiles de usuario predefinidos:

CuentaUsuario\wear\src\main\res\layout\activity_password.xml

  1. Estructura similar a los layouts descritos hasta el momento, con la salvedad de que se implementa un componente de tipo EditText (tipo de entrada numérico, password y no superior a 6 caracteres) que recogerá la contraseña introducida por el usuario, y un componente de tipo selección ListView, que funcionará a modo de teclado numérico para introducir dicha contraseña:

CuentaUsuario\wear\src\main\res\layout\nuevo_usuario.xml

  1. Layout que al igual que los comentados anteriormente, presenta una estructura principal formada por tres vistas a partir de las clases BoxInsetLayout, CardScrollView y CardFrame, pero con la principal diferencia de que se incluye a nivel de diseño el elemento DelayedConfirmationView, al que se le asigna una imagen para la cancelación de una acción realizada por el usuario. Además, se establecen las propiedades de radio y anchura de borde, para simular un temporizador, que se declara e inicializa de manera programática:

CuentaUsuario\wear\src\main\res\layout\spinner.xml
CuentaUsuario\wear\src\main\res\layout\listview.xml

  1. Se crean dos recursos xml de tipo Drawable, que proporcionan una vista personalizada para tanto listar el nombre y perfil de la cuenta de usuario (componente Spinner), como mostrar la configuración de cuenta creada (componente ListView). Dichos recursos estarán formados cada uno por un componente de tipo TextView:

spinner.xml

listview.xml

Nota: Al tratarse de una parte común en proyectos utilizados anteriormente, la clase SplashScreen.java y su layout splash_screen.xml no se describen dentro del apartado “Documentación de código fuente”. También comentar, que para establecer un diseño único dentro de cada layout, es necesario establecer como elemento principal del resto de vistas personalizadas la clase BoxInsetLayout .

Dependencias declaradas en el Proyecto

Para este proyecto ha sido necesario añadir las siguientes dependencias para soportar dispositivos wearables, además de poder utilizar los servicios de Google Play (archivo “build.gradle” del módulo “wear”):

AndroidManifest.xml

Es necesario declarar dentro del elemento <application... la Activity ConfirmationActivity, para acceder a las animaciones de confirmación:

 

Descarga del código

Descargar