Thursday, May 10, 2012

Belajar Membuat Tab Menu pada Android

         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 applikasi yang hanya menggunakan tidak lebih dari 5  Menu, Jika 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 sebuah Tab Menu yang didalamnya ada Tab Soccer, Tab BasketBall, Tab Tennis
Berikut langkah-langkah untuk pembuatannya

  1. Buat Project dengan nama Belajar Tab

2. Setelah project tercreate maka secara otomatis android membentuk 3 file yaitu :
  • main.xml
  • string.xml
  • TabSport.java
3. untuk membuat user interfacenya, bukafile main.xml lalu ketikkan kode 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. Tab Menu akan lebih menarik apabila disertai dengan icon, pada directory res buat directory drawable letakkan icon-icon yang akan kita gunakan pada tab didirectory tersebut, karena tema kita kali ini membuta Tab Sport maka iconnya juga icon Sport, 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 icon, selanjutnya kita buat xml untuk masing-masing tab, dan simpan semua xmlnya didalam directory drawable
ic_tab_basket.xml yang mengatur gambar yang tampil 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 gambar yang tampil 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 gambar yang tampil 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 icon dan file-file xml selesai dibuat maka directry drawable akan terlihat seperti dibawah ini

5. Sekarang kita melangkah ke pemrograman javanya untuk activity tab-tab tersebut. Pada package com.agus.sporttab buat class baru dan simpan nama BasketActivity.java yang akan beraksi apabila tab basket diklik

01package com.agus.sporttab;
02/**
03 * Class BasketActivity
04 * @version 1.0 Jan 07, 2011
05 * @author Agus Haryanto (agus.superwriter@gmail.com)
06 * @website http://agusharyanto.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 class baru lagi dan simpan dengan nama SoccerActivity.java yang akan beraksi apabila tab soccer 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. Buat class baru lagi dan simpan dengan nama TennisActivity.java yang akan beraksi apabila tab Tennis diklik

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.
      Disini kita juga harus mendaftarkan Activity untuk masing-masing tab yang telah kita buat tadi.
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 .

No comments:

Post a Comment