Como crear un TabHost utilizando Kotlin

Android Studio - TabHost Kotlin

Hola amigos continuamos aprendiendo mas y mas y en esta ocasión les enseñaremos un ejemplo de como utilizar el TabHost utilizando programación Kotlin.

Crear Proyecto TabHost Kotlin Tutorial (Aquí)

Crearemos nuestro proyecto con soporte a Kotlin para desarrollar este ejemplo utilizando el TabHost.

Atributos del widget Android TabHost

Algunos de los atributos populares del widget TabHost de Android heredados de FrameLayout son:

No.	Atributos XML	Descripcion
1	android:foregroundGravity	Define la gravedad del primer plano dibujable
2	android:measureAllChildren	Define si se deben medir todos los niños o solo aquellos en estado VISIBLE o INVISIBLE cuando se miden

Algunos de los atributos populares del widget TabHost de Android heredados de ViewGroup son:

No.	Atributos XML	Descripcion
1	android:animateLayoutChanges	Define si LayoutTransition se ejecutará siempre que haya algún cambio en el diseño.
2	android:animationCache	Define si las animaciones de diseño deberían crear un caché de dibujo para sus hijos.
3	android:clipToPadding	Define si ViewGroup recortará sus elementos secundarios y redimensionará (pero no recortará) cualquier EdgeEffect a su relleno, si el relleno no es cero.
4	android:layoutAnimation	Define la animación de diseño que se utilizará la primera vez que se despliegue ViewGroup.
5	android:layoutMode	Define el modo de diseño de este viewGroup.

Some of the popular attributes of android TabHost widget inherited from View are –

No.	Atributos XML	Descripcion
1	android:alpha	Define el alfa de la vista.
2	android:background	Define el fondo de la vista.
3	android:padding	Define el relleno de la vista para todos los bordes.
4	android:tooltipText	Define el texto que se muestra en una pequeña ventana emergente al pasar el mouse o presionar prolongadamente.
5	android:clickable	Define si se puede hacer clic en la vista o no.
6	android:theme	Define una anulación de tema para ver.
7	android:id	Define el id de la vista.
8	android:padding	Define el relleno de la vista.

Design TabHost Kotlin Tutorial

Ahora vamos a crear el diseño de nuestro ejemplo y nos quedaría de la siguiente forma comenzaremos agregando varias actividades.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@android:color/holo_red_dark"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".DragonBall">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:text="@string/presented_by"
        android:textColor="@android:color/white"
        android:textSize="18sp"
        android:textStyle="bold"/>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:contentDescription="@string/no_image"
        android:src="@mipmap/ic_launcher"/>

    <TextView
        android:id="@+id/txtMain"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/dragon"
        android:textColor="@android:color/white"
        android:textSize="17sp"/>

</LinearLayout>

Agregaremos el siguiente

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@android:color/holo_red_dark"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".Naruto">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:text="@string/presented_by"
        android:textColor="@android:color/white"
        android:textSize="18sp"
        android:textStyle="bold"/>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:contentDescription="@string/no_image"
        android:src="@mipmap/ic_launcher"/>

    <TextView
        android:id="@+id/txtMain"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/naruto"
        android:textColor="@android:color/white"
        android:textSize="17sp"/>

</LinearLayout>

Y el utlimo que agregaremos.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@android:color/holo_red_dark"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".OnePiece">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:text="@string/presented_by"
        android:textColor="@android:color/white"
        android:textSize="18sp"
        android:textStyle="bold"/>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:contentDescription="@string/no_image"
        android:src="@mipmap/ic_launcher"/>

    <TextView
        android:id="@+id/txtMain"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/onepiece"
        android:textColor="@android:color/white"
        android:textSize="17sp"/>

</LinearLayout>

Y por ultimo en nuestro activity_main.xml agregaremos los siguientes controles.

<?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">

<RelativeLayout
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_alignParentBottom="true">

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

</RelativeLayout>
</TabHost>

Y listo.

Código TabHost Kotlin Tutorial

Ahora seguiremos con nuestro código de nuestra actividades y en el principal MainActivity agregaremos el siguiente código que sera necesario.

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

class MainActivity : TabActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // Obtener referencia del objeto
        val tabHost = findViewById<TabHost>(android.R.id.tabhost)
        if (tabHost != null) {
            addTab(tabHost, getString(R.string.naruto), getString(R.string.naruto), Naruto::class.java)
            addTab(tabHost, getString(R.string.dragon), getString(R.string.dragon), DragonBall::class.java)
            addTab(tabHost, getString(R.string.onepiece), getString(R.string.onepiece), OnePiece::class.java)

            tabHost.currentTab = 1
            // Mostrar mensaje del tabhost seleccionado
            tabHost.setOnTabChangedListener { tabId -> Toast.makeText(applicationContext, tabId, Toast.LENGTH_SHORT).show() }
        }
    }
    // Añadir tabhost
    private fun addTab(tabHost: TabHost, name: String, indicator: String, className: Class<*>) {
        val tabSpec = tabHost.newTabSpec(name)
        tabSpec.setIndicator(indicator)
        val intent = Intent(this, className)
        tabSpec.setContent(intent)
        tabHost.addTab(tabSpec)
    }
}

Nuestro AndroidManifest.xml quedaría de la siguiente manera.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.hn.universoandroid.example_tabhost_kotlin">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".OnePiece" />
        <activity android:name=".DragonBall" />
        <activity android:name=".Naruto"></activity>
    </application>

</manifest>

Y para terminar.

Crear Emulador AVD (Aquí)

Crearemos nuestro emulador para ver nuestro proyecto en ejecución.

Si tienen alguna duda por favor déjanos tu comentario muchas gracias.

Curso Kotlin Español