Como crear un TabHost en Android

Android TabHost Tutorial

Hola amigos continuamos con este curso de desarrollo aprendiendo cada día mas!

En esta ocasión aprenderemos a utilizar el Containers TabHost un control muy útil al momento de presentar contenido múltiple. El TabHost que usa pestañas para presentar el contenido de nuestra aplicación.

CREAR NUEVO PROYECTO ANDROID STUDIO (Aquí).

Teniendo listo nuestro proyecto trabajaremos en el diseño. Para ello utilizaremos nuestro TabHost.

Para este ejemplo utilizaremos varios controles mas para el diseño de esta aplicación. Utilizaremos los siguientes. Escribiremos el siguiente código.

<LinearLayout 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"
tools:context=".MainActivity">

<TabHost
android:id="@+id/tabHost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">

<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"></TabWidget>

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

<LinearLayout
android:id="@+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff1616"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#fff"
android:textSize="24dp"
android:gravity="center"
android:text="Pestaña 1" />

</LinearLayout>

<LinearLayout
android:id="@+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#da8200"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#fff"
android:textSize="24dp"
android:gravity="center"
android:text="Pestaña 2" />

</LinearLayout>

<LinearLayout
android:id="@+id/tab3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#5b89ff"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#fff"
android:textSize="24dp"
android:gravity="center"
android:text="Pestaña 3" />

</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
</LinearLayout>

Con esto quedaría listo nuestro diseño y solo faltaría la programación.

Ahora comenzaremos a programar. Escribiremos el siguiente código en nuestro MainActivity.

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.TabHost;

public class MainActivity extends AppCompatActivity {
//--Declaramos la variable de tip TabHost
TabHost tabHost;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//--Asignamos las propiedades del control
TabHost pestaña = (TabHost)findViewById(R.id.tabHost);
pestaña.setup();

//Pestaña 1
TabHost.TabSpec spec = pestaña.newTabSpec("Pestaña Uno");
spec.setContent(R.id.tab1);
spec.setIndicator("Pestaña Uno");
pestaña.addTab(spec);

//Pestaña 2
spec = pestaña.newTabSpec("Pestaña Dos");
spec.setContent(R.id.tab2);
spec.setIndicator("Pestaña Dos");
pestaña.addTab(spec);

//Pestaña 3
spec = pestaña.newTabSpec("Pestaña Tres");
spec.setContent(R.id.tab3);
spec.setIndicator("Pestaña Tres");
pestaña.addTab(spec);
}
}

Crear Emulador AVD 

Teniendo listo esto podemos procedes a ejecutar nuestra aplicación. Crear un emulador (Aquí).

Este seria el resultado obtenido.
Descargar proyecto.

Opcion 1

Espero el contenido haya sido de su agrado y este claro, cualquier duda déjame tu comentario y con gusto te responderé. Gracias por tu tiempo.

Android Studio - Curso Español