Capitulo 2: Tu primera aplicación en Java para Android

Después de finalizar todos los pasos de la primera parte de este tutorial, referentes a la instalación de todos los elementos necesarios para el desarrollo de aplicaciones para nuestro dispositivo Android, vamos a pasar a hacer la primera. Va a ser un ejemplo muy sencillo.Los programadores tienen la manía, desde tiempos inmemoriales, de que la primera aplicación que hacen para un nuevo lenguaje de programación que están aprendiendo, sea un “Hola mundo”.

Creación de un nuevo proyecto en Eclipse

En primer lugar tendremos que abrir nuestro Eclipse, que como ya habíamos dicho va a ser el entorno de desarrollo que vamos a utilizar para nuestras aplicaciones Android. Una vez aquí, creamos un proyecto nuevo de la siguiente manera:

  • Nosotros queremos crear un nuevo proyecto Android, así que vamos a “otros”. Nos aparecerá el siguiente diálogo, donde veremos una carpeta llamada “Android”, y seleccionaremos nuevo proyecto android.
  • Cuando le damos a siguiente, nos aparecerá un nuevo diálogo donde tendremos que fijar algunas de las propiedades de nuestro proyecto. Vamos a verlo:
    • Project Name: El nombre que le vamos a dar a nuestro proyecto, y por el que podremos reconocerlo dentro de Eclipse. En este caso lo llamaremos HolaMundo
    • Contents: Aquí querrá que le digamos si vamos a crear un proyecto desde cero, o queremos usar algún tipo de código que ya tengamos escrito de antemano, y donde almacenarlo. En default location os pondrá la ruta de vuestro workspaceindicado durante el primer inicio de Eclipse, y no es más que la ruta en vuestro disco duro donde se va a almacenar el proyecto
    • Build Target: Aquí seleccionaremos la versión de sistema operativo que vamos a utilizar. Hay cosas, como por ejemplo Text-To-Speech, que solo están disponibles a partir de la 1.6, cosa a tener en cuenta en el futuro. Tampoco es “paseis” por arriba, ya que entonces no funcionará en dispositivos con versión menor
    • Application name: El nombre que va a tener nuestra aplicación, que será visible, por ejemplo, en el menú de aplicaciones de Android entre otros sitios
    • Package name: El código va a estar ordenado en paquetes, cosa que de momento nos va a dar bastante igual, y os basta con saber que por convenio, suelen empezar por letra minúscula
    • Create Activity: Vamos a marcar esta opción para que nos cree la primera clase, donde nosotros vamos a escribir nuestro código
  • Ya estamos listos para finalizar con este asistente y darle a finish. En este momento, eclipse nos crea toda la estructura necesaria de ficheros y directorios para nuestra aplicación, y vemos lo siguiente:
    • A la izquierda, en “Package explorer”, podemos ver la estructura de nuestro proyecto Android. Nos basta con saber dos de las carpetas:
      • src: Aquí es donde van a ir las SouRCesfuentes de nuestros programas, es decir, el código que nosotros vamos a escribir
      • res: Aquí es donde van los RESources o recursos de nuestros programas, tales como imágenes, sonidos, y las pantallas.
    • A la derecha podemos ver que he abierto la clase HolaMundoActivity.java, que es la activity que le dijimos que crease cuando creamos nuestro proyecto.Esta es la actividad que va a ser llamada cuando arranque nuestro programa, es decir, este es el trozo de código que se va a ejecutar primero en nuestra aplicación. Se va a crear un objeto, en este caso no es un microondas, si no un “HolaMundo” que de momento, va a tener definida una única funcionalidad, onCreate, que lo que va a hacer es definir lo que tiene que hacer cuando se crea, es decir, cuando lo arrancamos.

HolaMundoActivity.java

package com.jes;

import android.app.Activity;
import android.os.Bundle;

public class HolaMundoActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Programando código de nuestra cosecha

Vamos a añadirle un par de propiedades a nuestra clase, unos atributos, que en este caso van a ser el texto que va a mostrar, y el color, por ejemplo.

De esta manera es como le diremos a nuestro programa, que interfaz, que vamos a crear ahora, tiene que utilizar para, en nuestro caso, mostrar nuestro hola mundo.Y a ese método le estamos pasando R.layout.main refiriéndonos a:

  • R: La forma de referirnos a los recursos (res) que tiene nuestro programa
  • layout: Se trata de una interfaz de usuario, que como veremos ahora, están dentro de /res/layout
  • main: Este va a ser el nombre del fichero que vamos a crear para nuestra interfaz.
  • <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >
    
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/hello" />
    
    </LinearLayout>

Como veréis, Eclipse ya nos lo crea inicialmente

  1. Abrimos nuestro main.xml que como dijimos está en /res/layout (donde, recordemos, vamos a guardar las interfaces gráficas) y nos sale esto en la pantalla
  2. Hay una pestañita llamada main.xml, al lado de Graphical Layout. Le damos ahí, y vemos lo siguiente:
    1. Este textview va a ser un objeto, con sus atributos y métodos que nosotros vamos a utilizar para mostrar un texto.Vamos a darle un identificador, para poder referirnos a el desde nuestro programa: Lo haremos simplemente añadiendo esa línea, de la cual ya explicaremos la sintaxis en capítulos posteriores.
    2. <?xml version="1.0" encoding="utf-8"?>
      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:orientation="vertical" >
      
          <TextView
              android:id="@+id/cajatexto"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:text="@string/hello" />
      
      </LinearLayout>
  3. Vámonos ahora de nuevo a nuestro programa principal, y vamos a realizar lo siguiente: Pedir la caja de texto, fijarle el texto, y fijarle el color.Para ello lo haremos así:
    1. Vamos a ver que son estas dos líneas que he añadido:
      1. TextView tv : Creamos la referencia a un objeto de la clase TextView, que es el elemento que tenemos en nuestra interfaz para mostrar nuestro texto.
      2. (TextView) findViewById(): findViewById es, de nuevo, un método que heredamos de activity, y que lo que hace es encontrar una “view” dándole nosotros su identificador (el que acabamos de fijar en el XML).
      3. R.id.cajatexto: Como ya dijimos antes, R (res), id (buscamos un identificador), cajatexto (el nombre que le hemos dado al identificador de nuestro TextView en el XML)
  4. Hacemos los import necesarios y ya tenemos un objeto TextView, llamado tv, que se refiere al TextView de nuestra interfaz. Vamos a decirle que y como queremos mostrar
  5. package com.jes;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.widget.TextView;
    
    public class HolaMundoActivity extends Activity {
        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
    
            TextView tv = (TextView)findViewById(R.id.cajatexto);
        }
    }
  6. Nuestro TextView iba a tener unas funcionalidades para fijarle el texto que queremos mostrar, así como el color del mismo (entre otros muchos, por si queréis investigar).Pues así lo hacemos, pasándole nuestras variables definidas anteriormente, llamadas textoMostrar y colorTexto
  7. package com.jes;
    
    import android.app.Activity;
    import android.graphics.Color;
    import android.os.Bundle;
    import android.widget.TextView;
    
    public class HolaMundoActivity extends Activity {
        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
    
            TextView tv = (TextView)findViewById(R.id.cajatexto);
    
            tv.setText("Hola Caracola!!!!");
    
            tv.setTextColor(Color.YELLOW);
    
        }
    }
  8. Ya estamos listos para ejecutar nuestra aplicación. Vamos a ello:Le damos ahí, en la barra superior a ese “Play” verde.La primera vez que ejecutemos nuestra aplicación, nos preguntará como queremos ejecutarla. Le decimos que se trata de una aplicaciónAndroid, y le damos a OK.Si no habíais guardado los ficheros que habíamos modificado, os preguntará si guardarlos, le decís quesi, y os va a arrancar el emulador del teléfono móvil android. Como dijimos en el primer capítulo, tardará un poco más o menos, en función del ordenador que estéis utilizando. Tened paciencia.Esperamos unos segundos y…

NOTA: Es posible que tengáis que primero desploquear el emulador para que salga la ejecución de la aplicación, en mi caso tengo que desplazar un candado hacia la derecha

Ahí está. Vuestra primera aplicación Android funcionando!