CARA MEMBUAT MENU TABHOST DI ECLIPSE
Assalamualaikum.Wr.wb
pada kesempatan kali ini saya akan berbagi bagaimana cara membuat menu tab di eclipse.TabHost merupakan menu dengan tampilan secara horizontal. Maximal menu
yang akan tampil pada TabHost adalah 5 buah. Jika melebihi dari 5 tab,
sebaiknya kombinasikan dengan ListView, silakan lihat Widget: Spinner. Struktur dari TabHost sebagai berikut.
Dalam satu TabHost, terdapat maximal satu TabWidget dengan
android:id=@android:id/tabs. Kemudian, didalam TabWidget tersebut
terdapat maximal satu FrameLayout dengan
android:id=@android:id/tabcontent. Nah, didalam FrameLayout tersebutlah
bisa diletakkan sebanyak mungkin View sesuai dengan kebutuhan. Berikut
langkah pembuatannya. Baiklah tanpa banyak bicara lagi saya akan berbagi caranya . Berikut ini adalah langkah -langkahnya :
1. Buka Aplikasi Eclipse anda
Catatan : Bagi anda yang belum mempunyai software eclipse anda bisa mendownloadnya DISINI
2. Kemudian anda klik File -> New -> Android Application Project
3. Setelah di klik maka akan muncul form seperti di bawah ini
4. Setelah itu isi nama file yang anda ingin buat di kolom Application Name kemudian klik Next
6. Setelah itu maka akan muncul form baru yang berisi Configure Launcher Icon kemudian anda klik Next
7. Setelah itu anda ceklik kolom Create Activity seperti gambar di bawah ini
8. Setelah itu maka akan mucul form seperti gambar di bawah ini kemudian klik Finish
9. Buat file layout dengan nama "activity_tab.xml" pada folder res>layout.Berikut ini adalah source codenya .
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tabHost1">
<TabWidget
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@android:id/tabs">
</TabWidget>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@android:id/tabcontent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/tab1"
android:orientation="vertical"
android:paddingTop="60px">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="@drawable/gambar">
</ImageView>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tab2"
android:orientation="vertical"
android:paddingTop="60px">
<TextView
android:layout_width="fill_parent"
android:layout_height="100px"
android:text="this is tab 2"
android:id="@+id/txt2">
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tab3"
android:orientation="vertical"
android:paddingTop="60px">
<TextView
android:layout_width="fill_parent"
android:layout_height="100px"
android:text="this is tab 3"
android:id="@+id/txt3">
</TextView>
</LinearLayout>
</FrameLayout>
</TabHost>
Catatan= " Perhatikan bagian ImageView terdapat android:src="@drawable/gambar". Skenarionya, ketika klik TAB 1 akan tampil gambar seperti yang tersimpan pada folder res>drawable. Jadi Anda harus membuat folder baru terlebih dahulu pada folder res dengan nama "drawable". Kemudian paste file dengan nama "gambar.png" misalnya, pada folder drawable tersebut. "
10. Selanjutnya, buat file java dengan nama "Tab.java" pada folder src. Berikut ini adalah source codenya.
package com.example.contoh; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.widget.TabHost; import android.widget.TabHost.TabSpec; public class Tab extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab); TabHost tabHost = (TabHost) findViewById(R.id.tabHost1); tabHost.setup(); TabSpec tabSpec1 = tabHost.newTabSpec("Tab 1"); tabSpec1.setContent(R.id.tab1); tabSpec1.setIndicator("Tab 1"); TabSpec tabSpec2 = tabHost.newTabSpec("Tab 2"); tabSpec2.setContent(R.id.tab2); tabSpec2.setIndicator("Tab 2"); TabSpec tabSpec3 = tabHost.newTabSpec("Tab 3"); tabSpec3.setContent(R.id.tab3); tabSpec3.setIndicator("Tab 3"); tabHost.addTab(tabSpec1); tabHost.addTab(tabSpec2); tabHost.addTab(tabSpec3); } }
11.Terakhir, deklarasikan kelas java yang akan dipanggil untuk di-running pada file AndroidManifest.xml.Berikut ini adalah source codenya.
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.contoh" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="18" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name="com.example.contoh.Tab" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
12. Maka hasil akhirnya seperti gambar di bawah ini.
Semoga bermanfaat... (^_^)
がんばって....
EmoticonEmoticon