Cara Membuat TabLayout Sederhana(TabHost) Melalui Aide

Di zaman ini mungkin sudah tidak berlaku lagi sebuah aplikasi yang isinya tidak memakai tab, karena kegunaan tab sudah sangat berarti dalam sebuah aplikasi, yaitu untuk memperefektif kegiatan penggunaan aplikasi tersebut atau dalam kata lain mempermudah penggunaan aplikasi tersebut. Selain itu bagi para pengembang (developer) aplikasi android yang baru belajar (seperti saya 😄), mendesain material aplikasi android merupakan sebuah kesenangan bahkan kebutuhan yang harus saya ketahui.

Nah, di artikel kali kita akan membahas cara menerapkan widget tab layout sederhana yaitu TabHost , namanya juga tab layout sederhana berarti tidak terlalu memiliki banyak nilai keindahan di dalamnya. Sedikit mengenai TabHost , TabHost merupakan tab layout sederhana yang sudah dibuat atau yang sudah ada dari bagian android itu sendiri(berasal dari: Framework-res.apk, jika anda sebelumnya adalah seorang opreker android, maka anda pasti mengetahui aplikasi tersebut). Pembuatan tab dalam TabHost dapat dibuat sebanyak mungkin dan sesuka hati anda, bisa 2tab, 3tab, 4tab, 5tab, dan seterusnya.

Karena TabHost sudah ada dari android itu sendiri, maka untuk membuat TabHost kita tinggal mengakses atau meminta TabHost tersebut dengan menggunakan id dan sedikit coding pemograman java, dalam kata lainnya penerapan widget TabHost ini merupakan hal yang mudah. Jadi jangan takut jika anda tidak bisa menerapkannya, saya dapat menjamin 100% bahwa anda dapat menerapkan widget TabHost ini jika anda mengikuti langkah-langkah yang sudah ditulis di bawah. Berikut screenshot hasil dari penerapan widget TabHost:

Skema/Daftar Isi dari Langkah-Langkah Membuat/Menerapkan Widget TabHost melalui Aide:

• Langkah 1 : Membuat Project Baru(Android App), membuat 4 class(file java) dan 4 file xml layout baru.
• Langkah 2 : Mengedit file main.xml, dan file MainActivity.java.
• Langkah 3 : Mengedit file AndroidManifest.xml.
• Cara menambahkan tab dan mengurangi tab.

Keterangan : Langkah 1, Langkah 2, dan Langkah 3 merupakan cara menerapkan widget TabHost . Sedangkan bagian terakhir diatas merupakan cara untuk menambah dan mengurangi tabnya.

Di artikel ini kita akan membuat tab layoutnya sebanyak 4tab.
Oke langsung saja:

Langkah-langkah:

Langkah 1 : Membuat Project Baru(Android App), membuat 4 class(file java) dan 4 file xml layout baru.

1. Buka aplikasi Aide, kemudian masuk kebagian "For Expert", selanjutnya dibagian "Create New Project" pilih "New Android App". Maka akan muncul dialog window baru yang berfungsi untuk menentukan nama dan package dari aplikasi yang akan anda buat. Dibagian nama, isikan sebagai nama dari aplikasi yang akan dibuat, contoh: cymTab. Dan dibagian package dapat anda isikan seperti ini: cym.tabku. Kemudian tekan tombol "Create".


2. Selanjutnya cari dan masuk ke folder "java", kemudian buat 4 class baru(file java) yang masing-masing nama file java tersebut adalah sebagai berikut:
1.Home.java
2.Kedua.java
3.Ketiga.java
4.Keempat.java
Dan isinya masing-masing dari 4 class(file java) baru diatas adalah seperti ini:
1.Home.java
 import android.app.*;
 import android.content.*;
 import android.os.*;
 import android.widget.*;

 public class Home extends Activity
 {
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.home);
 
   }
 }
2.Kedua.java
 import android.app.*;
 import android.content.*;
 import android.os.*;
 import android.widget.*;

 public class Kedua extends Activity
 {
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.kedua);
 
   }
 }
3.Ketiga.java
 import android.app.*;
 import android.content.*;
 import android.os.*;
 import android.widget.*;

 public class Ketiga extends Activity
 {
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.ketiga);
 
   }
 }
4.Keempat.java
 import android.app.*;
 import android.content.*;
 import android.os.*;
 import android.widget.*;

 public class Keempat extends Activity
 {
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.keempat);
 
   }
 }


3. Setelah anda buat keempat file java diatas, selanjutnya buka folder res/layout dan buat 4 file xml baru didalam folder layout, yang masing-masing namanya adalah sebagai berikut:
1.home.xml
2.kedua.xml
3.ketiga.xml
4.keempat.xml
(INGAT: Dalam xml, nama file xml tidak boleh ada huruf besar/kapital, harus huruf kecil, kecuali pada file AndroidManifest.xml).
Dan isi dari keempat file xml yang baru dibuat tersebut adalah seperti ini:
1.home.xml
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
  
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="20px"
    android:textColor="#ffffff"
    android:background="#080808"
    android:text="Welcome Programmer"/>

 </LinearLayout>
2.kedua.xml
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
  
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="20px"
    android:textColor="#080808"
    android:background="#ffffff"
    android:text="Layout Kedua"/>

 </LinearLayout>
3.ketiga.xml
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
  
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="20px"
    android:textColor="#080808"
    android:background="#ff00ff00"
    android:text="Layout Ketiga"/>

 </LinearLayout>
4.keempat.xml
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
  
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="20px"
    android:textColor="#ffffff"
    android:background="#ffff0000"
    android:text="Layout Keempat"/>

 </LinearLayout>


4. Setelah selesai kedelapan file diatas (4 file java, dan 4 file xml), periksa lagi isi dari kedelapan file diatas agar tidak ada yang salah. Langkah 1 Selesai.

Langkah 2 : Mengedit file main.xml, dan file MainActivity.java.

1. Buka folder res/layout dan buka file main.xml , dan ganti semua isi/script dari file main.xml dengan script ini dibawah ini:
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

  <TabHost
  android:id="@android:id/tabhost"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <LinearLayout
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <TabWidget
    android:layout_width="match_parent"
    android:id="@android:id/tabs"
    android:layout_height="wrap_content"/>

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

   </LinearLayout>
  </TabHost>
 </LinearLayout>
Keterangannya:
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
Script diatas berfungsi sebagai layout utama dari aplikasi tersebut, lebar dan tingginya adalah sesuai dengan ukuran layar anda, dan isinya akan berurutan secara vertikal/tegak lurus. 
  <TabHost
  android:id="@android:id/tabhost"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
Script diatas berfungsi sebagai layout/tata letak dari TabHost dengan menggunakan id android untuk mengakses TabHost dari android. Lebar dan tingginya sesuai dengan layar anda. 
  <LinearLayout
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">
Script diatas merupakan layout atau tata letak dari tombol tab(Tab Widget) dan conten tab/isi dari tab. lebar dan tingginya sesuai dengan layar anda, dan isinya akan berurut secara vertical/tegak lurus.
   <TabWidget
    android:layout_width="match_parent"
    android:id="@android:id/tabs"
    android:layout_height="wrap_content"/>
Script diatas berfungsi sebagai tombol tab itu sendiri, menggunakan id android untuk mengakses tombol tab dari android. Lebarnya sesuai lebar layar anda dan tingginya adalah ukuran default atau ukuran asal.
   <FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@android:id/tabcontent"/>
Script diatas berfungsi sebagai konten/isi dari tab itu sendiri, dengan menggunakan id android untuk mengakses tata letak konten tab dari android. 


2. Kemudian masuk ke folder java dan buka file MainActivity.java , dan ganti semua script yang ada didalam file MainActivity.java(mulai dari bagian import sampai kebawah) diganti dengan script dibawah ini:
 import android.app.*;
 import android.content.*;
 import android.os.*;
 import android.widget.*;

 public class MainActivity extends TabActivity
 {
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

  TabHost th = getTabHost();
  TabHost.TabSpec ts;
  Intent i;
 
  i = new Intent().setClass(this, Home.class);
  ts = th.newTabSpec("Home").setIndicator("Home",null).setContent(i);
  th.addTab(ts);

  i = new Intent().setClass(this, Kedua.class);
  ts = th.newTabSpec("Kedua").setIndicator("Kedua",null).setContent(i);
  th.addTab(ts);

  i = new Intent().setClass(this, Ketiga.class);
  ts = th.newTabSpec("Ketiga").setIndicator("Ketiga",null).setContent(i);
  th.addTab(ts);
 
  i = new Intent().setClass(this, Keempat.class);
  ts = th.newTabSpec("Keempat").setIndicator("Keempat",null).setContent(i);
  th.addTab(ts);
 
   }
 }


3. Jika telah selesai, periksa sekali lagi apa yang telah diedit tadi dan jangan sampai ada yang salah, karena jika salah satu huruf saja pun, maka dapat membuat script tersebut eror dan tidak dapat dijalankan. Langkah 2 Selesai.

Langkah 3 : Mengedit file AndroidManifest.xml.

Ditahap ini kita akan mengedit file AndroidManifest.xml , yang bertujuan untuk mengizinkan penjalanan activity dari 4 class(file java) yang baru dibuat tadi, agar tidak terjadi eror saat menjalankan aplikasi tersebut.

1. Cari dan buka file AndroidManifest.xml , kemudian cari script seperti ini:
   <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
2. Jika sudah dapat, maka tambahkan script dibawah ini: (tambahkan dibawah script diatas).
  <activity
   android:name=".Home"></activity>

  <activity
   android:name=".Kedua"></activity>

  <activity
   android:name=".Ketiga"></activity>
 
  <activity
   android:name=".Keempat"></activity>
3. Maka hasilnya menjadi seperti dibawah ini:
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="cym.app.cymaktivitas" >

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >

        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

  <activity
   android:name=".Home"></activity>

  <activity
   android:name=".Kedua"></activity>

  <activity
   android:name=".Ketiga"></activity>
 
  <activity
   android:name=".Keempat"></activity>
 
  </application>
 </manifest>
4. Jika sudah selesai, periksa sekali lagi script-script yang telah kita ubah, dan pastikan jangan ada yang salah. Langkah 3 selesai.

Tahap terakhir adalah menjalankan aplikasi tersebut, caranya adalah sebagai berikut: klik tombol bergambar "resume" dibagian atas sebelah kanan, tunggu sebentar, lalu install dan jalankan aplikasi tersebut. Maka hasilnya sama seperti screenshot dibagian atas tadi.

Cara Menambah Tab dan Mengurangi Tab.

Sebenarnya cara menambah dan mengurangi tab dalam TabHost sangatlah mudah, jika anda mengamati dengan jelas langkah-langkah yang telah dilakukan diatas mungkin anda sudah dapat melakukannya sendiri(menambah/mengurangi tab), berikut tahapannya:

a.Menambahkan Tab.

1. Sediakan/buat 1class(file java) dan 1file xml layout, seperti Langkah 1 diatas.
2. Cari dan buka file MainActivity.java , kemudian lihat script yang seperti ini: 
  i = new Intent().setClass(this, Home.class);
  ts = th.newTabSpec("Home").setIndicator("Home",null).setContent(i);
  th.addTab(ts);

  i = new Intent().setClass(this, Kedua.class);
  ts = th.newTabSpec("Kedua").setIndicator("Kedua",null).setContent(i);
  th.addTab(ts);

  i = new Intent().setClass(this, Ketiga.class);
  ts = th.newTabSpec("Ketiga").setIndicator("Ketiga",null).setContent(i);
  th.addTab(ts);
 
  i = new Intent().setClass(this, Keempat.class);
  ts = th.newTabSpec("Keempat").setIndicator("Keempat",null).setContent(i);
  th.addTab(ts);
3. Kemudian ambil/copy salah satu dari method diatas, contoh ambil/copy yang seperti ini: 
  i = new Intent().setClass(this, Home.class);
  ts = th.newTabSpec("Home").setIndicator("Home",null).setContent(i);
  th.addTab(ts);
Nah, dibagian tulisan setClass(this,Home.class); ganti sesuai dengan file java yang baru anda buat. Misalnya nama file java yang baru anda buat adalah Kelima.java , maka akan menjadi seperti ini: setClass(this,Kelima.class); . Kemudian di bagian tulisan "Home",null  anda ganti sesuai keinginan anda, tulisan tersebut yang menjadi text dibagian tab.jj
4. Langkah selanjutnya adalah mengizinkan file java tersebut agar dapat diakses, dibagian AndroidManifest.xml  yang berguna agar tidak terjadi kesalahan saat menjalankan aplikasi tersebut, seperti Langkah 3 diatas. Jika sudah, selanjutnya anda jalankan aplikasi tersebut dan lihat hasilnya.

b.Mengurangi Tab.
Untuk mengurangi tab sangatlah mudah yaitu anda hanya tinggal menghapus salah satu script/method yang seperti ini:

  i = new Intent().setClass(this, Home.class);
  ts = th.newTabSpec("Home").setIndicator("Home",null).setContent(i);
  th.addTab(ts);

Contoh: Jika anda menghapus script diatas, maka tab Home akan terhapus/tidak akan dimunculkan. Sehingga jumlah tabnya akan berkurang.

Terima kasih telah membaca artikel ini, baca juga artikel lainnya dari blog ini ya. 

Jika ada yang ingin anda pertanyakan silahkan berkomentar...

Share this post