Blog para desarrollo de aplicaciones en Android, aprende paso a paso como crear aplicaciones.

Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. OK Más información | Y más

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.
Android Studio - 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.
Android Studio - TabHost

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í).
Android Studio - TabHost
Android Studio - TabHost

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

Android Studio - Curso Español

No hay comentarios:

Publicar un comentario

x

Registrate!

Curso Android Español

Curso Kotlin Español

eBook Free Android Studio

Noticias y Eventos

¡Directamente a tu INBOX!

Le enviaremos nuestros recursos gratis. Para obtener nuestro contenido nuevo, únase a nuestra comunidad. No te molestaremos enviando información inútil. ¡No te pierdas ninguna actualización, mantente conectado! Recuerda verificar tu correo electronico.

Ingrese su dirección de correo electrónico:

Entregado por FeedBurner