Como crear pestañas (tabs) en independientes activities

14 diciembre, 2011 por Gonzalo de Córdoba Dejar una respuesta »

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):

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)));
    }
}

Código fuente Java (Tab1Activity.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);
	}
}

Código fuente Java (Tab2Activity.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);
	}
}

Código fuente XML (main.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>

Código fuente XML (tab1.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>

Código fuente XML (tab2.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>

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í

Publicidad

17 comentarios

  1. Gabo dice:

    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. ¿Que error te da? Recuerda que debes añadir todas las activities al Manifest de la aplicación.

  3. Luis dice:

    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 “

  4. Buenas Marcela,

    ¿Que error te lanza al importar TabActivity?
    ¿Que versión objetivo tienes seleccionada? (1.5, 1.6, …)

    Saludos!

  5. Gabriel dice:

    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 :)

  6. 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”));

  7. Eduardo Arévalo dice:

    Gracias Amigo, era exatamente esto que estaba buscando hce rato.. Felicidades y gracias.

  8. jorge dice:

    Uffff muchas gracias me sacaste de puros,, mejor explicado imposible !!

  9. Marta dice:

    a mí me dice en el eclipse que la librería TabActivity está obsoleta, he mirado por ahí que ahora se usa ViewPager

  10. Finally dice:

    ¡Buf! ¡Por fin consigo que me vaya un tutorial de pestañas!
    ¡Muchas gracias!

  11. Jose dice:

    ¡ME FUNCIONÓ!. Voy a ver cómo añadir los cambios a cada pestaña que propones.

    Muchas gracias.

  12. Ivan dice:

    Gracias Amigo

  13. Orosia dice:

    ¡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

  14. Freddy dice:

    Hola, cómo le puedo cambiar el color a las tabs?

Responder a Gonzalo de Córdoba

Rellena el captcha please!! *

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies