Cara Membuat Menu Tab Aplikasi Dengan AIDE

Setelah pada postingan sebelumnya kita telah berhasil membuat menu aplikasi

Baca :

kali ini kita akan membahas cara membuat menu tab aplikasi dengan AIDE yang istilahnya adalah TabHost. Menu tab ini akan menampilkan menu yang tersusun atas beberapa tab sehingga memudahkan navigasi dalam aplikasi dan memperindah tampilan aplikasi.

Jumlah tab dapat disesuaikan menurut keinginan atau kebutuhan aplikasi, dan penggunaan menu tab ini akan memberikan kesan modis dan modern pada aplikasi buatan kita.

Pada tulisan ini, aplikasi yang akan dibuat memiliki jumlah tab sebanyak empat buah tab, dan langsung saja kita mulai tahap-tahap pembuatannya.

Langkah-langkah cara membuat menu tab aplikasi dengan AIDE

Membuat project baru.

Buka aplikasi AIDE, buat project baru
nama : MenuTab
package name : com.mycompany.menutab
biar semua script pada pada tulisan ini bisa langsung dicopy paste kedalam project aplikasi.

Mengedit file main.xml

Buka file main.xml yang terdapat dalam folder "layout" dan sesuaikan script didalamnya agar sama seperti script berikut ini :


<?xml version="1.0" encoding="utf-8"?>

<TabHost
 xmlns:android="http://schemas.android.com/apk/res/android"
 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: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>

</TabHost>

Membuat file layout

Buat 4 buah file layout dalam folder "layout" dan copy paste script dibawah ini sesuai nama filenya.

tab1.xml


<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_height="match_parent"
 android:layout_width="match_parent">

 <TextView
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:text="Tab1"
  android:gravity="center_horizontal"
  android:textSize="50sp"
  android:layout_alignParentTop="true"
  android:id="@+id/tab1TextView1"/>

 <ImageView
  android:layout_height="match_parent"
  android:layout_width="match_parent"
  android:src="@drawable/x"
  android:layout_below="@id/tab1TextView1"
  android:layout_above="@+id/tab1ImageView2"/>

 <ImageView
  android:layout_height="50dp"
  android:layout_width="match_parent"
  android:src="@drawable/header"
  android:background="#000000"
  android:layout_alignParentBottom="true"
  android:id="@+id/tab1ImageView2"/>

</RelativeLayout>

tab2.xml


<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_height="match_parent"
 android:layout_width="match_parent">

 <TextView
  android:layout_height="match_parent"
  android:layout_width="match_parent"
  android:text="Tab2"
  android:gravity="center"
  android:textSize="50sp"
  android:layout_alignParentTop="true"
  android:id="@+id/tab1TextView1"
  android:layout_above="@+id/tab1ImageView2"/>

 <ImageView
  android:layout_height="50dp"
  android:layout_width="match_parent"
  android:src="@drawable/header"
  android:background="#000000"
  android:layout_alignParentBottom="true"
  android:id="@+id/tab1ImageView2"/>

</RelativeLayout>

tab3.xml


<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_height="match_parent"
 android:layout_width="match_parent">

 <TextView
  android:layout_height="match_parent"
  android:layout_width="match_parent"
  android:text="Tab3"
  android:gravity="center"
  android:textSize="50sp"
  android:layout_alignParentTop="true"
  android:id="@+id/tab1TextView1"
  android:layout_above="@+id/tab1ImageView2"/>

 <ImageView
  android:layout_height="50dp"
  android:layout_width="match_parent"
  android:src="@drawable/header"
  android:background="#000000"
  android:layout_alignParentBottom="true"
  android:id="@+id/tab1ImageView2"/>

</RelativeLayout>

tab4.xml


<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_height="match_parent"
 android:layout_width="match_parent">

 <TextView
  android:layout_height="match_parent"
  android:layout_width="match_parent"
  android:text="Tab4"
  android:gravity="center"
  android:textSize="50sp"
  android:layout_alignParentTop="true"
  android:id="@+id/tab1TextView1"
  android:layout_above="@+id/tab1ImageView2"/>

 <ImageView
  android:layout_height="50dp"
  android:layout_width="match_parent"
  android:src="@drawable/header"
  android:background="#000000"
  android:layout_alignParentBottom="true"
  android:id="@+id/tab1ImageView2"/>

</RelativeLayout>

Mengedit file MainActivity.java

Edit file MainActivity.java yang terdapat dalam folder "java" dan ubah scriptnya menjadi seperti dibawah ini :


package com.mycompany.menutab;

import android.app.*;
import android.os.*;
import android.app.TabActivity;
import android.content.Intent;
import android.widget.TabHost;

@SuppressWarnings("deprecation")
public class MainActivity extends TabActivity
{
 public void onCreate(Bundle savedInstanceState)
 {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  TabHost tabhost = getTabHost();
  TabHost.TabSpec spec;
  Intent intent;
  intent = new Intent().setClass(this, tab1Activity.class);
  spec = tabhost.newTabSpec("tab1").setIndicator("Tab 1", null).setContent(intent);
  tabhost.addTab(spec);
  intent = new Intent().setClass(this, tab2Activity.class);
  spec = tabhost.newTabSpec("tab2").setIndicator("Tab 2", null).setContent(intent);
  tabhost.addTab(spec);
  intent = new Intent().setClass(this, tab3Activity.class);
  spec = tabhost.newTabSpec("tab3").setIndicator("Tab 3", null).setContent(intent);
  tabhost.addTab(spec);
  intent = new Intent().setClass(this, tab4Activity.class);
  spec = tabhost.newTabSpec("tab4").setIndicator("Tab 4", null).setContent(intent);
  tabhost.addTab(spec);
 }
}

Membuat class atau file java

Buat 4 buah file class atau file java dalam folder "java" dan copy paste script dibawah ini sesuai nama filenya.

tab1Activity.java


package com.mycompany.menutab;

import android.app.Activity;
import android.os.Bundle;

public class tab1Activity extends Activity
{
 @Override
 public void onCreate(Bundle savedInstanceState)
 {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.tab1);
 }
}

tab2Activity.java


package com.mycompany.menutab;

import android.app.Activity;
import android.os.Bundle;

public class tab2Activity extends Activity
{
 @Override
 public void onCreate(Bundle savedInstanceState)
 {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.tab2);
 }
}

tab3Activity.java


package com.mycompany.menutab;

import android.app.Activity;
import android.os.Bundle;

public class tab3Activity extends Activity
{
 @Override
 public void onCreate(Bundle savedInstanceState)
 {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.tab3);
 }
}

tab4Activity.java


package com.mycompany.menutab;

import android.app.Activity;
import android.os.Bundle;

public class tab4Activity extends Activity
{
 @Override
 public void onCreate(Bundle savedInstanceState)
 {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.tab4);
 }
}

Mengedit file AndroidManifest.xml

Buka file AndroidManifest.xml dan sesuaikan script didalamnya agar sama seperti script berikut ini :

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

    <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="tab1Activity"></activity>
        <activity android:name="tab2Activity"></activity>
        <activity android:name="tab3Activity"></activity>
        <activity android:name="tab4Activity"></activity>
    </application>

</manifest>

Jalankan aplikasi

Setelah semua tahap pembuatan aplikasi dilakukan, jalankan aplikasinya. Jika tidak terdapat kesalahan dalam pembuatannya, maka aplikasi akan akan tampak seperti dibawah ini :