Pada kesempatan ini kita akan membahas tentang pembuatan Tab Menu di android.Dalam dunia aplikasi Tab Menu ini termasuk kedalam kelompok horizontal menu.Tab Menu cocoknya digunakan untuk aplikasi yang hanya menggunakan tidak lebih dari jumlah 5 Menu,Apabila sudah lebih dari 5 Menu Tab Menu bisa dikombinasikan dengan List Menu.Tab Menu punya kelebihan dan kekurangan.
Kelebihannya yaitu Menu selalu kelihatan sehingga memudahkan user untuk pindah-pindah menu.
Kerugiannya yaitu Menu yang selalu tampil diatas itu memakan tempat di layar kita (walaupun tidak begitu banyak).Seperti Aplikasi bangun datar yang telah kita buat pada tutorial sebelumnya yang menggunakan List Menu, kita dapat modifikasi dengan memnggunakan Tab Menu Setelah mendapat pemahaman tentang Tab Menu, bagaimana masih tertarik  memepelajari Tab Menu ?
Jika masih mari kita melangkah pada bagian pemrogramannya. Kita akan membuat sebuah Tab Menu yang didalamnya terdapat komponen Tab Soccer, Tab BasketBall, Tab Tennis

Berikut langkah-langkah untuk pembuatannya

  1. Buat Project dengan nama Belajar Tab

2. Setelah project berhasil dibuat  maka secara otomatis android membentuk komponen 3 file yaitu :
  • main.xml
  • string.xml
  • TabSport.java
3. Untuk membuat tampilan user interface nya, bukalah sebuah file main.xml kemudian ketikkan source code berikut :
01<?xml version="1.0" encoding="utf-8"?>
02<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
03    android:id="@android:id/tabhost"
04    android:layout_width="fill_parent"
05    android:layout_height="fill_parent">
06    <LinearLayout
07        android:orientation="vertical"
08        android:layout_width="fill_parent"
09        android:layout_height="fill_parent"
10        android:padding="5dp">
11        <TabWidget
12            android:id="@android:id/tabs"
13            android:layout_width="fill_parent"
14            android:layout_height="wrap_content" />
15        <FrameLayout
16            android:id="@android:id/tabcontent"
17            android:layout_width="fill_parent"
18            android:layout_height="fill_parent"
19            android:padding="5dp" />
20    </LinearLayout>
21</TabHost>
Jika kita lihat pada kode diatas terdapat tag baru yaitu <TabHost> dan <TabWidget> nah kedua tag tersebut yang harus ada untuk membuat Tab

4. Pada tab menu akan menjadi lebih menarik apabila disertai dengan icon,pada folder res untuk directory drawable letakkan posisi icon-icon yang akan kita gunakan pada tab pada directory tersebut, karena materi kita kali ini membuat sebuah Tab Sport maka bentuk iconnya juga sebuah icon Sport, dan masing-masing tab terdiri dari 2 icon.

icon Normal (selected) Grey (unselected)
Soccer soccer_ball_normal.png soccer_ball_grey.png
BasketBall basketball_ball_normal.png Basketball_ball_grey.ong
Tennis tennis_ball_normal.png tennis_ball_grey.png

Setelah bagian icon, selanjutnya kita membuat file xml untuk masing-masing tab, dan simpan semua xmlnya didalam folder drawable ic_tab_basket.xml yang mengatur gambar yang akan ditampilkan apabila tab basket di sentuh.

1<?xml version="1.0" encoding="utf-8"?>
2<selector xmlns:android="http://schemas.android.com/apk/res/android">
3    <!-- When selected, use normal -->
4    <item android:drawable="@drawable/basketball_ball_normal"
5          android:state_selected="true" />
6    <!-- When not selected, use grey -->
7    <item android:drawable="@drawable/basketball_ball_grey" />
8</selector>
ic_tab_soccer.xml yang mengatur konten gambar yang akan ditampilkan apabila tab soccer di sentuh

1<?xml version="1.0" encoding="utf-8"?>
2<selector xmlns:android="http://schemas.android.com/apk/res/android">
3    <!-- When selected, use normal -->
4    <item android:drawable="@drawable/soccer_ball_normal"
5          android:state_selected="true" />
6    <!-- When not selected, use grey -->
7    <item android:drawable="@drawable/soccer_ball_grey" />
8</selector>
ic_tab_tennis.xml yang mengatur konten gambar yang akan ditampilkan apabila tab tennis di sentuh

1<?xml version="1.0" encoding="utf-8"?>
2<selector xmlns:android="http://schemas.android.com/apk/res/android">
3    <!-- When selected, use normal -->
4    <item android:drawable="@drawable/tennis_ball_normal"
5          android:state_selected="true" />
6    <!-- When not selected, use grey -->
7    <item android:drawable="@drawable/tennis_ball_grey" />
8</selector>
Setelah semua komponen icon dan file-file xml selesai dibuat maka folder drawable akan terlihat seperti dibawah ini



5. Sekarang kita selanjutnya melangkah ke bahasa pemrograman java nya untuk activity tab-tab tersebut. Pada package com.abc.sporttab buat class baru dan simpan dengan nama BasketActivity.java yang akan beraksi apabila tab basket tidak diklik

01package com.abc.sporttab;
02/**
03 * Class BasketActivity
04 * @version 1.0 Jan 07, 2011
05 * @author Abc (abc@gmail.com)
06 * @website http://a.net
07 */
08import android.app.Activity;
09import android.os.Bundle;
10import android.widget.TextView;
11
12public class BasketActivity extends Activity {
13    public void onCreate(Bundle savedInstanceState) {
14        super.onCreate(savedInstanceState);
15
16        TextView textview = new TextView(this);
17        textview.setText("This is the Basket tab \n Kobe Briant \n Lebrown James \n Dwayne Wade");
18        setContentView(textview);
19    }
20}

6. Buat sebuah class baru lagi dan simpanlah dengan nama SoccerActivity.java yang akan beraksi apabila pada tab soccer kita diklik

01package com.agus.sporttab;
02/**
03 * Class SoccerActivity
04 * @version 1.0 Jan 07, 2011
05 * @author Agus Haryanto (agus.superwriter@gmail.com)
06 * @website http://agusharyanto.net
07 */
08
09import android.app.Activity;
10import android.os.Bundle;
11import android.widget.TextView;
12
13public class SoccerActivity extends Activity {
14    public void onCreate(Bundle savedInstanceState) {
15        super.onCreate(savedInstanceState);
16        TextView textview = new TextView(this);
17        textview.setText("This is the Soccer tab \n Firman Utina \n Irfan Bahdim \n Bambang Pamungkas");
18        setContentView(textview);
19    }
20}

7. Buatlah class baru lagi dan simpan dengan nama file TennisActivity.java yang akan beraksi apabila pada tab Tennis kita klik

01package com.agus.sporttab;
02/**
03 * Class TennisActivity
04 * @version 1.0 Jan 07, 2011
05 * @author Agus Haryanto (agus.superwriter@gmail.com)
06 * @website http://agusharyanto.net
07 */
08
09import android.app.Activity;
10import android.os.Bundle;
11import android.widget.TextView;
12
13public class TennisActivity extends Activity {
14    public void onCreate(Bundle savedInstanceState) {
15        super.onCreate(savedInstanceState);
16
17        TextView textview = new TextView(this);
18        textview.setText("This is the Tennis tab \n Rafael Nadal \n Roger Federrer \n Novac Djokovic");
19        setContentView(textview);
20    }
21}
8. Sekarang mari kita selesaikan otak dari aplikasi kita buka kembai file TabSport.java kemudian isikan dengan kode dibawah ini

01package com.agus.sporttab;
02/**
03 * Class TabSportActivity
04 * @version 1.0 Jan 07, 2011
05 * @author Agus Haryanto (agus.superwriter@gmail.com)
06 * @website http://agusharyanto.net
07 */
08
09import android.app.TabActivity;
10import android.content.Intent;
11import android.content.res.Resources;
12import android.os.Bundle;
13import android.widget.TabHost;
14
15public class TabSport extends TabActivity {
16    /** Called when the activity is first created. */
17
18    @Override
19    public void onCreate(Bundle savedInstanceState) {
20        super.onCreate(savedInstanceState);
21        setContentView(R.layout.main);
22
23        Resources res = getResources(); // Resource object to get Drawables
24        TabHost tabHost = getTabHost();  // The activity TabHost
25        TabHost.TabSpec spec;  // Resusable TabSpec for each tab
26        Intent intent;  // Reusable Intent for each tab
27
28        // Create an Intent to launch an Activity for the tab (to be reused)
29        intent = new Intent().setClass(this, SoccerActivity.class);
30
31        // Initialize a TabSpec for each tab and add it to the TabHost
32        spec = tabHost.newTabSpec("soccer").setIndicator("Soccer",
33                          res.getDrawable(R.drawable.ic_tab_soccer))
34                      .setContent(intent);
35        tabHost.addTab(spec);
36
37        // Do the same for the other tabs
38        intent = new Intent().setClass(this, BasketActivity.class);
39        spec = tabHost.newTabSpec("basket").setIndicator("Basket",
40                          res.getDrawable(R.drawable.ic_tab_basket))
41                      .setContent(intent);
42        tabHost.addTab(spec);
43
44        intent = new Intent().setClass(this, TennisActivity.class);
45        spec = tabHost.newTabSpec("tennis").setIndicator("Tennis",
46                          res.getDrawable(R.drawable.ic_tab_tennis))
47                      .setContent(intent);
48        tabHost.addTab(spec);
49
50        tabHost.setCurrentTab(3);
51    }
52}

9. Langkah terakhir adalah merubah file AndroidManifest.xml, buka file tersebut kemudian isikan dengan kode berikut

01<?xml version="1.0" encoding="utf-8"?>
02<manifest xmlns:android="http://schemas.android.com/apk/res/android"
03      package="com.agus.sporttab"
04      android:versionCode="1"
05      android:versionName="1.0">
06    <application android:icon="@drawable/icon" android:label="@string/app_name" >
07        <activity android:name=".TabSport"
08                  android:label="@string/app_name"
09                  android:theme="@android:style/Theme.NoTitleBar">
10            <intent-filter>
11                <action android:name="android.intent.action.MAIN" />
12                <category android:name="android.intent.category.LAUNCHER" />
13            </intent-filter>
14        </activity>
15         <activity android:name=".SoccerActivity"
16                 android:label="@string/app_name"
17                 android:theme="@android:style/Theme.NoTitleBar">
18        </activity>
19        <activity android:name=".BasketActivity"
20                 android:label="@string/app_name"
21                 android:theme="@android:style/Theme.NoTitleBar">
22        </activity>
23          <activity android:name=".TennisActivity"
24                 android:label="@string/app_name"
25                 android:theme="@android:style/Theme.NoTitleBar">
26        </activity>
27    </application>
28    <uses-sdk android:minSdkVersion="7" />
29
30</manifest>

Perhatikan tag <uses-sdk android:minSdkVersion=”7” /> saya isi dengan 7 agar project ini bisa dijalankan pada android dengan minimal versi ├ęclair keatas. Kalau mau froyo keatas ganti 7 dengan

8.
      Pada tahap disini kita juga harus mendaftarkan sebuah Activity untuk masing-masing tab yang telah kita buat sebelumnya.
10. Setelah proses yang cukup panjang, akhirnya tiba waktunya kita untuk menjalankan project kita. Setelah kita Run maka tampilannya akan seperti ini

             Klik (Sentuh) tab Basket

Klik (sentuh)  tab Tennis

Sekian tutorialnya semoga bermanfaat bagi progamer android .

0 komentar:

Post a Comment

Translate

RSS Feed

Enter your email address:

Delivered by FeedBurner

Dark Mode

Popular Posts

Blog Archive