En el últimos post que se publicó de mi parte , pudimos ver paso a paso como realizar la instalación del SDK de Android Mobile y como configurarlo con Eclipse. Lo anterior lo necesitaras para poder continuar los pasos de este post y puedes revisarlo en http://comunidad.fware.pro/dev/introduccion-al-desarrollo-de-aplicaciones-android-mobile/. Ahora procederemos al siguiente paso en el aprendizaje de desarrollo de aplicaciones en Android Mobile.
En este post utilizaremos un lenguaje lo mayormente claro y sencillo para explicar a grandes rasgos la estructura principal de una aplicación desarrollada para Android Mobile. Para tener mayor documentación técnica a cerca de la misma, podremos ingresar aquí: http://developer.android.com/guide/topics/fundamentals.html.
Bien, ahora si vamos a lo que nos gusta, empezar con la programación y a untarnos con código. Para ello abriremos nuestro Eclipse (obviamente con la configuración indicada en el anterior post) y seguiremos estos pasos.
En la barra de menú, ingresamos a File->new->Project, allí seleccionamos Android->Android Project y damos clic en Next. En la siguiente pantalla debemos poner, en la parte superior de la ventana, el nombre del proyecto, que en este caso será “HelloActivity”, que es el nombre que tiene el demo que viene con el SDK ya que si le ponemos otro nombre generara error la aplicación y nunca funcionara por más que busquemos y depuremos los errores. Dentro de “contents” seleccionaremos la opción “Create project from existing sample” y en “Build Tarjet” seleccionamos “Android 1.5” teniendo en cuanta que no requerimos de una versión muy avanzada para un programa tan sencillo. Damos clic en Next y luego en Finish.
Para comprobar que el demo funciona correctamente, antes de abrir el código y de modificar cualquier cosa, damos clic derecho sobre la carpeta principal del proyecto->Run As->Android Application.
.
Recordemos que dependiendo de las características de la máquina, esto puede tardar unos minutos en cargar. Si la ejecución es exitosa, nos debe mostrar una ventana como la siguiente:
Teniendo nuestro demo corriendo de manera correcta, podemos proceder a ver la estructura básica de una aplicación en Android Mobile.
Siguiendo el orden de arriba hacia abajo veremos los archivos principales para poder modificar nuestra aplicación. Dentro de la carpeta /src y en el paquete com.example.android.helloactivity encontramos el archivo HelloActivity.java el cual, por el momento, lo único que hace es llamar el layout llamado hello_activity.xml que nos mostrara el mensaje en pantalla.
Nos saltamos algunos niveles y seguimos directamente a la carpeta /res/layout y allí abriremos el archivo hello_activity.xml que es donde decidiremos qué elementos y de qué manera los mostraremos en pantalla. Nos mostrara un entorno bastante amigable que nos permitirá agregar de manera sencilla distintos objetos en nuestro “layout”, nombrado entre comillas porque aún no está definido como tal y por esto mismo si se intentan agregar elementos, muy seguramente no lo permitirá.
Para solucionar ello, ingresaremos al código .XML que generó la aplicación y modificaremos totalmente el archivo para poder agregar, quitar y editar elementos de la aplicación. Esto lo hacemos dando clic en hello_activity.xml en la parte inferior izquierda del entorno que nos abrió anteriormente y automáticamente nos mostrara el código XML.
Cambiaremos esta parte del código actual:
[sourcecode language=»xml»]
[/sourcecode]
Por esta otra:
[sourcecode language=»xml»]
[/sourcecode]
Más adelante veremos un poco más en detalle la explicación del código.
En esta ocasión manejamos TableLayout ya que, en mi opinión, será más fácil ubicar los elementos que vallamos a usar, pero esto seguramente es debido a mi familiaridad con HTML. Si quieres ver otras formas diferentes de mostrar los elementos, puedes consultar mayor información en http://developer.android.com/reference/android/widget/package-summary.html. La modificación anterior nos debe mostrar el texto en la parte superior derecha del display del emulador.
Con la modificación anterior, no solamente modifico el lugar donde vemos el texto actual, sino que también nos permite agregar nuevos elementos en el entorno grafico que podemos ver ingresando nuevamente en la parte inferior izquierda donde dice Graphical Layout.
Si queremos agregar más texto al layout, podemos hacerlo mediante esta maravillosa utilidad integrada ya en nuestro IDE. Pero lo haremos de una manera más estructurada que nos permitirá desarrollar aplicaciones futuras y que serán dinámicas para el usuario final.
Para ello, seguiremos en la siguiente carpeta hacia abajo /res/values y abriremos el archivo llamado strings.xml. En la parte derecha ahora veremos el único elemento que hasta el momento se ve en la aplicación que es el String que muestra el texto “Hello, World!” el cual tiene dos parámetros que son el nombre (se usara para llamarlo dentro de la aplicación, podría llamarse el nombre de la variable) y el valor (texto tal cual lo mostrara en la aplicación, puede llamarse contenido de la variable).
Si queremos modificar los parámetros de este elemento, podemos hacerlo. Lo que haremos en este caso es agregar un nuevo string para después llamarlos desde nuestro layout. Para realizar ello, solo debemos hacer clic en el botón “Add” que aparece en la parte derecha de este entorno , seleccionamos “String” y damos clic en ok.
Le damos el nombre y el valor que prefiramos, le he puesto “hello_activity_text_text2” y “Ciao mondo respectivamente”.
Ahora lo que debemos hacer es llamarla dentro de nuestro layout, y para ello volveremos a abrir el archivo hello_activity.xml dentro de /res/layout e ingresamos a editar el código directamente.
Agregamos después de donde se cierra la etiqueta “</TableRow>” el siguiente código, que es solo un duplicado del código que nos imprimía el mensaje anterior solo que ahora llama un string diferente que es hello_activity_text_text2. Y adicional se agregó al final unos comentarios documentando un poco lo que realiza cada línea de código agregada.
[sourcecode language=»xml»]
[/sourcecode]
Ahora ejecutaremos nuevamente nuestra aplicación y nos mostrara debajo del texto anterior y alineado a la izquierda el nuevo String.
Bien, espero les funcione correctamente al seguir al pie de la letra las instrucciones de este post y, obviamente, espero les haya gustado.
Siguenos en: