Como programar en Android: Guia 1

Hace poco he empezado a interesarme por el desarrollo de aplicaciones en Android motivado por la necesidad de cierta utilidad para mi Nexus One que, tras buscar en el Android Market, no encontré. Como no tengo experiencia con el lenguaje de programación Java, y tampoco tiempo ni ganas de estudiar más libros de sintaxis, Apis y Frameworks, decidí aprender a lo bruto: dandome directamente cabezazos contra el teclado, previa búsqueda por google claro.

Finalmente creo que he reunido algunos conocimientos para escribir una guia que me sirva para recordar lo aprendido en el futuro, y de paso tambien a aquellos de vosotros que lo necesiteis. Así pues, empezamos con la Guia 1.

¿Qué vamos a hacer?


En la primera guía vamos a hacer el clásico “Hola Mundo”, como no podría ser de otra manera.

Paso 1 – Instalar el SDK de Android


Dependiendo de tu sistema operativo, la instalación puede ser diferente. En mi caso estoy empleando como IDE Eclipse para Mac en Inglés. No voy a describir el proceso de instalación del SDK de Android porque hay miles de tutoriales… en su momento yo seguí el oficial y es muy completo, esta aqui: http://developer.android.com/sdk/installing.html

Paso 2 – Crear un nuevo proyecto


Una vez con Eclipse instalado, vamos a generar un nuevo proyecto que nos servirá de base para todas las guias que voy a hacer aquí. En eclipse vamos a File / New / Other… y en la ventana que se abre elegimos Android / Android Project, pulsamos Next y completamos los campos:

Project name: “TolkienLibrary” Será el nombre de nuestro proyecto.

Application name: “Tolkien Library” Nombre de la aplicación una vez instalada.

Package name: “com.example.tolkienlibrary” Namespace de nuestro proyecto.

Create Activity: “TolkienLibrary” Nombre de la actividad en el dispositivo.

Min SDK Version: “3” Version mínima para ejecutar la aplicación.

y pulsamos Finish.

Paso 3 – Estructura del proyecto


Ahora podemos estudiar brevemente la estructura que nos ha generado Eclipse para nuestro nuevo proyecto, vemos las siguientes carpetas:

src: contiene el código fuente de nuestra aplicación.

gen: ficheros generados por la aplicación Java.

Android: carpeta que contiene las librerias de Android.

Assets: carpeta de recursos de nuestra aplicación, por ejemplo ficheros HTML para navegación offline, ficheros de bases de datos, etc. Se comporta como una carpeta del sistema, así que puede ser listada, etc.

res: carpeta de recursos, dividida en subcarpetas, cada una con un proposito distinto.

res/drawable: imagenes para la aplicación.

res/layout: ficheros XML que definen la interfaz de usuario de nuestra aplicación o Vistas.

res/values: puede contener varias cosas, en este momento solo tenemos strings.xml, un fichero donde especificamos las cadenas de texto que vamos a mostrar en nuestra interfaz, para que sea facil cambiarlas o localizarlas.

AndroidManifest.xml: este fichero es muy importante, porque contiene información de la aplicación que el dispositivo necesita para iniciarla una vez instalada.

Paso 4 – Conocer el AndroidManifest.xml


Como señalaba en el paso anterior, conocer el archivo de manifiesto es muy importante, si abrimos el que tenemos ahora mismo con un editor XML o desde la vista de XML de Eclipse, vemos que contiene lo siguiente:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.example.tolkienlibrary"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".TolkienLibrary"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
    <uses-sdk android:minSdkVersion="3" />
</manifest> 

Lo primero que hace es indicar el namespace de nuestra aplicación (package), y la versión de código y aplicación (versionCode y versionName) que son importantes para cuando vayamos a realizar actualizaciones de nuestra aplicación en el Market, versionCode sin embargo solo nos permite conocer que version de código estamos manejando durante el desarrollo, por lo que simplemente habría que aumentarlo en 1 cuando hagamos una Release.

Despues se indican el icon de la aplicación (que vemos que esta extrayendo de la carpeta de res/drawable) y el app_name, o nombre de la aplicación, que está sacando de res/values/strings.xml. Estos campos son obligatorios.

Dentro del elemento aplicación, debemos declarar las Actividades que nuestro código implementa. Este paso es muy importante, si no se declaran el dispositivo mostrara una excepción y la aplicación no funcionará. Para cada Activity se define al menos el nombre mediante android:name=”.TolkienLibrary” en nuestro caso, que corresponde al nombre de nuestra actividad anteponiendo un punto. Además, dentro del elemento Actividad, vemos que se define el subelemento <intent-filter> que nos permite indicar que esta va a ser la Actividad que el dispositivo debe arrancar al inicio de la aplicación.

Paso 5 – Nuestro código fuente


Vamos a la carpeta src y desplegamos hasta encontrar TolienLibrary.java y lo abrimos. Vemos lo siguiente:

package com.example.tolkienlibrary;

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

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

En este punto hay que tener en cuenta lo siguiente: estamos trabajando con un patrón MVC (Modelo-Vista-Controlador). En Android, cada pantalla que el usuari puede ver de nuestra aplicación (o Vista) se conoce como Layout. Cada Layout (y los eventos que en él se producen, valor de cada uno de los campos que lo componen, etc) está controlado por una Actividad. Así pues, es en las actividades donde debemos capturar los eventos del ciclo de vida de un Layout y realizar las operaciones pertinentes.

En la el código anterior podemos ver que Eclipse nos ha generado una clase “TolkienLibrary” que implementa una Actividad (clase Activity). En el evento onCreate de esta Actividad se llama al evento de la clase padre y después se establece el layout que va a mostrar esta Actividad mediante setContentView(R.layout.main); a partir de un Layout definido en nuestros ficheros de recursos, y cuyo identificador es main.

Paso 6 – El Layout

En el paso anterior hemos visto que la Actividad esta indicando la vista o Layout que va a motrar, y que obtenia mediante R.layout.main.

Este identificador indica que se trata de un Layout de nuestra colección de recursos (R) y que se llama main. Entonces, segun vimos en la estructura de nuestra aplicación en el Paso 3, vamos a la carpeta de recursos en res/layout/ y efectivamente nos encontramos con el layout main.xml.

Si hacemos doble click en el archivo, se abrirá el editor gráfico, que personalmente no me gusta, así que vamos a la vista XML (en la parte inferior de la ventana, junto a Graphical Layout), y observamos su contenido.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
</LinearLayout>

Vemos que contiene dos elementos: LinearLayout y TextView.

En este momento no voy a dedicar mucho tiempo a explicar los distintos Widgets que pueden incluir las vistas, en el Blog de Ubicuos teneis un post muy atractivo para un primer contacto.

Tan solo decir que LinearLayout es un contenedor que mostrará los componentes que contiene alineados uno detrás de otro, y sus parametros indican que ocupará toda la pantalla y que la alineación se hará verticalmente. LinearLayout contiene un TextView que muestra un texto, y que este texto está siendo extraido de otro fichero de recuros, el que contiene las cadenas localizadas: strings.xml.

Esto se hace mediante @string/ para indicar que vamos a buscar el el fichero de cadenas localizadas string.xml, seguido de hello, que es la clave de la cadena que deseamos mostrar en este TextView.

Paso 7 – Fichero de cadenas localizadas Strings.xml

Para abrir el fichero vamos a res/values/strings.xml y vemos que se trata de una colección de “claves/valor” para nuestras cadenas localizadas.

La cadena que estabamos usando en el Layout del paso anterior tenia la clave hello, y si hacemos clic en ella, a la derecha nos aparece su contenido:

Name: “hello” es la clave

Value: “Hello World, TolkienLibrary!” es el valor que se mostrará al referirse a esta clave.

Vamos a cambiar el mensaje “Hello World, TolkienLibrary” por “Hola Arda!”

Ademas de este cambio, tambien resulta igual de sencillo crear nuevas claves o eliminarlas, mediante los botones Add y Remove, o directamente editando el contenido xml del fichero.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hola Arda!</string>
    <string name="app_name">Tolkien Library</string>
</resources>

Paso 8 – Ejecutar el proyecto

Pues con esto hay tendriamos nuestro particular Hola Mundo (en este caso Hola Arda, un mundo mucho más épico que el nuestro, dónde va a parar), preparado para ejecutarse, tan solo vamos a Run/Run y elegimos AndroidApplication en la ventana que aparece.

Esto lanzará el emulador que hayamos configurado durante la instalación de Eclipse, y veremos algo como esto:

Paso 9 – Futuras guías…

Esta primera guía era una simple toma de contacto con un proyecto de Android en Eclipse, en futuras guias veremos más cosas que nos permitirán desarrollar aplicaciones más ricas (que por otro lado… no es dificil superar lo que tenemos hecho hasta ahora ).

Guia 1 – Hola Mundo en Android.

Guia 2 – Navegación entre Layouts con un botón, y paso de parámetros.

Guia 3 – ListView o listas con scroll.

Guia 4 – ListView ricas con celdas personalizadas e imágenes.

Guia 5 – Acceso a base de datos (SQLLite).

12 Comments / Add your own comment below

  1. Increíble comienzo!. Espero que tardes poco en poner los siguientes!! Ánimo!!

  2. Deseando estoy de leer los siguientes

  3. Cuando se publican las proximas guias o donde se puede consultar informacion parecida?

  4. Hola Camilo,

    esta serie estaba planteada como 5 guías para mostrar las bases de la navegación entre actividades, consulta de base de datos y mostrar elementos en una lista.

    Próximamente publicare más guías con distintos propósitos.

    Si estás interesado en alguna en particular no dudes en proponerlo :)

  5. Pingback: Como programar en Android: Guia 4

  6. Hola compañero, muchas gracias por esta gran guia.
    Sólo una cosa, estoy intentando acceder a la parte 2 (guía 2) y me dice que no existe.

    Muchas gracias.

  7. Compañero José Antonio, si sigues este enlace irás a la guia 2. A mí también me pasaba que no la encontraba con el enlace.
    Suerte.
    http://blog.findemor.es/2011/01/como-programar-en-android-guia-2/#comments

  8. Pingback: Como programar en Android: Guia 2

  9. Pingback: Como programar en Android: Guia 3

  10. Muchas gracias a ambos por el aviso. Ya he arreglado el problema con ese enlace.

    Un saludo!

  11. Pingback: Como programar en Android: Guia 5

  12. Pingback: Buena guia en español para empezar a programar en Android | Blog de Jorge Galindo Cruces

Leave a Reply

Your email address will not be published. Required fields are marked *