Como programar el TABS HOST en Android Studio. Ejemplo con código Java.

En numerosas App encontramos en sus pantallas las TABS (pestañas). Son muy útiles para los programadores, porque nos ahorra código y nuevas ACTIVITIES, y para los usuarios, que nos permite tener opciones, menús e información extra sin "perdernos" por la aplicación. 

A demás es una alternativa a los FRAMES (hablaremos en otra entrada de blog).

A continuación vemos a ver en un ejemplo práctico donde iremos comentando los pasos a seguir.

En la PALETTE (paleta de WIDGET) buscaremos TABHOST, damos clic y, sin soltar, arrastramos sobre nuestro LAYOUT (relative en este caso) y soltamos en la parte superior:

- En COMPONENT TREE, hacemos clic en las flechas y desplegamos la estructura del TABHOST. Este se compone de un LINEARLAYOUT principal y de los TABS formados por FRAMELAYOUTS (vienes tres por defecto):

- Debemos asignar un ID a cada TAB:

- Nos cambiará en nombre de las pestañas por el nombre del ID. No os preocupéis, de momento esta bien así. Más adelante le podremos poner el nombre que nosotros querremos mediante código:

- Para las demás TABS:

Aquí os dejo el código en XLM:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <TabHost

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:id="@+id/tabHost"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true">

        <LinearLayout

            android:layout_width="fill_parent"

            android:layout_height="fill_parent"

            android:orientation="vertical">

            <TabWidget

                android:id="@android:id/tabs"

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"></TabWidget>

            <FrameLayout

                android:id="@android:id/tabcontent"

                android:layout_width="fill_parent"

                android:layout_height="fill_parent">

                <LinearLayout

                    android:id="@+id/ejemplo1"

                    android:layout_width="fill_parent"

                    android:layout_height="fill_parent"

                    android:orientation="vertical"></LinearLayout>

                <LinearLayout

                    android:id="@+id/ejemplo2"

                    android:layout_width="fill_parent"

                    android:layout_height="fill_parent"

                    android:orientation="vertical"></LinearLayout>

                <LinearLayout

                    android:id="@+id/ejemplo3"

                    android:layout_width="fill_parent"

                    android:layout_height="fill_parent"

                    android:orientation="vertical"></LinearLayout>

            </FrameLayout>

        </LinearLayout>

    </TabHost>

</RelativeLayout>

Ya tenemos creada la interfaz de nuestro TABHOST. Ahora vamos a escribir el código en JAVA dentro el OnCreate de nuestro MainActivity:

public class MainActivity extends ActionBarActivity {

    

    TabHost TbH;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        TbH = (TabHost) findViewById(R.id.tabHost); //llamamos al Tabhost

        TbH.setup();                                                         //lo activamos

        TabHost.TabSpec tab1 = TbH.newTabSpec("tab1");  //aspectos de cada Tab (pestaña)

        TabHost.TabSpec tab2 = TbH.newTabSpec("tab2");

        TabHost.TabSpec tab3 = TbH.newTabSpec("tab3");

        tab1.setIndicator("UNO");    //qué queremos que aparezca en las pestañas

        tab1.setContent(R.id.ejemplo1); //definimos el id de cada Tab (pestaña)

        tab2.setIndicator("DOS");

        tab2.setContent(R.id.ejemplo2);

        tab3.setIndicator("TRES");

        tab3.setContent(R.id.ejemplo3);

        TbH.addTab(tab1); //añadimos los tabs ya programados

        TbH.addTab(tab2);

        TbH.addTab(tab3); 

    }

En el código podemos cambiar el nombre a las pestañas. Compilando el proyecto en el emulador, nos debería aparecer:

Sólo quedará por llenar los LAYOUTS de cada TAB por medio de XLM, o directamente en el COMPONENT TREE arrastrando desde el PALETTE los elementos que queremos. Todos los nuevos elementos se programarán desde el OnCreate de la ACTIVITY donde se ubica el TABHOST.

Saludos a tod@s y gracias por la visita!