Un ejemplo básico de aplicación para Android

Vamos a ver los pasos básicos para crear una aplicación para un smartphone o tablet Android. Daré por sentado que ya está instalado el JDK, Eclipse y el SDK de Android. Si no fuera así, puedes seguir estos pasos.

Para llegar a algún sitio, primero conviene saber lo que buscamos. En nuestro caso, vamos a hacer ua aplicación que tenga algún botón, alguna casilla para introducir texto y alguna etiqueta de texto. Si queremos que, además de usar componentes básicos, sirva para algo útil, podemos orientarla por ejemplo a un programa de realización de sumas sencillas, pensado para niños de corta edad.

Podemos hacer un prototipo con alguna herramienta de diseño, como "The Pencil Project", que nos ayude a planificar el diseño que buscamos. Podría ser así:

Prototipo

En primer lugar, deberemos abrir Eclipse y crear un nuevo proyecto:

1

Obviamente, deberá ser un proyecto de Android:

2

Se nos preguntará el nombre de la aplicación y las versiones de Android de destino y de compilación:

3

Yo compilaré para la 2.2:

4

Y esta aplicación tendrá una única "Activity" (una "ventana"), a partir del patrón para "Actividad en blanco":

5

Obtendremos un esqueleto de aplicación básica:

6

Que podríamos ejecutar para comprobar que todo está instalado correctamente:

7

Si todo ha ido bien, podemos usar este esqueleto, borrar ese texto de ejemplo, y añadir dos etiquetas de texto grande ("Large text") y una casilla de texto ("Text field") que permita introducir valores numéricos:

8

Y finalmente, un botón:

El fichero XML que corresponde a la descripción de esa ventana (activity) tendrá posiblemente algunos avisos (warnings), que nos digan que dejar los textos de los botones y los "textView" prefijados no es una opción muy elegante. Como somos novatos, lo dejaremos así por ahora.

10

Aun así, seguiremos adelante y modificaremos el "text" de esos textView, para que muestren dos números, por ejemplo "5" y "3":

11

Y lo mismo para el botón, al que pondremos el texto "Comprobar":

12

Si volvemos a la vista en modo gráfico, la aplicación debería estar quedando así:

13

Llega el momento de añadir comportamientos. Tenemos que hacer que el botón responda a pulsaciones por parte del usuario, y que lance una cierta función. Una forma sencilla de hacerlo, aunque un tanto "artesanal", es modificar el fichero XML para añadir android:onClick="comprobarRespuesta" (o el nombre que queramos dar a la función que se va a llamar cuando se pulse el botón... y que todavía no hemos creado).

14

Ahora deberíamos abrir el código fuente del programa, para añadir esa función "comprobarRespuesta", así como los demás datos que sean necesarios (atributos, alguna otra función -método- auxiliar, etc). Lo podemos hacer desde la ventana de la izquierda, el "Package Explorer". Estará en la carpeta "src", y en nuestro caso se llamará "Sumas.java":

15

Deberiamos añadir algunos atributos (variables): dos números enteros, que generaremos al azar, y el resultado de su suma. También tendremos un generador de números aleatorios (Random):

6

Posiblemente la línea de "Random" se nos marcará en rojo, porque nos faltará una orden "Import"; no es un gran problema, basta acercarnos a la palabra Ranom y se desplegará una serie de posibles soluciones, la primera de las cuales será añadir el "Import Random":

17

Ahora podemos crear una función "generarNumeros", que cree el objeto Random (el generador de números aleatorios) y que genere dos números al azar entre 0 y 5. Podemos llamar a esta función también desde el final de "onCreate":

18

Para comprobar que está funcionando, podemos hacer que se nos muestren esos valores, cambiando el texto de los textView. Usaríamos construcciones como:

TextView tv1 = (TextView)findViewById(R.id.textView1);
tv1.setText( ""+n1 );

 

19

Nuevamente, se nos puede marcar en rojo ciertas líneas, para indicar que no hemos detallado lo que es un "TextView", pero si acercamos el ratón se nos propondrá el Import corespondiente.

Podemos volver a lanzar nuestra aplicación, que ahora ya debería mostrar una apariencia mucho más cercana a la final, con dos números generados al azar:

20

Si todo ha ido bien, podemos completar el código fuente.

La función "generarNumeros" está casi completa. Sólo falta


void generarNumeros() {
    generador = new Random();
    n1 = Math.abs(generador.nextInt() % 6);
    n2 = Math.abs(generador.nextInt() % 6);
    resultado = n1 + n2;
    TextView tv1 = (TextView)findViewById(R.id.textView1);
    tv1.setText( ""+n1 );
    TextView tv2 = (TextView)findViewById(R.id.textView2);
    tv2.setText( "+ "+n2 );
    EditText ed1 = (EditText)findViewById(R.id.editText1);
    ed1.setText( "" );
}

Por otra parte, la función "comprobarRespuesta" (la que se llamará al pulsar el botón) debería comprobar si el número que se ha tecleado en la casilla coincide con el número que se había generado al azar, mostrará un aviso (usando un "AlertDialog") que nos siga si hemos acertado o no (ya que es un juego para niños, en vez de texto podrían ser los iconos ":-)" o ":-(". Finalmente, deberá volver a generar números:

    
public void comprobarRespuesta(View v) {
    EditText ed1 = (EditText)findViewById(R.id.editText1);
    String respuesta = ":-(";
    try {
        int valor = Integer.parseInt ( ed1.getText().toString() );
        if (valor == resultado)
            respuesta = ":-)";
    }
    catch (NumberFormatException e) {
       
    }
    AlertDialog ad = new AlertDialog.Builder(this).create();
    ad.setCancelable(false); // Para no mostrar el botón de cancelar
    ad.setMessage( respuesta );
    ad.setButton("Volver", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialog, int which) {
            dialog.dismiss();                    
        }
    });
    ad.show();
    
    generarNumeros();
}

Y podemos volver a lanzar el programa. Si hacemos clic en la casilla de texto, aparecerá un teclado numérico:

21

Y si introducimos la respuesta correcta y pulsamos el botón "Comprobar", una carita sonriente debería decirnos que lo hemos hecho bien:

22

Por supuesto, podemos equivocarnos...

23

Y entonces la cara debería ser triste:

24

Es todo por hoy. ¡A seguir experimentando! ;-)