Ramón González: Crear Tab Bar en Android

Ingeniería de Dispositivos Móviles
Laboratorio: Publicación 14

Lo primero que tenemos que hacer, después de haber creado ya un proyecto para Android, es modificar nuestro archivo main.xml, ubicado en la carpeta res > layout.

Aquí es donde decimos como irá la estructura de los componentes.

	<?xml version="1.0" encoding="utf-8"?>
	<TabHost
	android:id="@android:id/tabhost"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	xmlns:android="http://schemas.android.com/apk/res/android">

	<LinearLayout
	android:layout_width="match_parent"
	android:id="@+id/linearLayout1"
	android:layout_height="match_parent"
	android:orientation="vertical">

	<TabWidget
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:id="@android:id/tabs">
	</TabWidget>

	<FrameLayout
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:id="@android:id/tabcontent">
	</FrameLayout>
	</LinearLayout>
	</TabHost>

view raw main.xml hosted with ❤ by GitHub

Este el el archivo principal de la aplicación y es el que en primera instancia crea los componentes a mostrar en pantalla cuando se ejecuta la aplicación.

	package com.test.app;

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

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

	TabHost tabHost = getTabHost();
	TabHost.TabSpec spec;
	Intent intent;

	intent = new Intent().setClass(this, FirstActivity.class);
	spec = tabHost.newTabSpec("First").setIndicator("First")
	.setContent(intent);
	tabHost.addTab(spec);

	intent = new Intent().setClass(this, SecondActivity.class);
	spec = tabHost.newTabSpec("Second").setIndicator("Second")
	.setContent(intent);
	tabHost.addTab(spec);

	intent = new Intent().setClass(this, ThirdActivity.class);
	spec = tabHost.newTabSpec("Third").setIndicator("Third")
	.setContent(intent);
	tabHost.addTab(spec);

	intent = new Intent().setClass(this, FourthActivity.class);
	spec = tabHost.newTabSpec("Fourth").setIndicator("Fourth")
	.setContent(intent);
	tabHost.addTab(spec);
	}
	}

view raw TabBarActivity.java hosted with ❤ by GitHub

Para el contenido que va en el resto de la pantalla creamos un xml diferente para acomodar los componentes por separado.

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<TextView
	android:id="@+id/txtDisplayedTab"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:textAppearance="?android:attr/textAppearanceLarge"
	android:text="TextView"
	android:gravity="center\|center_vertical">
	</TextView>
	</RelativeLayout>

view raw tab_test.xml hosted with ❤ by GitHub

Esta es la clase que se manda a llamar cuando un tab es seleccionado.

	package com.test.app;

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

	public class FirstActivity extends Activity
	{
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	// TODO Auto-generated method stub
	super.onCreate(savedInstanceState);
	setContentView(R.layout.tab_test);

	TextView txtView = (TextView) findViewById(R.id.txtDisplayedTab);
	txtView.setText("First Tab is Selected");
	}
	}

view raw FirstActivity.java hosted with ❤ by GitHub

Se necesita crear otros 3 archivos iguales al anterior, solo cambiando el nombre de la clase y los archivos se llamarán SecondActivity, ThirdActivity y FourthActivity.

Modificamos el archivo AndroidManifest.xml y agregamos las cuatro actividades que acabamos de usar.

	<?xml version="1.0" encoding="utf-8"?>
	<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="com.test.app"
	android:versionCode="1"
	android:versionName="1.0">
	<uses-sdk android:minSdkVersion="10" />

	<application android:icon="@drawable/icon" android:label="@string/app_name">
	<activity android:name=".TabBarActivity"
	android:label="@string/app_name">
	<intent-filter>
	<action android:name="android.intent.action.MAIN" />
	<category android:name="android.intent.category.LAUNCHER" />
	</intent-filter>
	</activity>

	<activity android:name="FirstActivity">
	</activity>

	<activity android:name="SecondActivity">
	</activity>

	<activity android:name="ThirdActivity">
	</activity>

	<activity android:name="FourthActivity">
	</activity>
	</application>
	</manifest>