Android Tabs UI with Icon
Untuk membuat
TabWidget, sebuah TabHost harus digunakan untuk mengisi seluruh
LayoutActivity. Sebuah TabHost membutuhkan keturunan
dua elemen yaitu sebuah TabWidget dan FrameLayout. Agar elemen-
elemen tadi tampil dengan rapi, sebaiknya ditempatkan di dalam
LinearLayout vertikal. Jika tidak, TabWidget dan FrameLayout akan
overlay satu sama lain. FrameLayout adalah tempat untuk menyimpan
konten yang akan berubah dengan setiap tab. Setiap child di
FrameLayout akan dikaitkan dengan tab yang berbeda.
Buat tab
widget nya di main.xml
main.xml
| <?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="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:id="@+id/textview1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="Tab No1#" /> <TextView android:id="@+id/textview2" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="Tab No2#" /> <TextView android:id="@+id/textview3" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="Tab No3#" /> <TextView android:id="@+id/textview4" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="Tab No4#" /> <TextView android:id="@+id/textview5" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="Tab No5#" /> </FrameLayout> </LinearLayout> </TabHost> |
kelas yang dibuat harus extends dari TabActivity
| import android.app.TabActivity; import android.os.Bundle; public class AndroidTab extends TabActivity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); |
Untuk menampilkan icon dalam sebuah Tab, maka copy icon ke folder res/drawable kemudian deklarasikan dengan kode dibawah ini :
| TabHost mTabHost = getTabHost(); mTabHost.addTab(mTabHost.newTabSpec("tab_test1") .setIndicator("SMS", getResources().getDrawable(R.drawable.sms)) .setContent(R.id.textview1)); |
Berikut kode lengkapnya
Android.java
| package android.tab; import android.app.TabActivity; import android.os.Bundle; import android.widget.TabHost; public class AndroidTab extends TabActivity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); TabHost mTabHost = getTabHost(); mTabHost.addTab(mTabHost.newTabSpec("tab_test1") .setIndicator("SMS", getResources().getDrawable(R.drawable.sms)) .setContent(R.id.textview1)); mTabHost.addTab(mTabHost.newTabSpec("tab_test2") .setIndicator("Phone", getResources().getDrawable(R.drawable.phone)) .setContent(R.id.textview2)); mTabHost.addTab(mTabHost.newTabSpec("tab_test3") .setIndicator("Galery", getResources().getDrawable(R.drawable.galery4)) .setContent(R.id.textview3)); mTabHost.addTab(mTabHost.newTabSpec("tab_test4") .setIndicator("Facebook", getResources().getDrawable(R.drawable.fb)) .setContent(R.id.textview4)); mTabHost.addTab(mTabHost.newTabSpec("tab_test5") .setIndicator("Opera", getResources().getDrawable(R.drawable.opera)) .setContent(R.id.textview5)); mTabHost.setCurrentTab(0); } } |
Gambar 1 Android Tab
_netoya_
Posted at 08:21AM May 18, 2010 by nety ozora in General | Comments[0]