Belajar Cara Membuat TabHost di Android Studio

Assalamualaikum Warahmatullahi Wabarakatuh.

Pada seri material design kali ini saya akan membahas mengenai tutorial cara membuat TabHost Layout pada Android Studio. TabHost layout mirip dengan Sliding Tab / TabLayout yang digunakan untuk berpindah halaman menggunakan sebuah Fragment, yang membedakan hanyalah konsepnya saja.

Tidak seperti Sliding Tab yang dapat berpindah halaman dengan cara menggeser layar ke kiri atau ke kanan, Pada TabHost untuk berpindah halaman user harus mengklik tombol tab-nya. Pada tutorial ini kita akan implementasikan TabHost tersebut pada sebuah Activity, serta menggunakan Fragment untuk halaman TabHost-nya.

Materi lainnya yang direkomendasikan:

• Belajar Cara Membuat Fragment pada Android Studio
• Cara Membuat TabLayout di Android Material Design
• Tutorial Membuat Navigation Drawer di Android Studio

Yang kita butuhkan yaitu sebuah activity dan beberapa fragment, disini kita akan menggunakan 2 buah fragment saja, yaitu menu Home dan Profile. Untuk membuat TabHost membutuhkan 2 komponen utama, yaitu TabWidget dan FrameLayout. TabWidget digunakan untuk membuat menu-nya dan FrameLayout sebagai pijakan untuk Fragment yang akan ditampilkan.

Belajar Cara Membuat TabHost di Android Studio

1) Seperti biasa, pertama-tama kita berlu menambahkan beberapa library berikut ini kedalam dependencies kalian pada file build.gradle (app).

implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:support-v4:27.1.1'
implementation 'com.android.support:design:27.1.1'

2) Jika sudah, buat 2 buah Fragment bernama Home dan Profile, didalamnya kita hanya akan menambahkan TextView saja.

activity_home.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="android.cianjur.developer.net.materialdesignexample.Home">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Home Page"
        android:textSize="20sp"
        android:textStyle="bold" />

</RelativeLayout>

activity_profile.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="android.cianjur.developer.net.materialdesignexample.Profile">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Profile Page"
        android:textSize="20sp"
        android:textStyle="bold" />

</RelativeLayout>

3) Selanjutnya buka activity_main.xml kalian, disini kita akan membuat TabHost menggunakan widget FragmentTabHost beserta komponen penting lainnya seperti TabWidget dan FrameLayout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.app.FragmentTabHost 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:id="@android:id/tabhost"
    tools:context="android.cianjur.developer.net.materialdesignexample.MainActivity">

    <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"
            android:layout_gravity="bottom"/>

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

    </LinearLayout>

</android.support.v4.app.FragmentTabHost>

Perlu kalian ketahui, untuk manambahkan atribut id pada semua kompenen TabHost, kalian harus menulisnya seperti yang saya buat di atas, jika mengubahnya, misalnya @android:id/tabcontent kita ubah menjadi @+id//tabconten atau @android:id/tabKonten, maka akan terjadi error.

4) Terakhir buka class MainActivity.java kalian, kita implementasikan TabHost pada Activity tersebut.

package android.cianjur.developer.net.materialdesignexample;

import android.os.Bundle;
import android.support.v4.app.FragmentTabHost;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Inisialisasi TabHost
        FragmentTabHost tabHost = findViewById(android.R.id.tabhost);

        //Memasang FrameLayout yang dijadikan sebagai pijakan untuk Halaman Fragment
        tabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);

        //Menambahkan Tab baru bernama Home
        tabHost.addTab(tabHost.newTabSpec("Home")
               .setIndicator("Home", null), Home.class, null);

        //Menambahkan Tab baru bernama Profile
        tabHost.addTab(tabHost.newTabSpec("Profile")
               .setIndicator("Profile", null), Profile.class, null);
    }
}

Source codenya cukup simple, seperti yang sudah saya buat diatas beserta penjelasannya. Selanjutnya coba jalankan project tersebut menggunakan Emulator atau langsung melalui prangkat Androidnya.

Demo:

Sekian dari saya, mohon maaf bila ada kesalahan, jika ada yang ingin ditanyaka, silakan isi kolom komentar dibawah ini.

Wassalamualaikum Warahmatullahi Wabarakatuh.