Android / Gestos

Bienvenidos sean a este post, hoy hablaremos sobre un concepto de Android llamado Gestures (Gestos), estas fueron creadas debido a la complejidad de poder diseñar una buena interfaz en las pantallas de los dispositivos moviles, si bien hoy existen dispositivos con pantallas grandes pero tambien todavia existen pantallas chicas de 3″, el gesto es un movimiento pregrabado sobre la pantalla tactil que la misma puede reconocer y esto nos permitiria ejecutar funciones especiales en base al gesto introducido por el usuario, para entenderlo un poco mejor vamos a ver un ejemplo para entender el concepto de creacion y uso de una libreria de gestos.

Para ello vamos a abrir un emulador desde el AVD Manager, donde aparecera un cuadro como el siguiente

Aca deberan aparecer los equipos que utilicen habitualmente, en mi caso seleccionare el primero y dan al boton verde del lado derecho para iniciarla, una vez iniciada deberan ir a la seccion donde estan todas las apps y seleccionar Gestures builder como se ve en la siguiente imagen

Una vez abierto podremos comenzar a crear nuestra libreria de gestos.

Nota: La informacion a continuacion solo aplica para equipos virtuales sin memorias SD, en caso de que la de ustedes tenga una no aparecera la siguiente pantalla y podran omitir esto.

Abrimos la app y nos aparecere el siguiente error

Esto es debido a que nuestro equipo virtual no posee ninguna memoria SD, para ello deberemos crear una.

Nota: Si vemos la configuracion de nuestro equipo puede aparecer un espacio asignado pero por alguna razon no aparece en el emulador y para que funcione debemos hacer el siguiente procedimiento.

Primero debemos buscar la ubicacion del archivo mksdcard.exe, esta es la herramienta encargada de crearla, para ello les recomiendo utilizar el buscador de Windows, en mi caso estaba ubicado en c:\users\usuario local\appData\local\Android\Sdk\tools, en usuario local debera figurar el nombre con el cual entran al Windows, una vez encontrado, deberan abrir una terminal de DOS desde ahi o ir hacia el lugar donde esta

Nota: Para abrirlo, pulsen inicio si es windows 8 o superior escriban cmd y pulsen enter, de Windows 7 para abajo van a ejecutar y escriban cmd y pulsen Enter.

Una vez en el lugar y si lo ejecutan directamente nos mostrara el siguiente mensaje

Como pueden ver es la forma de utilizarlo, la sintaxis del comando es la siguiente:

mksdcard [-l etiqueta] < tamaño > < archivo >

Donde la opcion -l es opcional y sera la etiqueta de nuestra memoria SD, tamaño sera como su nombre lo indica el tamaño de almacenamiento, puede ser en KB, MB o GB, por ejemplo pueden usar 1024M o 1G para lo cual significa lo miismo, la memoria tendra una capacidad de 1 GB y por ultimo tendremos el archivo, esta sera el nombre del archivo a generar, puede incluir la ubicacion, les muestro un ejemplo

En este caso use la siguiente linea:

mksdcard 1024M c:\Users\mirandma\Documents\Android\sdcard\sdcard.img

Donde primero defini el tamaño (1024M) luego puse la direccion completa de la ruta donde ira la imagen, y por ultimo al final el nombre de la misma. Una vez ejecutada nos creara el archivo en la direccion informada como se ve en la siguiente imagen

Nota: Esto es para los usuarios de Windows en Linux puede tener otra ubicacion, pero la forma de trabajar es similar.

Con la imagen creada solo nos resta agregar a nuestro emulador, para ello volveremos a abrir el AVD Manager

Aca deberan seleccionar el icono de forma lapiz, para poder ir a la configuracion de nuestro dispositivo virtual, una vez seleccionado nos aparecera el siguiente cuadro

Aca deberan presionar Show Advanced Settings, para habilitar mas opciones

Aca deberemos ir hasta la opcion SD Card, deben seleccionar la opcion External File y presionar el boton resaltado en azul para abrir el cuadro de busqueda como se ve en la siguiente imagen

Aca deberan ir hasta donde crearon la imagen de la memoria SD, una vez seleccionada pulsen Ok para cerrar el cuadro y volver a la ventana anterior

En este caso, con la imagen seleccionada pulsamos Finish para culminar la modificacion de nuestro equipo virtual, una vez devuelta en el AVD Manager presionen el boton verde para iniciarlo, con el equipo iniciado si vamos a Ajustes (o Configuraciones) y luego a Almacenamiento podremos ver como ahora si nos aparece la memoria SD

No se preocupen por el tamaño, si volvemos a abrir la app Gestures builder pero esta vez nos aparecera de la siguiente forma

Con el error corrregido prosigamos con la creacion de nuestros gestos, para ello debemos presionar sobre el boton Add gesture, ingresarle un nombre y dibujar el mismo sobre la pantalla quedando de la siguiente forma

Aca tendremos dos opciones, el boton Done es para guardar el gesto y el boton Discard es para desecharlo, una vez creado nuestro gesto nos quedara de la siguiente forma

Si nosotros deseamos eliminar este gesto, solamente deben tenerlo pulsado hasta que aparezca las siguientes opciones

Aca pueden eliminar a traves de la opcion Delete o simplemente renombrarlo con Rename, veamos como se crea un gesto a traves del siguiente video

Una vez explicado como crear los gestos, pasemos a crear una nueva app para chequear los mismos, para ello deberemos crear una libreria de gestos y las mismas se deberan quedar de la siguiente manera

Nota: Para lograr algunos gestos deberan ser rapidos, como por ejemplo cancelar si lo hacen rapido podran dejarlo como en la imagen sino tendran que practicar bastante, otro dato es que en el emulador va a ser mas dificil que en el equipo verdadero pero se puede lograr en ambos casos.

Comencemos con la creacion de nueva app para probar nuestros gestos, para ello abramos Android Studio y seleccionemos Start a new Android Studio project, en el siguiente cuadro modificaremos el campo Application Name por Gestos, en Company domain usen example.org, el resto debe quedar como aparece por defecto, pulsen Next para pasar al siguiente cuadro, en este deberan seleccionar Phone and Tablet, y la API mas baja disponible, una vez seleccionado pulsen Next para pasar al siguiente cuadro, en el nuevo cuadro deberan seleccionar Empty Activity y pulsar Next para pasar al cuadro final, aca lo dejaremos como aparece por defecto, con los nombres y las opciones tildadas y pulsar Finish para comenzar la creacion de nuestra app.
Con nuestra app creada, deberemos hacer algunas modificaciones previas para poder seguir con las mismas, primero deberemos crear una nueva carpeta de recursos para ello debemos hacer click con el boton derecho sobre el recurso res y seleccionar New -> Android Resource Directory como se ve en la siguiente imagen

Una vez seleccionada nos aparecera el siguiente cuadro

En este cuadro modificaremos Directory name por raw, seleccionaremos el Resource type como raw y Source set debe quedar como main, con estos tres campos seleccionados pulsen Ok para cerrar la ventana y crear nuestro nuevo recurso, una vez creado nos quedara de la siguiente forma

Para completar nuestras modificaciones debemos volver a los gestos creados antes de este ejercicio, para conseguir los mismos deberemos tener nuestro equipo virtual abierto, despues iremos a View -> Tool Windows -> Device File Explorer como se ve en la siguiente imagen

Una vez seleccionado nos aparecera a la derecha de nuestra pantalla el siguiente panel

En este panel podremos acceder a todos los archivos de nuestro dispositivo, sea fisico o virtual, en este post explico un poco mas en detalle para que sirve pero nosotros aca deberemos ir a sdcard y buscar el archivo llamado gestures como se ve en la imagen anterior. En este archivo tendremos todos los gestos creados por nosotros antes de este ejemplo. para copiarlo en nuestro nuevo recurso llamado raw debemos hacer click con el boton derecho y seleccionar Save As como se ve en la siguiente imagen

Una vez seleccionado nos aparecera el siguiente cuadro

En este cuadro guardaremos nuestro archivo del equipo virtual llamado gestures a una carpeta de nuestro PC o Laptop, una vez seleccionado pulsen Ok para copiarlo. Luego deberan ir a la carpeta donde guardaron el archivo y copiarlo por medio de Ctrl + C o click con el boton derecho y la opcion Copiar

Una vez hecho volvemos a Android Studio, donde seleccionaran el recurso raw y pueden usar Ctrl+V o click con el boton derecho la opcion Paste como se ve en la siguiente imagen

Una vez efectuada la accion nos aparecera el siguiente cuadro

Aca nos preguntara si deseamos conservar el nombre y/o cambiar el destino de nuestro archivo, en este caso no modifiquen nada y pulsen Ok para cerrar la ventana y copiar nuestro nuevo recurso

Como pueden ver nuestro archivo gestures esta en el lugar necesario para poder trabajar, si lograron esto ya tenemos todas nuestras modificaciones, por fuera del codigo, realizadas y ahora procederemos a modificar el codigo de activity_main.xml por el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="Introduce un gesto!"
        android:textSize="8pt"
        android:layout_margin="10dip" />
    <TextView
        android:id="@+id/salida"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <android.gesture.GestureOverlayView
        android:id="@+id/gestos"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gestureStrokeType="multiple"
        android:fadeOffset="800" />
</LinearLayout>

Como pueden ver tenemos elementos ya vistos en otras ocasiones, el unico nuevo sera GestureOverlayView, el cual se encargara de manejar nuestros gestos, tambien con la opcion gestureStrokeType permitiremos multiples trazos y la ultima linea se encarga de darnos un poco mas tiempo para generar los multiples trazos, con esto modificado ahora pasemos a modificar nuestra clase MainActivity con el siguiente codigo:

package org.exaample.gestos;

import android.app.Activity;
import android.gesture.Gesture;
import android.gesture.GestureLibraries;
import android.gesture.GestureLibrary;
import android.gesture.GestureOverlayView;
import android.gesture.Prediction;
import android.os.Bundle;
import android.widget.TextView;

import java.util.ArrayList;

public class MainActivity extends Activity implements
        GestureOverlayView.OnGesturePerformedListener {

    private GestureLibrary libreria;
    private TextView salida;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        libreria = GestureLibraries.fromRawResource(this,
                R.raw.gestures);
        if (!libreria.load()) {
            finish();
        }

        GestureOverlayView gestosView = (GestureOverlayView)
                findViewById(R.id.gestos);
        gestosView.addOnGesturePerformedListener(this);
        salida = (TextView) findViewById(R.id.salida);
    }

    public void onGesturePerformed(GestureOverlayView ov,
            Gesture gesto){
        ArrayList< Prediction > predicciones = libreria.recognize(gesto);
        salida.setText("");
        for(Prediction prediccion : predicciones){
            salida.append(prediccion.name+" " + prediccion.score+"\n");
        }
    }
}

En este codigo primero implementaremos sobre la clase el metodo GestureOverlayView.OnGesturePerformedListener, el cual nos permitira interpretar los metodos en nuestra app, luego crearemos dos objetos uno llamado libreria de la GestureLibrary y otro llamdo salida de la clase TextView.

Nota: A medida que vayan escribiendo el codigo les pedira presionar Alt+Enter para agregar los paquetes necesarios.

Luego en el metodo onCreate(), por medio de la siguiente linea:

libreria = GestureLibraries.fromRawResource(this, R.raw.gestures);

Le diremos que en el objeto libreria tenga el archivo gestures que hemos creado e importado previamente, luego tendremos un condicional if donde si libreria no se carga este ejecuta el metodo finish() y cierra la app, despues crearemos dos enlaces de nuestro codigo java con elementos del layout, la primera linea:

GestureOverlayView gestosView = (GestureOverlayView) findViewById(R.id.gestos);

Esta creara un enlace al elemento encargado de manipular los gestos hechos en nuestra pantalla, la siguiente linea:

gestosView.addOnGesturePerformedListener(this);

Le habilitara por ese metodo la posibilidad de interactuar con los gestos, nuestra siguiente linea:

salida = (TextView) findViewById(R.id.salida);

Creara el enlace de nuestro codigo con el TextView de salida del layout, luego crearemos un sobrecarga del metodo onGesturePerformed(), en este caso primero crearemos un Array de la clase ArrayList con la clase Prediction, la llamaremos predicciones y por medio del metodo recognize() del objeto libreria. En nuestro siguiente caso utilizaremos un for avanzado para chequear cada una de las predicciones con una prediccion y luego lo agregaremos a nuestro enlace por medio del metodo append() tanto al nombre con el puntaje del mismo, el puntaje es un valor de cuanto se aproximo nuestro gesto a los almacenados en la libreria, como podran deducir mientras mas grande mas cercano a ese gesto es, veamos el siguiente video donde probamos nuestra app

Como pueden ver a medida que vamos probando los gestos al terminar nos devuelva el nombre y el puntaje (score) si lograron lo mismo que en el video Felicitaciones!!

En resumen, hoy hemos aprendido que son y para que se usan los gestos, hemos aprendido a hacer librerias para nuestras futuras apps, hemos hecho app y la hemos probado, espero les haya sido util sigueme en Twitter, Facebook o Google+ para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.