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


Atributos del widget Android TabHost

Algunos de los atributos populares del widget TabHost de Android heredados de FrameLayout son:
No.Atributos XMLDescripcion
1android:foregroundGravityDefine la gravedad del primer plano dibujable
2android:measureAllChildrenDefine 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 XMLDescripcion
1android:animateLayoutChangesDefine si LayoutTransition se ejecutará siempre que haya algún cambio en el diseño.
2android:animationCacheDefine si las animaciones de diseño deberían crear un caché de dibujo para sus hijos.
3android:clipToPaddingDefine si ViewGroup recortará sus elementos secundarios y redimensionará (pero no recortará) cualquier EdgeEffect a su relleno, si el relleno no es cero.
4android:layoutAnimationDefine la animación de diseño que se utilizará la primera vez que se despliegue ViewGroup.
5android:layoutModeDefine el modo de diseño de este viewGroup.
Some of the popular attributes of android TabHost widget inherited from View are –
No.Atributos XMLDescripcion
1android:alphaDefine el alfa de la vista.
2android:backgroundDefine el fondo de la vista.
3android:paddingDefine el relleno de la vista para todos los bordes.
4android:tooltipTextDefine el texto que se muestra en una pequeña ventana emergente al pasar el mouse o presionar prolongadamente.
5android:clickableDefine si se puede hacer clic en la vista o no.
6android:themeDefine una anulación de tema para ver.
7android:idDefine el id de la vista.
8android:paddingDefine 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>
Android Studio - TabHost Kotlin
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>

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

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>

Android Studio - TabHost Kotlin
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.
Android Studio - TabHost Kotlin
Si tienen alguna duda por favor déjanos tu comentario muchas gracias.

Curso Kotlin 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