Interfaz 1

Empezaremos a aprender a crear una interfaz para Android en un XML, bien yo comencé por leer los tutoriales de la página oficial de Android y trataré de no simplemente arrastrar botones o componentes, si no crearlo todo apartir del XML.
La meta al finalizar esta entrada es obtener una pantalla como estas:

Me centro en estas dos porque la primerea muestra el menú, y la segunda es la interfaz para que el usuario pueda dibujar algo en el cubo y ver en 3D en el mismo celular lo que esta haciendo, esto es lo que me concentraré en sacar primero las demás funcionalidades las considero extras al proyecto.

Bien, comenzemos ....

Botones del menu

Lo primero que hay que hacer es crear un proyecto, al mio le llamé practica, como ya sabemos automáticamente se crean ciertas carpetas.

En la carpeta src se crea automáticamente el archivo ParcticaActivity.java, es ahí donde se crea la actividad que se muestra en la pantalla al iniciar la aplicación.

Si corremos el programa en el emulador de Android tal cual veremos que se crea un Hola Mundo, automático, esta es la base para comenzar con nuestra aplicación Android.

Como lo dije arriba lo que yo quiero es crear una interfaz parecida a lo que se ve arriba, que tenga 5 botones principales, con una ubicación agradable a el usuario.

La interfaz en android se puede configurar moviendo una archivo xml que se encuentra en la carpeta res>layout llamado main.xml.

Al seleccionar este archivo se puede ver al lado derecho un archivo xml de texto, pero también podemos ver gráficamente la pantalla con componentes que se pueden agregar fácilmente. Yo use la forma gráfica.

Yo comencé agregando botones sin embargo automáticamente los botones se acomodan uno bajo el otro, lo que hay que hacer ahí es crear un RelativeLayout:

Elegí RelativeLayout porque con esto podemos acomodar los botones como yo quiero, si uso linearLayout los botones solamente estarán o en horizontal o en vertical, es poreso que es más adecuado para mí usar RelativeLayout que permite ubicar elementos en posición relativa a otros. Coloco Relative layout en toda la pantalla.

Lo siguiente será acomodar los botones, como queremos que los botones tengan imágenes, lo que yo hice fue descargar un paquete de iconos gratis para Android de Internet, o puedes poner la imágen que tu quieras en png, una vez que ya tengas la imagen deberás ponerla en la carpeta, res>drawable-mdpi, ahí se ponen los iconos pequeños en las carpetas drawable-ldpi y hdpi van iconos más grandes.

Ahora si podemos insertar nuestras imágenes botones, para esto te vas al apartado Images & Media, de ahí eliges ImageButton, y se empiezan a poner las imágenes que seleccione de las que acabo de mover a la carpeta drawable-mdpi en la posición que quiero.

También agrego texto debajo de cada imagen para eso uso un textView, lo mismo simplemente lo posiciono en donde quiero que este.Para modificar el texto que muestran los textView me voy directamente al xml de ahí modifico android:text = "esto" del textView correspondiente.

Usar RelativeLayout es cómodo ya que tu sabes cuando estas poniendo los componentes simétricamente, ya que siempre se busca poner los componentes relativamente a otros, nunca puedes poner algún botón en alguna posición totalmente Random, tienes que ponerlo con cierto patrón o simetría.

Este es mi resultado final:

En el simulador:

También se puede jugar un poco con los colores, como muchos ya saben esta aplicación es creada con el fin de manejar un Cubo de leds, ProyectoCuboLeds, pero eso lo checaré después lo importante ahora es que ya este usable y podamos programar las funcionalidades.

Encontré algunos iconos más adecuados:

Pantalla Dibujar

Para esto tenemos que crear mas Activitys y hacer que el boton Dibujar del menú principal reaccione al evento onClick.

Primero creo el otro XML, en el quedaron los botones acomodados así:

Y de una vez, también creo vista previa con otro XML:

Pasos:

Meta alcanzada :), en la próxima entrada sobre interfaz veremos como dibujar las bolitas, y que cambien de color al tocarlas.