Comenzamos el tercer artículo de la serie donde por fin empezaremos a crear la App. La semana pasada dejamos todo el entorno de programación preparado, si tuvisteis algún problema en la instalación o configuración de Eclipse comentádmelo en los comentarios del artículo anterior o en Twitter.

¿Qué veremos en este artículo?

• Creación de un nuevo proyecto.
• Creación de un icono para la App, con la herramienta Google Assets Studio
• Importación de librerías
• Implantación de Action Bar, para versiones de Android inferiores a ICS.
• Estilo personalizado para la Action Bar

Al final de nuestro artículo este será el aspecto de nuestra App:

Sin más, comienzo con la creación del proyecto. Para ello, tras abrir Eclipse, iremos a  File>New>Android Application Project.  Ahí configuraremos las propiedades del nuevo proyecto.

Ya tendremos creado nuestro proyecto. Si miráis a la izquierda podréis ver como se ha creado una carpeta llamada «MiTiendaAndroid«, que si hacéis doble click en ella podreís ver todas las carpetas que contiene una App Android. Poco a poco sabremos  qué contiene cada una.

El siguiente paso será escoger un icono y añadírselo a la App.  Para ello yo he cogido esta imagen open source de internet. Fijáos que al ser en formato svg le podremos dar la resolución que queramos sin perder calidad 

Pero no podremos insertar la imagen directamente al proyecto. Una App de Android, como sabemos, puede ejecutarse desde en un pequeño dispositivo hasta en una pantalla de televisión, y siempre intentaremos que las imágenes se vean bien en todas las resoluciones. Para ello, los proyectos de Android tienen diferentes carpetas para las imágenes, dependiendo de la resolución de la pantalla donde se mostrará.  Para ello, Google  nos proporciona una herramienta (no conocida por muchos programadores), Android  Asset Studio. Esta herramienta nos  permite adaptar las imágenes a las diferentes resoluciones. La abrimos, pinchamos en Launcher Icon (que nos permite hacer el icono principal de la App). Después pincharemos en la pestaña «Image» y subiremos nuestra imagen. Automáticamente nos generará nuestra imagen en las distintas resoluciones.

Por último pincharemos en Download zip y se nos descargará un archivo comprimido llamado ic_launcher. Para añadirlo al proyecto tendremos que seleccionar la carpeta res que hay dentro, y extraerla en la carpeta de nuestro proyecto (Los proyectos están en la carpeta que teníamos que elegir en el tutorial anterior) Nos preguntará si queremos sobrescribir los archivos, a lo que contestaremos que sí. Volvemos a Eclipse y hacemos doble click sobre nuestro proyecto, y luego en las carpeta res. Podemos ver unas carpetas con el nombre de Drawable seguido de otras letras. Estas son las carpetas donde se almacenan todas las imágenes de nuestro proyecto, para las distintas resoluciones.

El tema de las imágenes y distintas  resoluciones en Android nos daría para un curso completo pero como sabéis, en estos artículos quiero ir a lo básico. Si queréis más información la podéis encontrar en la documentación oficial de Android. Por cierto, esa web, será a partir de ahora vuestra Biblia, si queréis seguir programando en Android.

El siguiente paso de este artículo será crear la ActionBar. ¿Qué es la Action Bar? Actualmente casi todas las Apps de Android la usan, podemos encontrar ejemplos de ella en apps como las de Youtube o Facebook.

Ésta suele contener  el título de la aplicación y/o algunos iconos. Para implementarla habrá que utilizar una librería, ya que la forma que propone Android para incorporar la Action Bar, solo funciona en dispositivos con versiones iguales o superiores a ice cream sandwich. ¿Qué es una librería? Las librerías son proyectos de Android que podremos descargar y adjuntar a nuestro proyecto que nos facilitarán ciertas tareas. Básicamente nos permitirán no tener que «reinventar la rueda» cada vez que queramos incorporar un nuevo elemento.  La que vamos a utilizar se llama ActionBar Sherlock. Y nos permite utilizar la ActionBar en versiones de Android inferiores a la 4.0. Para descargarla nos iremos a su web oficial y pincharemos en el enlace que señala la imagen

La carpeta comprimida que se nos descargará la descomprimiremos en nuestra carpeta de proyectos (o en cualquier otra que queramos). Posteriormente abriremos de nuevo Eclipse y pincharemos en File>Import, pincharemos en «Existing Android Code into WorkSpace» y buscaremos la carpeta que acabamos de descomprimir. Pulsaremos aceptar, y nos aparecerá  debajo de Projects todos los proyectos que contiene la librería. Marcaremos sólo el que pone actionbarsherlock en la pestaña New Project Name y posteriormente pincharemos Finish. A la izquierda de la pantalla junto al otro proyecto nos aparecerá uno nuevo con el nombre Actionbar Sherlock. Pincharemos con el botón derecho del ratón en él, y pulsaremos en properties. Después pulsaremos en la pestaña Android , y comprobamos que esté marcada la casilla «Is Library».

Para añadir esta librería a nuestro proyecto. Iremos a  MiTiendaAndroid pincharemos con el botón derecho y, de nuevo en Properties, y en la pestaña  Android posteriormente. Dentro del apartado Library, pulsaremos en Add y seleccionaremos el proyecto de ActionBar Sherlock. Después pulsaremos en Apply, y después en OK. Ahora sí que vamos a escribir nuestras primeras lineas de código. Iremos a la carpeta res del proyecyo y haremos click con el botón derecho del ratón en ella. Pulsaremos en New>Folder y llamaremos a esta nueva carpeta «drawable«. Haremos click con el botón derecho del ratón en esta recién creada carpeta y pincharemos en New>Android XML File  La llamaremos fondoactionbar y pulsaremos en finish.

Se nos abrirá el archivo, en el que borraremos el código que aparece y copiaremos este:

Me pararé un poco a explicar este primer código. Este archivo utiliza el lenguaje XML.  Este tipo de archivos se utilizan en Android para crear todas las vistas, es decir para crear todo lo relacionado con el diseño de la aplicación.

Este código de comporta de la siguiente manera:

Tras declarar la versión y codificación (es siempre igual, 1ª línea)

Crea una forma, mediante la instrucción <shape A esta le pone 2 propiedades, la primera simplemente explica dónde tiene que encontrar Android la infomación sobre los elementos (es obligatoria en todos los archivos xml que veáis en Android, y siempre es  igual) La segunda especifica que la forma que queremos es un rectángulo. Tras esto cierra la inicialización de shape con >. A partir de ahí y hasta que aparezca el fin de la forma (</shape>) se pondrán todos los elementos que están dentro de ella. En este caso , dentro del cuadrado hemos metido un degradado que va del primer color al segundo (colores en hexadecimal), con un ángulo de 90º. Tras esto, simplemente, cerramos la definición de la forma con (</shape>)

Ahora nos vamos al proyecto y abrimos res>values, y de la misma forma que antes creamos un nuevo archivo xml que se llame themes. Pinchamos en la pestaña que muestra la imagen y borramos el codigo que hay. Tras esto, añadimos el siguiente:

Este código lo explicaré más por encima porque me gustaría más adelante profundizar en los temas y estilos. A grandes rasgos este código lo que hace es crear un tema para el proyecto. Los estilos y temas en Android lo que nos permiten es  separar el contenido del diseño, aplicando una serie de carácteristicas (color,tamaño,posición, etc) comunes a una serie de elementos

Este tema coge características de uno de los que contiene nuestra librería, pero le añade algunos  elementos más.

El siguiente paso será irnos a nuestra actividad principal, que está en la carpeta src>com.example.mitiendaandroid y abrimos el archivo MainActivity.java. Aunque más adelante comprendemos mejor el concepto de actividad en Android, se podría definir como cada  «pantalla» de la aplicación. A su vez cada activity lleva asociada un layout, que es un archivo en xml que contiene el diseño de esa  «pantalla».  Dentro de MainActivity.java deberemos borrar el código existente y poner este (poco a poco conoceréis la función de cada parte del código):

package com.example.mitiendaandroid;

import android.os.Bundle;

import com.actionbarsherlock.app.SherlockActivity;
import com.actionbarsherlock.view.Menu;
import com.actionbarsherlock.view.MenuInflater;

public class MainActivity extends SherlockActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}

	@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getSupportMenuInflater();
        inflater.inflate(R.menu.main, menu);
        return true;
    }

}

Por último nos faltaría editar el AndroidManifest (que en siguientes tutoriales explicaré su función), añadiendo esta línea:

Para terminar el artículo, pincharemos el siguiente botón y se nos abrirá un emulador corriendo nuestra App.

Si todo ha salido bien, éste será el aspecto que tendrá nuestra App.

Muy poco a poco, pero vamos cogiendo velocidad en la creación de la App. El artículo de hoy es uno de los más pesados, pero poco a poco vamos a ir creando todos los elementos, que ya veréis que no es nada difícil. Cualquier mínima duda o sugerencia la atenderé sin problema. Y agradeceré todos vuestros comentarios.