Añadir pestañas (tabs) a nuestra aplicación Android

En esta entrada hablaremos sobre cómo integrar las pestañas (tabs) en nuestra aplicación Android.

Para ello nos iremos al proyecto en el que estamos haciendo estos ejemplos y crearemos una nueva actividad en la que añadiremos 3 pestañas. Crearemos un botón para avanzar hasta ella desde la actividad principal.

El layout de la actividad que gestionará las 3 pestañas, y llamaré tabs.xml contendrá el código:

<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="horizontal" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</android.support.v4.app.FragmentTabHost>

y la clase asociado a él (tabs.java):
public class tabs  extends FragmentActivity {
private FragmentTabHost tabHost;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tabs);
tabHost= (FragmentTabHost) findViewById(android.R.id.tabhost);
tabHost.setup(this,
getSupportFragmentManager(),android.R.id.tabcontent);
tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("calendario"),
Tab1.class, null);
tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("radio group"),
Tab2.class, null);
tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("reloj"),
Tab3.class, null);
}
}

La clase contiene muy poco código e intuitivo: gestionará las 3 pestañas que serán 3 layout distintos (tab1, tab2 y tab3 que ahora describiré) y 3 clases distintas (Tab1, Tab2 y Tab3 ) y les asigno nombres:  «calendario», «radio group», «reloj» ya que les he añadido estos 3 elementos sin ningún motivo en especial, sólo para experimentar con los distintos elementos que nos ofrecen.

Cada pestaña de nuestra aplicación tendrá su layout y clase asociada, en esta entrada describiré el código de una de las tres, ya que son prácticamente iguales menos los elementos que contienen. Al final tendríamos que tener 4 clases y 4 layout distintos  (1 de cada para la gestión y los otros 3 de cada uno para las pestañas) para una actividad de 3 pestañas.

Crearemos el layout «tab1.xml» y le añadiremos los elementos que queramos. Una vez hecho creamos la clase «Tab1.java» con el código:

public class Tab1 extends Fragment {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.tab1, container, false);
}
}

El código vuelve a ser muy corto e intuitivo, pero ya tendríamos nuestra actividad con 3 pestañas:

Como nota habría que decir que la llamada a «onClick()» en las clases de las distintas pestañas no serviría, habría que añadirlo en la actividad principal (tabs.java en este caso).

Para más información sobre «tabs» puede consultar este tutorial, y sobre los RadioGroup que he utilizado en una de mis pestañas en esta entrada.