Android desde cero

Anímate a realizar con el Android Studio tu primera aplicaión móvil

Abre el eclipse y escribe el mas simple "Hola Mundo!"con Spring MVC

Sigue 8 simples pasos para obtener al proyecto mas simple de Spring MVC con Eclipse y Maven.

Como subr una app al Google Play

Te mostramos en tres post, como subir una app en Android al Google Play

viernes, 29 de abril de 2016

Chess y Menu - (Parte IV) - Parte Android

En este post, mostramos el resultado de combinar los ejercicios ChessLab02 y ChessLab03 para tener una aplicación mas completa de ajedrez, con opciones de ejercicios de Mates en 1, 2, 3 y 4 jugadas.

Mantendremos el nombre ChessLab03_v2

Comencemos

En GitHub seguimos con la rama ChessLab03_v2:
El resultado de este ejercicio queda subido a GitHub en:
https://github.com/PabloEzequiel/Android/tree/ChessLab03_v2/ChessLab03

La demo:




Próximos pasos, mejorar la distribución de los botones.
Parsear un JSon con las soluciones a los ejercicios.




martes, 26 de abril de 2016

Chess, SVG, Vectores y Drawables (Parte II)

Vamos a dedicar un segundo post a tratar el tema del imágenes vectoriales y los archivos SVG por la importancia que estos tienen para las aplicaciones móviles, y el mundo nuevo que representan las imágenes vectoriales (SVG, IA) respecto a las imágenes de mapa de bits (JPG, GIF, PNG) que al menos yo estoy mas acostumbrado a trabajar.

En el post anterior vimos algunos conceptos básicos sobre la imágenes vectoriales. Hablamos del software open source y gratuito inkscape como una muy interesante alternativa al illustrator. Y vimos también una forma básica de convertir un PNG a SVG con el inkscape.

Pero nos quedó la sensación que vale la pena desarrollar un poco mas el tema, y hacer algunas pruebas mas para seguir entendiendo este formato.

Por ejemplo: ¿Que otros métodos hay para convertir PNG a SVG? ¿Los distintos métodos generan los mismos resultados? ¿Podemos ver una muestra mas grande de ejemplos? ¿Como se interpreta el xml que está dentro del archivo SVG?





Comencemos

Metodo 01: Convertir PNG a SVG con Inkscape

En el post anterior vimos como utilizar Inkscape para convertir PNG a SVG
El siguiente video de you tube también da una buena explicación sobre el mismo procedimiento:

https://www.youtube.com/watch?v=i9D2HFVJ9Xs

Este video, tomando como ejemplo a "Hello Kitty" es mejor para mostrar la técnica:
https://www.youtube.com/watch?v=bD29KTVHht4

Vamos a probar otro método para el mismo resultado:

Metodo 02: Convertir PNG a SVG con vectorizer.io

Probaremos los resultados con http://www.vectorizer.io/  


Veamos la vista previa que nos ofrece la aplicación, para ver el Zoom y la definicón: 





Ahora comparemos la conversión de PNG, al SVG con los software inkscape y la página vectorizer: 


Metodo 03: Convertir PNG a SVG a mano alzada

Hay otra técnica, que es mas avanzada para mi, ya que se necesitan habilidades mas de dibujante que de programador, que consiste en "dibujar" los trazos sobre la imagen a mano, en vez de dejar que el software haga ese trabajo. Seguramente los resultados sean mejores, pero habrá que desarrollar una técnica y practicarla. 

Comparto un video que muestra esta técnica, pero ya creo que escapa al alcanza del post y esta fuera de los objetivos que estoy buscando en el contexto de utilizar algunos SVG dentro de las aplicacione móviles:





El Formato SVG

Comparemos las imágenes SVG que supimos obtener, de los reyes negros: Una utilizando inkscape y la otra utilizando vectorizer.io

Observemos que con inkscape logramos una única capa de imágenes. (La información de la imágen es un único bloque de color verde)
Mientras que con vectorizer tenemos varias capas, ya que utilizaron una técnica de tener una única capa por color:

Demos un paso mas, y volvamos a una imagen del illustrator: ¿Como es su formato? ¿Tendré distintas capas? ¿Las podré aislar manipulando el XML? ¿Podré rotar el peón o el caballo para enderezar el gráfico?



Estas preguntas, después de abrir la imagen con inkscape, vemos que es solo una capa.




Creamos a nuestros SVG (II)

Vamos a crear nuevamente a nuestros archivos de piezas de ajedrez, en formato SVG, siguiendo las recomendaciones del video:


Veamos un par de pantallas intermedias:


Veamos como la imagen queda vectorizada, con 6 pasadas, o sea tomando seis de los colores, y dejando cada color en una capa original.


 La secuencia completa, se puede ver en el minisitio del hosting:

http://mw000561.ferozo.com/pncn/chess/post_png2svg/v1/index_2.html

 A continuación mostramos la secuencia, donde comparamos los distintos tamaños SVG

Veamos con un zoom, la calidad de las imágenes vectoriales que generamos con inkscape, la cual es bastante aceptable de acuerdo a nuestras expectativas:



Por último, veamos el SVG en su contenido XML, el cual, con este barrido de 10 secuencias es muy prolijo: O sea, tiene 10 capas, una para cada color....

Tener un SVG con un XML mas estandar me parece un punto interesante, que confirma que el procedimiento para obtener SVG a partir de PNG de esta manera esta bien encarado,

Si comparamos este XML del SVG, con los que generaban los procedimientos del post anterior (parte I) veremos que efectivamente son mas prolijos y pequeños, y por lo tanto más cómodos para manipular e incluir en la aplicaciones,

Conclusiones

Estamos en condiciones de cerrar el post sobre las imágenes SVG, con el objetivo alcanzado, de conocer un procedimiento confiable para obtener imágenes vectoriales a partir de imágenes de mapa de bits.



lunes, 25 de abril de 2016

Chess, SVG, Vectores y Drawables (Parte I)

Haciendo las pruebas con el menú de la aplicación movil, me tope con los Drawables, y luego con los archivos vectoriales SVG y luego con la necesidad de utilizar el Illustrator para este tipo de archivos vectoriales ... y luego que el Illustrator es caro, al menos para un uso no profesional del mismo...

¿Por que quisiéramos tener un archivo SVG cuando lo tenemos en PNG? 

Básicamente la respuesta es que estamos pensando en aplicaciones móviles, que correrán en distintos tipos de resoluciones de pantallas, y un único archivo vectorial SVG es capaz de adaptarse a las distintas resoluciones. Mientras que con los PNG tendremos que crear distintas versiones de los archivos, para que sean tomados por la App móvil en función de la resolución de pantalla que esta ejecutando. Lo cual eventualmente nos podría conducir a aplicaciones mas pesadas y quizá a mas esfuerzo de programación...

¿Como se trabaja con los archivos vectoriales?

Los archivos vectoriales (SVG, IA, CDR) son la contra cara de las imagen de mapa de bits (JPG, BMP, PNG, PSD, etc...) (buen post sobre imágenes vectoriales y mapa de bits)

Lo primero que encontramos es que el Software para trabajar con imágenes de Mapa de Bits, no es el mismo que se utiliza para trabajar con imágenes vectoriales. Entonces, mientras que hay cierta equivalencia entre el GIMP y el Photoshop para trabajar con imágenes del tipo de mapa de bits.... cuando nos topamos con la imágenes vectoriales, tenemos que buscar otros software de imágenes.

Y en este sentido, desde lo comercial obviamente está el illustrator, pero afortunadamente para los que buscamos un programa  Open Source, tenemos a Inkscape a la cabeza de las alternativas para trabajar con gráficos vectoriales...

Vamos a probar que pasa con GIMP y con Inkscape 




Paso 01: Generando Images Drawables

Vamos a intentar hacer imágenes SVG a partir de archivos PGN utilizando GIMP, que es el programa que yo utilizo por ser gratuito, open source y con muy buena reputación. Obviamente la gente que tiene el ilustrator con o sin licencia no necesita leer las siguientes líneas de este post:

Para poder exportar archivos a SVG con Gimp hay que instalar un plugin, que sería el siguiente: 

Tomamos como input los archivos PGN de las piezas de ajedrez que estamos utilizando, y las vamos a convertir a formato SVG con el GIMP, el editor de imágenes que utilizo porque es gratuito.


El resultado que estamos buscando sería el siguiente, que alguien ya lo hizo con el illustrator, observar

 Observar que tomaron las mismas que yo tengo, que son las del juego Stauton... Pura casualidad ¿Podré obtener el mismo resultado con el GIMP? veremos:

Intento 01: SVG con GIMP

a) Descargamos https://github.com/jabiertxof/Gimp-to-SVG 
b) ¿Como instalalr un plugin de GIMP en MAC? Tenemos la Ruta en la siguiente ruta:
     GIMP > Preferencias > Carpetas > Guiones




El resultado, no voy a dar muchos detalles, pero al menos a mi, no me fué bien...

No voy a dar mas detalles, pero voy solo a decir que fue mucho tiempo perdido de intentar hacer andar los plugin en GIMP, quizá por culpa mía mas que por culpa del plugin....  pero esta aproximación/intento fué un fracaso para mí y con esto cierro el tema.





Intento 02: Con INKSCAPE

Por lo poco que leí, inkscape parece muy prometedor como alternativa open source a illustrator.

La interfaz de usuario es muy completa y prometedora que nos permitirá trabajar con con la comodidad que esperábamos sobre los archivos vectoriales.


El siguiente video de YouTube explica bien como convertir un PNG a SVG como quiero hacer:



Veamos el progreso, empezando a exportar la hacia un SVG


Método: Guardar PNG como SVG

¿Que pasa si simplemente abrimos el archivo PNG y le damos guardar como SVG? ¿Es suficiente para utilizarlo dentro de la aplicación móvil?

Hagamos la prueba:

Origen: Archivos PNG

Las siguientes 6 piezas están en formato PNG, vamos a abrirlo con inkscape y "guardar como" SVG


Destino: Archivos SVG

Abrimos archivo PNG:


Guardamos como SVG:


Vemos efectivamente un archivo SVG en su contenido:


Repetimos el procedimiento con los otros archivos Rey, Dama, Torre, Alfil, Caballo, Peon:

Observamos que por cada pieza PNG tenemos su equivalente SVG:


La intención era subir los archivos SVG a este post de blogger, pero esta operación dice "rechazada por el servidor":



No se porqué blogger no me deja subir los archivos SVG y en google no encontré una  repuesta rápida. Supongo que la respuesta debe ser obvia, en el sentido que son archivos XML...

Vamos a incluir el código SVG en el post (como código fuente) y veremos el resultado en el browser:


Ok, vemos que la imagen del PNG es gigante.... y muy incómoda para seguir desarrollando el post. Por lo cual, voy a mostrarlo de la cuentas de jsfiddle.net:

Veamos lo mismo en la cuenta de CodePen:



See the Pen Prueba SVG: Rey by Pablo Ezequiel (@PabloEzequiel) on CodePen.

http://codepen.io/jonitrythall/post/preserveaspectratio-in-svg

Que muestra los archivos SVG, con la ayuda de

Veamos también el resultado en nuestro propio hosting:

http://mw000561.ferozo.com/pncn/chess/post_png2svg/v1/

Observemos que mientras el PNG se deforma cuando seteamos mas sus dimenciones, el SVG tiene la capacidad de mantener su radio.




El archivo SVG en la página anterior, esta definido en la dimensiones  de 300x300px, veamos el HTML


Esto extrapolado a la aplicación móvil, nos da la pauta que deberemos tener presente las dimensiones del rectángulo donde queremos contener al archivo SVG

En el siguiente link, tenemos una forma cómoda de ver al SVG y su comportamiento dentro del rectángulo: cuando varían sus atributos preserveAspectRatio

http://codepen.io/PabloEzequiel/pen/QEbVrP?editors=1100





Metodo 02: Convertir PNG a SVG con vectorizer.io

En el post siguiente, veremos como utilizar http://www.vectorizer.io/ para convertir los  PNG a SVG con esta página on line.

Con esto daríamos por finalizado el Post

¿Que Aprendimos?

Algunas de las cosas que aprendimos gracias a haber recorrido y escrito este post:

  • Hay un software Open Source llamando Inkscape que nos permite trabajar con comodidad con los archivos vectoriales, como los SVG que tan importantes son para las aplicaciones móviles.
  • Con el Inkscape (gratis) cubrimos la necesidad del illustrator (caro)
  • De forma similar que con el GIMP (gratis) cubrimos el uso del Photoshop (caro)
  • Exploramos un método sencillo para convertir un PNG a vectorial SVG
  • Algunas pruebas básica de archivos SVG dentro de las páginas web

Son pruebas muy básicas, y los archivos vectoriales y SVG es un tema que vamos a necesitar seguir aprendiendo y profundizando, por su importancia y eficiencia dentro de las aplicaciones móviles.



sábado, 23 de abril de 2016

Chess y Menu - (Parte IV) ¿Como agregar Settings?

Android ofrece una API para que trabajemos con los Settings de una forma cómoda.
Vamos a mostrar tan solo un ejemplo en este post, y dejar algunos links a otros lugares que amplían el tema.

El objetivo es identificar los componentes principales:

Comencemos

Agregando nuestros propios settings

En Android tenemos unos activities especiales para los settings, se llaman PreferenceActivity, y podríamos decir que son similares a los layouts, pero hay que crearlas como un XML dentro de res/xml

Veamos con un ejemplo:

a) Creamos res/xml/settings.xml

dentro del directorio xml, con PreferenceScreen: 

El contenido del archivo settings.xml es el siguiente:





   




    


        


    



Donde los valores de los string son definidos en el archivo strings.xml con el prefijo "pref_..."
 

    ChessLab03-b

    Open navigation drawer
    Close navigation drawer

    Settings
    About

    
    
    Idioma
    Seleccionar Idioma
    Idioma de la aplicación




Luego, tenemos la clase que extiende al PreferenceActivity:
   
public class UserSettingsActivity extends PreferenceActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        addPreferencesFromResource(R.xml.settings);

    }
}




Importante: Hay que agregar el activity al AndroidManifest.xml
   
        
        

Por último, capturamos el evento del click sobre R.id.action_settings para cargar el activity que contiene los settings
  
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {

            Intent intent = new Intent(this, UserSettingsActivity.class);
            startActivityForResult(intent, RESULT_SETTINGS);

            return true;
        }

        return super.onOptionsItemSelected(item);
    }





Observemos el resultado, cuando se seleccionan los Settings, en donde se puede agregar el idioma:

    


Leyendo el archivo de preferencias

¿Como podemos verificar que valor fue grabado? ¿Donde se persiste el valor?

Nuevamente, recurrimos al ADM Android Device Monitor, tal como lo habíamos hecho con las Shared Preferences:

Dentro de data/data/... etc: 

Archivo: com.probarnocuestanada.chess.chesslab03_preferences.xml

Para ver su contenido, lo exportamos:
El contenido del archivo descargado es el siguiente, que hace referencia a la selección del idioma inglés:



Observamos que está también el archivo ChessLab03.xml del post de shared preferences


Distintos estilos para los Settings

Vamos a avanzar un poco mas, para ver distintos estilos aplicados y como influyen en el Look&Feel de los settings. Esto se edita en el AndroidManifest.xml donde está declarado el Activity de los settings 




Estilo: @style/AlertDialog.AppCompat.Light

Observemos que con este estilo, no es modo dialog, sino un activity:


Además podemos agregar el botón de Volver con este estilo. (Con los Diálogos pequeños, se produce el crash de la aplicación si queremos agregar el botón de volver):



Con este ejemplo, cerramos el post de Settings en Android, aunque dejamos un par de links para ampliar el tema:


Links

Apple Developer sobre Settings:

Material Design sobre Settings:




viernes, 22 de abril de 2016

Chess y Menu - (Parte III) ¿Como agregar opciones al Toolbar? Settings, etc

¿Como agregar la sección de settings a nuestra aplicación Android? Supongamos que queremos que el usuario en la sección de settings quisiera elegir el idioma de la aplicación.

¿Como podríamos agregarlo?

En el post anterior vimos como siguiendo el wizard Navigation Drawer de Android teníamos una aplicación con un menú y una sección de settings vacía.

En este post vamos a ocuparnos de agregar comportamiento en la sección de settings, para que ahí el usuario cambie las preferencias de idioma de la aplicación.




Comencemos

Cuando seguimos el wizard Navigation Drawer de Android, tenemos a nuestra disposición el Toolbar con algunas opciones vacías que podemos comenzar a configurar en el archivo menu.xml


Mostremos en mas detalle la Toolbar, y sus componentes:


Con el "Menú Overflow" desplegado:



Y veamos la sección del "Menú Overflow" con items para hacer algunos comentarios:



Items en Toolbar: propiedad showAsAction

El primero es sobre la propiedad showAsAction, que indicará si el item se mostrará solo en el "Menú Overflow" o también en la sección de "Botones/Acciones" del Toolbar.





Veamos un ejemplo, para lo cual le agregaremos iconos a la Toolbar, tomados de la guía de material design de Google, para info y para settings:


Vamos a agregar la propiedad "ifRoom" y mostrar el resultado:



Que se agregará el item al Toolbar "si hay lugar" ... o sea "ifRoom", que en este caso es posible:


Otros posibles valores de son showAsAction:
  • ifRoom: Se mostrará como botón de acción sólo si hay espacio disponible.
  • withText: El texto del item se mostrará junto al icono si esta dentro del area de Botones/Acción
  • never: El item siempre se mostrará como parte del menú de overflow.
  • always: Siempre se mostrará como botón de acción sólo si hay espacio disponible...







En el siguiente post, veremos como agregar las Preferences utilizando PreferenceScreen








jueves, 21 de abril de 2016

Chess y Menu - (Parte II) - Parte Android

En este post vamos a intentar hacer un menu con alguno íconos de ajedrez en Android.

Para esto vamos a crear un nuevo proyecto vacío llamado "ChessLab03"

Recordemos que ChessLab02 se utilizó para probar el manejo del layout y el intercambio de imágenes con diagramas de figuras de ajedrez con resultados muy buenos de acuerdo a nuestras expectativas, y ChessLab01 se utilizó para probar las fonts de ajedrez, con resultados aún muy pobres pero confiamos en que vamos a volver sobre este post y este aspecto






El objetivo de ChessLab03, es imitar en Android el siguiente menu que teníamos en la web:

Veremos que pasa con ChessLab03 y los menú en Android...

Comencemos

Paso 01: Creamos el Proyecto ChessLab03 y lo subimos a GitHub

En GitHub estamos trabajando en https://github.com/PabloEzequiel/Android

Creamos un nuevo branch para "ChessLab03", y un nuevo proyecto en Android vacío:

Con el directorio de trabajo:
/Users/pabloin/Desktop/NoCuestaNada/Mob/GitHub-Android-Chess/ChessLab03

... estaba predispuesto a hacer el menú desde cero, tomando ejemplos desde los cursos e Internet, pero ya tenemos un Layout con un menú, así que vamos a empezar por ahí:
Estamos utilizando el Navigation Drawer:


Y ejecutamos el proyecto vacío, con el texto "Hola ChessLa03!"


Que contiene un menu como queríamos, que en el paso siguiente vamos a comenzar a customizarlo para que se adapte a nuestro proyecto "ChessLab03"
    
Queda hacer el push al branch de GitHub



Y con esto configurado, estamos listos para comenzar


Paso 02: Modificamos el Navigation Drawer menu

La idea es incluir en el menú lo que anticipábamos en la vista web: Las opciones de "Mate en 1, 2, 3 y 4". Vamos a obviar lo obvio... por ejemplo, cambiar textos del menu en android (archivo activity_main_drawer.xml), y continuar con lo menos obvio, al menos para mi:

Observemos que en el proyecto las imágenes de la cámara, galería, tools... están representadas con un XML que es un vector. O sea, no es un PNG, ni un JPG, ni un GIF. Y acá es un punto que yo desconozco, así que vamos a averiguar esto:


 ¿Como cambiamos las imágenes? ¿Que son los vectores? ¿Puedo hacer mis propios vectores de imágenes? ¿Cómo se generan? 

Un buen lugar de referencia para obtener una buena respuesta a estar preguntas es la página oficial:

https://developer.android.com/studio/write/vector-asset-studio.html?hl=es

y otro post más cómodo para leer es:

https://blog.stylingandroid.com/vectordrawables-part-1/

Y como es muy extensa la explicación vamos a copiar brevemente dos o tres ideas sobre los drawables..... 

Parece que apareció con la versión Lollipop, los gráficos escalan mejor y hacen más livianas a las .apk. Una de las ventajas mas grandes de los Drawables es que se arman en tiempo de ejecución, con lo cual naturalmente escalan con el dispositivo a la adecuada densidad de la pantalla...

Nuevamente recomiendo el post https://blog.stylingandroid.com/vectordrawables-part-1/ para tener una mejor comprensión de la parte teórica de los drawables y los SVG

Pero: ¿Como puedo generar?...





Paso 03: Generando Images Drawables

Se me complicó la idea de la búsqueda de un plugin de Gimp para hacer esto, o alguna otra herramienta buena, de uso libre. Con lo cual este punto, por ahora, quedará inconcluso en el siguiente post: http://javaen.blogspot.com.ar/2016/04/chess-y-menu-parte-iii-drawables.html

Afortunadamente, y después de no poco trabajo, pudimos lograr el objetivo de encontrar la forma de trabajar comodamente con las imágenes vectoriales, con el software open source incscape en el centro de la solución:

Paso 04: Usando imágenes vectoriales en Android

Por fin, llegamos al paso que queríamos llegar: intentaremos agregar al SVG dentro de Android, como un drawable

Origen:



Conversor SVG to Drawable


Que nos genera el siguiente drawable a partir del SVG:
El cual copiamos dentro del proyecto Android

Y en Android:
Y ahora agregamos la imagen Drawable, de un caballo


Y a continuación, veamos como se ve el caballo integrado en el menú de un Nexus:
Y de una tablet, manteniendo las proporciones:

Un poco de teoria

Repasemos un poco de teoría sobre las imágenes. En Android las imágenes se miden en "dp, px, pt", "mm, in". Donde dp (las mas interesante) son los mas comunes y básicamente significa:

– dp (Density-independent Pixels)

Es una unidad abstracta que se basa en la densidad física de la pantalla. Esta unidad es equivalente a un píxel en una pantalla con una densidad de 160 dpi. Cuando se está ejecutando en una pantalla de mayor densidad, se aumentan el número de píxels utilizados para dibujar 1dp según los dpi’s de la pantalla. Por otro lado, si la pantalla es de menor densidad, el número de píxeles utilizados para 1dp se reducirán. Utilizar las unidades dp en lugar de píxeles es la solución más simple para tratar los diferentes tamaños de pantalla de los dispositivos.

Definición tomada del blog, del cual recomiendo leer el resto del post:


Por otro lado, otra lectura muy recomendada, es la del siguiente link de GitHub sobre ImageView y como se comporta en las imágenes de Android:






Un poco de práctica

Con esta teoría, donde yo estuve utilizando imágenes SVG de 64dp, y que tiene definido espacios de 16 dp respecto a sus bordes y elementos adyacentes ¿Esto se puede medir y verificar en una imagen JPG creada con el GIMP?

Vamos a verificarlo: Con el GIMP vamos a recortar la imagen del Nexus que mostramos más arriba. 
Es una imagens de 480x800 pixeles. El caballo grande, es el archivo PNG original que agregué en una nueva capa, para compararlo con el caballo pequeño que es el archivo SVG que android escal en unidades dp




Al abrirla con el GIMP, y poner algunas guías, quedan las distancias en pixeles que suponíamos:

Reducimos la escala del caballo grander PNG con el GIMP a una altura de 64 pixeles. Y como se observa en la imagen, quedó exactamente igual al caballo de la izquierda, que es la imagen SVG definida en 64dp para android.

Con esto damos por cerrado el post de insertar imágenes Drawables y SVG en Android


Quedaría pendiente agregar las secciones internas de los puntos del menu, para completar el ejercicio ChessLab03

GitHub

La versión exacta, como se ve en este post, es es siguiente Pre-Release: