Curso de Desarrollo Android. Tema 6: Mi primera aplicación en Android Studio ¡Hola Mundo!
Tras varias clases teóricas y de configuración de nuestro IDE Android Studio vamos a empezar con la primera clase práctica para tener una primera toma de contacto con el IDE y la programación para Android en general. Por ello, al igual que en cualquier lenguaje de programación, vamos a empezar creando nuestra primera App ¡Hola Mundo!
Lo primero que debemos hacer es abrir Android Studio y crear un nuevo proyecto. Este proceso ya lo hemos explicado en un artículo anterior, por lo que si tenemos la menor duda de ello debemos pasar a repasar el tema «Cómo iniciar un proyecto en Android Studio» antes de continuar.
Lo primero de lo que nos daremos cuenta es que cuando creamos un nuevo proyecto para Android tendremos ya, por defecto, un proyecto «Hello World!» básico. Lo podemos ver porque en la previsualización de la derecha del código así nos aparece. Nosotros vamos a repasar todos los aspectos fundamentales de este sencillo, básico y elemental programa para poder comprender el por qué esto es así y, a grandes rasgos, cómo funciona la programación para Android.
En nuestro IDE, en la parte izquierda, podemos ver todos los archivos de código que forman nuestra aplicación para Android en forma de un árbol de directorios, así como los scripts de Gradle, en los cuales no vamos a profundizar (de momento).
Si hacemos doble clic sobre cualquiera de los ficheros podemos ver su código (aunque si el archivo es un fichero xml probablemente lo que seamos será la «previsualización», por lo que debemos mirar en la parte inferior central de la ventana, donde veremos dos pestañas: Design y Text. Pulsamos Text).
El primer código que vamos a ver es el fichero Java «MainActivity» (creado durante el asistente inicial como la actividad básica) que se encuentra en la ruta app>Java>com.example.nombredelaapp>MainActivity.
Si abrimos el código fuente de este fichero podremos ver una definición básica de esta actividad. Lo primero que debemos tener en cuenta (aunque lo analizaremos más adelante) es que nuestra ventana principal, llama MainActivity se extiende de la clase AppCompatActivity.
Dentro de esta ventana, o actividad, podremos encontrar la definición de un archivo de recursos xml, que será el que contenga lo que se va a ver en la pantalla, es decir, en nuestro caso el texto y las propiedades del «Hola Mundo!» que queremos imprimir en pantalla.
Por lo tanto, para poder crear un elemento «Hola Mundo!» en esta sencilla aplicación debemos ir al archivo ahí definido, es decir, a la ruta app>res>layout>activity_main.xml. ***Ver anexo 1***
Los usuarios que ya dominen el lenguaje Java sabrán que la instrucción necesaria para mostrar el Hola Mundo! en el lenguaje Java es System.out.println(«Hola Mundo!»), sin embargo, para introducir texto (y otros elementos que veremos más adelante) en una aplicación para Android debemos hacerlo a partir de ficheros xlm, a los cuales debemos llamar en la actividad en cuestión para que se muestren en la pantalla. Esto facilita el desarrollo de la aplicación y permite, por ejemplo, hacer de una forma muy sencilla que nuestra aplicación sea multi-idioma.
Android Studio puede funcionar como un IDE D&D (drag and drop) que nos permiten colocar ciertos elementos en el programa arrastrándolos desde la lista (profundizaremos en ellos más adelante) sin tener que programarlos uno a uno.
Para ver una prueba de este sencillo «Hola Mundo!», desde la pestaña «Design» que hemos visto antes pulsaremos en el apartado de «previsualización» sobre el «Hello World!» y lo eliminaremos con la tecla supr. El cuadro de texto que se crea por defecto se eliminará y tendremos un proyecto totalmente vacío.
A continuación, desde la lista de elementos que nos aparece en el centro de la ventana seleccionaremos «Widgets > Large text» y lo arrastraremos a la imagen del smartphone que nos aparece a la derecha, a la posición que deseemos. El resultado final deberá ser similar al siguiente.
En la parte derecha de la pantalla veremos la sección de «propiedades» del cuadro de texto que acabamos de crear. Desde aquí configuraremos la mayoría de los aspectos del elemento, entre otros, el contenido de este cuadro de texto (y el color, tamaño, etc en caso de que lo necesitemos). Profundizaremos en esto en futuras lecciones.
Dentro de las propiedades, buscaremos el apartado «Text» y cambiaremos el contenido que pone por defecto (Large Text) por el texto que queremos escribir, en nuestro caso, «Hola Mundo!». El aspecto final será similar al siguiente.
Cómo probar nuestra aplicación «Hola Mundo!» en Android Studio
Nuestro primer programa está listo. Ya podemos ejecutar nuestro primer programa en la máquina virtual. Para ello pulsaremos sobre el botón «Run App» (o pulsaremos Alt+F10) y esperaremos a que nuestra primera aplicación cargue en la máquina virtual.
**Anexo 1:
A partir de Android Studio 1.4, la actividad «MainActivity» viene definida por dos ficheros xml:
- activity_main.xml -> Define el estilo de la pantalla, o actividad.
- content_main.xml -> Determina los contenidos dentro de activity_main.xml, por ejemplo, texto, botones, etc.
Cuando una aplicación para Android llama a su actividad principal «MainActivity», esta carga por defecto el fichero «activity_main.xml» quien a su vez llama, como veremos a continuación, al fichero «content_main.xml».
A grandes rasgos, podemos pensar en content_main.xml como una parte de un fichero HTML. El fichero activity_main.xml contendrá el diseño global de actividad y content_main.xml el diseño de los contenidos.
Si tienes alguna duda, pásate por el Foro de MovilZona donde hemos creado un post para las consultas al respecto de este tema.