Como crear pestañas (tabs) en independientes activities

Objetivo:

Crear un TabHost que contenga tabs (pestañas) independientes; es decir, que cada una sea una Activity diferente.

En las situaciones en las que nos conviene independizar cada cuerpo de las tabs en activities diferentes, podemos crear el TabHost y añadir las tabs a la vez que señalamos que en caso de necesitar aparecer, el contenido se extraiga de la activity que especifiquemos.

Vamos a crear una mini-aplicación con tan solo dos tabs. Se necesitarán tres actividades: la principal (contiene TabHost), y una por cada contenido del tab (es decir, dos). También necesitaremos tres ficheros XML, dado que son tres actividades independientes.

Vemos un par de capturas de la mini-aplicación:

TutorialAndroid - Tabs en activities independientes1TutorialAndroid - Tabs en activities independientes2
Y a continuación mostramos el texto comentado:

Código fuente Java (Container.java):

[sourcecode language=”java”]
package tabsdiferentesactividades.tutorialandroid.com;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;

public class Container extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//creamos el contenedor de Tabs
TabHost host = getTabHost();
//Añadimos cada tab, que al ser pulsadas abren sus respectivas Activities
host.addTab(host.newTabSpec("tab_1").setIndicator("TAB1").setContent(new Intent(this, Tab1Activity.class)));
host.addTab(host.newTabSpec("tab_2").setIndicator("TAB2").setContent(new Intent(this, Tab2Activity.class)));
}
}
[/sourcecode]

Código fuente Java (Tab1Activity.java):

[sourcecode language=”java”]
package tabsdiferentesactividades.tutorialandroid.com;

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

public class Tab1Activity extends Activity {

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tab1);
}
}
[/sourcecode]

Código fuente Java (Tab2Activity.java):

[sourcecode language=”java”]
package tabsdiferentesactividades.tutorialandroid.com;

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

public class Tab2Activity extends Activity {

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tab2);
}
}
[/sourcecode]

Código fuente XML (main.xml):

[sourcecode language=”xml”]
<?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>
[/sourcecode]

Código fuente XML (tab1.xml):

[sourcecode language=”xml”]
<?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="Estamos en la tab 1. \n by TutorialAndroid.com" />
</LinearLayout>
[/sourcecode]

Código fuente XML (tab2.xml):

[sourcecode language=”xml”]
<?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="Estamos en la tab 2. \n by TutorialAndroid.com" />
</LinearLayout>
[/sourcecode]

En los próximos posts explicaremos como dar un diseño a nuestras pestañas, y cómo crear un TabHost con tabs en una misma actividad, para casos simples donde no necesitamos independencia.

Descárgate el código aquí

17 comentarios en “Como crear pestañas (tabs) en independientes activities

  1. tengo Una Duda, ¿por que a la hora de correr tu archivo en el emulador de android de la pc no corre? pero lo ejecute en el mobil y ahi si funciono.

  2. hice mi version de ese ejemplo no marca errores al compilar pero a la hora de correr en el Emulador aparece este error:
    “The application MainProyecto (Process mi.paquete) has stopper unexpectedly. Please Try Again “

  3. hola !!! quisiera saber como puedo pintar los tabs , o sea, el cuadrado q dice Tab1 y Tab2!!! por mas q he buscado no he encontrado como hacerlo :( ojala me puedan responder …..gracias de antemano :)

  4. Buenas Gabriel,
    para el fin de semana tengo preparado un post completo sobre cambiar color a las pestañas de las tabs (donde pone Tab1 y Tab2), por lo que te recomiendo subscribas a nuestro boletín para recibirlo de primera mano.
    Aún así te adelanto algo:

    – Si quieres cambiar al color blanco, por ejemplo, la tab actual (la que está usandose):
    tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).
    setBackgroundColor(Color.parseColor(“#ededed”));

  5. ¡Muchas gracias!

    Funciona perfectamente, olvidé declarar las actividades en el AndroidManifest, pero gracias al comentario lo he hecho y va perfecto.

    Era justo lo que estaba buscando.

    Me subscribo!

    Un saludo

Responder a jorge Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *