Como siempre que se desarrolla una aplicación tenemos que tener en cuenta tanto las funcionalidades como el aspecto gráfico. Después de pensar y revisar las opciones gráficas disponibles optaremos por crear una aplicación con pestañas (TabHost). [tweetmeme]

¿Qué es esto?

Éste tutorial muestra cómo crear una aplicación con 3 pestañas (TabWidget) en un TabHost.

¿Qué voy a aprender?

• Utilizar XML para crear el aspecto gráfico de una aplicación.
• Modificar el AndroidManifest.
• Crear una aplicación con 3 pestañas en las que cada una de ellas tiene su propio XML.
• Guardar la pestaña activa para mostrarla cuando volvamos a abrir la aplicación.
  
• Utilizar los recursos Drawable y Strings.

¿Cómo quedará?

Pasos a seguir:

Empezaremos con una visión global de lo que necesitamos. Para empezar necesitamos que nuestra Activity principal extienda la clase TabActivity. Ésta clase es la que nos permitirá añadir pestañas a nuestra aplicación. La razón por la que utilizamos pestañas es para mostrar los datos y opciones de una manera mucho más limpia, por lo tanto, vamos a intentar hacerlo de la manera más limpia posible.

Lo primero es crear el XML de la Activity principal que es donde alojaremos nuestras pestañas. Fijaros que el componente principal es un TabHost y dentro de el colocaremos un LinearLayout donde colgaremos cada una de las pestañas y un FrameLayout donde aparecerá el contenido de cada pestaña. De ésta manera el TabHost es quien se encargará de gestionar el movimiento entre pestañas.

main.xml:

< ?xml version="1.0" encoding="utf-8"?>

<tabhost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<linearlayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<tabwidget android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:background="#f048"
android:layout_height="68dip"
android:paddingLeft="1dip"
android:paddingRight="1dip"
android:paddingTop="4dip" />

<framelayout android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" />

</linearlayout>

</tabhost>

Para el propósito de éste tutorial no vamos a crear pestañas con muchos contenidos, pero cabe decir que como cada pestaña tiene su propio XML dentre de ellos podríamos poner cualquier componente, como ya veréis en entradas futuras. Por ahora vamos a crear 3 pestañas iguales donde mostraremos un texto diferente en cada una de ellas.

tab1.xml:

< ?xml version="1.0" encoding="utf-8"?>

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/settings"
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/tab1_content"
/>
</linearlayout>

Como podéis ver en el campo android:text del TextView indicamos que veremos el contenido de la variable tab1_content que se encuentra dentro del recurso string. Dentro de la carpeta res/values encontraréis el strings.xml, éste recurso se utiliza para guardar todas las variables de texto constantes de la aplicación. La finalidad del recurso values no se limita simplemente a los string, se pueden crear tantos ficheros como se quiera y guardar los valores que necesiteis: meses de una año, dias de la semana, valores numéricos, etc…

strings.xml:

< ?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, MainActivity!</string>
<string name="app_name">TabHost - mobiledev</string>
<string name="tab1">Tab 1</string>
<string name="tab2">Tab 2</string>
<string name="tab3">Tab 3</string>
<string name="tab1_content">Esto es el contenido de la pestaña 1</string>
<string name="tab2_content">Esto es el contenido de la pestaña 2</string>
<string name="tab3_content">Esto es el contenido de la pestaña 3</string>
</resources>

Bien, ya tenemos los XML  creados, ahora sólo falta que la aplicación los muestre. Para ello vamos al código de la Activity principal, desde allí vamos a llamar a 3 funciones que se encargarán de añadir las pestañas al TabHost. También añadiremos el icono a cada pestaña, normalmente se guardan dentro de res/drawables. Ése es el recurso donde se guardan los iconos o imágenes que necesitaremos en la aplicación.

MainActivity.java:

/*
* Pestaña 1
*/

private void añadirTab1() {

Intent intent = new Intent(this, Tab1.class);

TabSpec spec = mTabHost.newTabSpec(TAG_TAB_1);
spec.setIndicator(mResources.getString(R.string.tab1), mResources
.getDrawable(R.drawable.tab1));
spec.setContent(intent);

mTabHost.addTab(spec);
}

Hemos creado 3 nuevas clases, una para cada pestaña. Hasta el momento tenemos los recursos visuales, hemos añadido las 3 pestañas al TabHost pero falta indicar a cada pestaña que debe mostrar su contenido. Como sólo vamos a mostrar un texto la clase Tab sólo extenderá Activity (que es la actividad básica de Android), pero no habría problema en extender cualquier otra clase existente.

Tab1.java:

package com.mobiledev;

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

public class Tab1 extends Activity{

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

Parece que ya lo tenemos todo, el aspecto visual, las clases que utilizaremos pero falta una última cosa por hacer. Cada vez que añadamos una nueva clase al Proyecto debemos indicarselo al AndroidManifest. El manifesto provee información esencial sobre la aplicación que el sistema debe tener antes de ejecutar el código de la aplicación, también es el encargado de indicar los permisos que tienen las clases para acceder a las diferentes API. Aquí es donde tenemos que indicar que nuestra aplicación tiene 3 clases más.

AndroidManifest.xml:

< ?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.mobiledev"
android:versionCode="1"
android:versionName="1.0">
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".MainActivity"
android:label="@string/app_name">
<intent -filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent>
</activity>
<activity android:name="Tab1" android:label="@string/tab1"></activity>
<activity android:name="Tab2" android:label="@string/tab2"></activity>
<activity android:name="Tab3" android:label="@string/tab3"></activity>
</application>
<uses -sdk android:minSdkVersion="3" />
</manifest>

Ahora si, ya estamos listos para ejecutar la aplicación.

Código fuente: [tweetmeme]

download: TabHost (53.36KB) added: 30/10/2009 clicks: 1478 description: Ejemplo de utilización de un TabHost con 3 pestañas, cada pestaña con su propia Activity y XML.

Entradas relacionadas:

1. Primeros pasos con Android
2. Creando la primera aplicación con Android
3. Ciclo de vida de una Activity (Lifecycle)

Toda Activity sigue un ciclo, el paso entre ésos estados se pueden deber a la ejecución de código o a la intervención del usuario. Como veremos a continuación, hay estados destinados a realizar algunas acciones y algunas que, simplemente, no usaremos nunca. Cabe decir que, pese a que no introduzcamos nada de código en esos estados, la Activity sigue pasando por ellos.

Una Activity es una única y focalizada cosa que el usuario puede hacer. Casi todas las Activity interactuan con el usuario asi que ellas mismas se encargan de crear una ventana para colocar la UI. Android maneja las Activity creadas como una pila, cuando una nueva Activity se crea, se coloca en lo más alto de la pila y se convierte en la Activity en curso – la Activity anterior permanece justo debajo y no volverá al frente hasta que la nueva Activity acabe.

Veamos cada estado más detalladamente:

Para más información: Android Developers [tweetmeme]

Entradas relacionadas:

1. Diseñando la aplicación, uso de TabHost en Android
2. Creando la primera aplicación con Android
3. Primeros pasos con Android

Vamos a empezar la andadura en el desarrollo con Android, antes de nada lo primero que debemos hacer revisar los Requisitos del Sistema. Parace muy trivial pero nunca está de más.

A la hora de desarrollar podemos utilizar diferentes entornos IDE, hasta el momento la mejor combinación que se puede recomendar es Eclipse + Android D

evelopment Tools (ADT). Éste último componente es el plugin que se encarga de añadir a Eclipse las funcionalidades necesarias para el desarrollo de aplicaciones Android. Si necesitas descargar Eclispe puedes hacerlo desde aqui: (Se recomienda la version Java o RCP) [tweetmeme]

http://www.eclipse.org/

Instalando el SDK

Antes de instalar el SDK hay que descargarlo, en éste en enlace encontraréis el archivo comprmido.

Una vez descargado el archivo descomprimirlo a una carpeta, para poder empezar a utilizarlo sólo queda configurar las rutas y añadir el plugin para Eclipse.

• En Linux, edita el archivo ~/.bash_profile o ~/.bashrc.  Buca una línea que establece la variable de entorno PATH y añade la ruta completa del directorio tools/ a la misma. Si no aparece una línea de ajuste de la ruta, puedes añadir una:
  export PATH=${PATH}:<directorio_sdk>/tools
• En un Mac, busca el arhivo .bash_profile en tu directorio home y haz lo mismo que en Linux. Puedes crear el archivo .bash_profile si todavia no tienes uno configurado en tu máquina.
• En Windows, boton derecho en Mi Pc, selecciona Propiedades. En la pestaña de Avanzado haz click en Variables de Sistema, y en el diálogo que aparece haz doble-click en Path (debajo de Variables del Sistema). Añade el path absoluto al directorio tools/.

Cabe destacar que si en un futuro quieres actualizar la versión del SDK hay que volver a configurar el path al directorio tools del nuevo SDK y substituirlo por el anterior.

Instalando el plugin ADT para Eclipse

Ahora modifica las preferencias de Eclipse para apuntar al directorio del Android SDK:

1. Selecciona Window > Preferences… para abrir el panel de Preferencias (Mac: Eclipse > Preferences).
2. Selecciona Android en el panel izquierdo.
3. En la parte de SDK Location, haz click en Browse… y busca el directorio del SDK.
4. Click en Apply y OK.

Llegados a éste punto ya estamos preparados para empezar a desarrollar, en la siguiente entrada veremos un ejemplo del clásico “Hello World” para empezar a familiarizarnos con el lenguaje.

Entradas relacionadas:

1. Diseñando la aplicación, uso de TabHost en Android
2. Cómo instalar el teclado del HTC Hero en el HTC Magic
3. Creando la primera aplicación con Android