Nuestra primera aplicación (1era Parte)

Ya viene siendo hora de ponernos a programar. Soy de los que piensa que en la práctica es donde mejor se aprende la teoría por lo que hoy vamos a hacer una pequeña aplicación donde aplicaremos lo visto en artículos anteriores y algunas cosas nuevas. Nuestra primera aplicación lo único que hará es tener un botón que al hacer clic cambie su texto.

Lo primero que haremos es abrir el eclipse. Yo usaré la versión Indigo. Una vez abierto el eclipse crearemos una nueva aplicación para esto vamos a File > New > Android Project nos saldrá un cuadro donde pondremos el nombre de nuestra aplicación. Yo le llamaré Primera App. Luego deberemos seleccionar para qué versión de Android haremos nuestra aplicación. Esta selección es importante pues la versión que seleccionemos significará que será la versión mínima de Android que debe tener la aplicación que crearemos. En estos artículos usaremos la versión 2.2 por ser una de las más usadas.

Después de haber seleccionado la versión, entonces nos tocará seleccionar el nombre del paquete. En nuestro caso pondremos el siguiente: softpei.app. También debemos seleccionar el nombre de nuestra Activity. No hemos explicado qué es un Activity, pues llegó el momento: un Activity no es más que el componente principal de la interfaz gráfica. Viene siendo como la ventana en cualquier lenguaje visual. En nuestro caso seleccionaremos como nombre de nuestro Activity el de PrimeraActivity.

Con esto ya hemos creado los parámetros iniciales de nuestra aplicación. Ahora nos dedicaremos a la parte visual de la aplicación. Como vimos en el artículo Conociendo la estructura de un Proyecto Android, para ver el XML que representará la interfaz visual de nuestra Activity vamos a la carpeta res > layout. Ahí tendremos el fichero main.xml que por defecto tendrá el siguiente código:

<?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>

Aquí podemos ver que por defecto el Layout es linear con una orientación vertical y dentro hay un texto que tiene como valor lo que está en la variable hello.

Nosotros le haremos a esto unos pequeños ajustes, y es que quitaremos ese texto y pondremos un botón; entonces el código quedará así:

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

Aquí vemos que el texto del botón tiene un valor escrito en el fichero por lo que, como vimos en Los textos en Android es importante poner todos nuestros textos en el fichero strings.xml por lo que vamos a crear una variable en este fichero de nuestra aplicación para asignárselo al texto del botón creado. Nuestro fichero de textos quedaría así:

<resources>

    <string name="hello">Hello World, PrimeraActivity!</string>
    <string name="app_name">Primera App</string>
    <string name="texto_boton">Aceptar</string>

</resources>

Ahora procedemos a modificar el valor del botón por la variable creada, por lo que el main.xml quedará así:

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/texto_boton" />

Bueno ya tenemos la parte visual casi lista. Solo nos quedaría crear también un texto para cuando hagamos clic sobre el botón, para esto creamos otra variable en el fichero strings.xml:

<string name="texto_boton_clickeado">Botón Clickeado</string>

Con esto ya hemos terminado la parte visual, ahora nos quedará la lógica pero esto lo veremos en un próximo articulo.