Membuat TabHost di Android Studio

Membuat TabHost di Android Studio

TabHost merupakan sebuah fitur yang ada di aplikasi baik web, desktop, maupun mobile. TabHost ini memiliki peranan mirip seperti navbar, bedanya tabhost lebih mudah dalam menglik karena tidak perlu menunggu loading lama dalam membuka form berikutnya yang ingin dituju. Dan juga Tabhost tentunya lebih friendly dari pada navbar atapun menu. 

Dan pada pembahasan kal ini kita akan membahas mengenai cara membuat TabHost di Android Studio. Kalian juga bisa membuatnya di Eclipse karena kedua aplikasi ini sama-sama untuk membangun aplikasi berbasis mobile. Dan untuk pembahasan kali ini saya hanya menggunakan Android Studio karena saya kurang minat untuk menggunakan Eclipse. Baiklah langsung saja kita masuk ke inti pembahasan.

Sebelum ngoding siapkan terlebih dahulu alat-alatnya antara lain : 

1. Laptop yang memadai
2. Aplikasi Android Studio / Eclipse
3. Niat yang bagus
4. Kopi dan makanan

Slanjutnya silahkan buat terlebih dahulu project nya dengan nama TabHost. Untuk Anroid Studio kalian bisa membuatnya dengan mengklik File > New > Android Project  lalu isi nama project nya denan nama TabHost kemudian klik next next saja. dan untuk activity pilih yang empty activity.

Setelah kalian membuat projectnya selanjutnya kita akan masuk ketahap pengkodingan. Silahkan buka file activity_main.xml dan masukkan code seperti dibawah ini.

<?xml version= "1.0" encoding= "utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    <TextView
        android:layout_width= "fill_parent"
        android:layout_height= "wrap_content" />
    <TabHost
        android:id= "@+id/tabhost"
        android:layout_width= "match_parent"
        android:layout_height= "match_parent">
    <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" >
     <AnalogClock
                    android:layout_width= "match_parent"
                    android:layout_height= "match_parent"
                    />
     </LinearLayout>
     <LinearLayout
                android:id= "@+id/tab2"
                android:layout_width= "match_parent"
                android:layout_height= "match_parent" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/txtJudul"
        android:layout_marginTop="80dp"
        android:layout_marginLeft="20dp"
        android:textSize="30dp"
        android:text="Selamat Datang di Form Kontak"/>

     </LinearLayout>
     <LinearLayout
                android:id= "@+id/tab3"
                android:layout_width= "match_parent"
                android:layout_height= "match_parent" >
         <include layout="@layout/activity_about_us" />
     </LinearLayout>
     </FrameLayout>
     </TabHost>
</LinearLayout>

Setelah coding diatas sudah kalian masukkan selanjutnya kita akan masuk ke konfigurasinya. Silahkan buka file MainActivity.java pada project kalian dan masukkan codingnya seperti berikut ini.

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TabHost;
public class MainActivity extends AppCompatActivity {
    /** Called when the activity is first created. */
    TabHost tabs;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tabs = (TabHost)findViewById(R.id.tabhost);
        tabs.setup();
        TabHost.TabSpec spec = tabs.newTabSpec("Tag1");
        //Kita akan mendeklarasikan tab 1
        spec.setContent(R.id.tab1);
        spec.setIndicator("Beranda");
        tabs.addTab(spec);
        //tab 2
        spec = tabs.newTabSpec("Tag 2");
        spec.setContent(R.id.tab2);
        spec.setIndicator("Kontak");
        tabs.addTab(spec);
        tabs.setCurrentTab(0);
        //tab 3
        spec = tabs.newTabSpec("Tag 3");
        spec.setContent(R.id.tab3);
        spec.setIndicator("Tentang");
        tabs.addTab(spec);
        tabs.setCurrentTab(0);
    }
}

Selanjutnya kita akan membuat activity untuk about us. Caranya adalah sebaai berikut, silahkan klik kanan pada folder project kalian dan pilih New > Activity > Empty Actvity  dan ini nama activity dengan nama AboutUs lalu klik finish. Setelah membuat activity AboutUs silahkan buka file activity_about_us.xml dan masukkan codenya seperti dibawah ini.

<?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=".AboutUs">
        <ImageView
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:src="@drawable/logo"
            android:layout_marginLeft="140dp"
            android:layout_marginTop="80dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="About Us"
            android:layout_marginTop="200dp"
            android:layout_marginLeft="20dp"
            android:textSize="20dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="240dp"
            android:text="Portal Coding adalah aplikasi seluler yang dibentuk"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="260dp"
            android:layout_marginLeft="20dp"
            android:text="untuk memberikan informasi dan tutorial tentang"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="280dp"
            android:text="pemrograman komputer."/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="320dp"
            android:layout_marginLeft="20dp"
            android:text="CopyRight @ 2018. Allright Reserved." />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="340dp"
            android:layout_marginLeft="20dp"
            android:text="www.portal-coding.xyz"/>
    </RelativeLayout>

Setelah itu buka juga file AboutUs.java dan masukkan code berikut ini didalam file tersebut.

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class AboutUs extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_about_us);
    }
}

Setelah semuanya dimasukkan jangan lupa disave dan dijalankan agar kita mengetahui hasilnya. Dan berikut ini adalah hasil dari coding diatas.

Demikianlah tutorial mengenai cara membuat TabHost di Android Studio. Silahkan dielajari dan dipraktekkan agar lebih paham, bila ada yang kurang paham bisa bertanya melalui kolom komentar.atau juga bisa melalui Contact Form. Insya Allah akan saya jawab semaksimal mungkin. Sekian dulu untuk pembahasan kali ini, terima kasih.

Share this post