Belajar Membuat Tab Menu pada Andoid

Jumpa lagi denganAgus Haryanto dalam seri tutorial 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 ?

Kalau 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

<?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"
        android:padding="5dp">
        <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"
            android:padding="5dp" />
    </LinearLayout>
</TabHost>

Kalau 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

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use normal -->
    <item android:drawable="@drawable/basketball_ball_normal"
          android:state_selected="true" />
    <!-- When not selected, use grey -->
    <item android:drawable="@drawable/basketball_ball_grey" />
</selector>

ic_tab_soccer.xml yang mengatur gambar yang tampil apabila tab soccer di sentuh

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use normal -->
    <item android:drawable="@drawable/soccer_ball_normal"
          android:state_selected="true" />
    <!-- When not selected, use grey -->
    <item android:drawable="@drawable/soccer_ball_grey" />
</selector>

ic_tab_tennis.xml yang mengatur gambar yang tampil apabila tab tennis di sentuh

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use normal -->
    <item android:drawable="@drawable/tennis_ball_normal"
          android:state_selected="true" />
    <!-- When not selected, use grey -->
    <item android:drawable="@drawable/tennis_ball_grey" />
</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

package com.agus.sporttab;
/**
 * Class BasketActivity
 * @version 1.0 Jan 07, 2011
 * @author Agus Haryanto (agus.superwriter@gmail.com)
 * @website http://agusharyanto.net
 */
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class BasketActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is the Basket tab \n Kobe Briant \n Lebrown James \n Dwayne Wade");
        setContentView(textview);
    }
}

6. Buat class baru lagi dan simpan dengan nama SoccerActivity.java yang akan beraksi apabila tab soccer diklik

package com.agus.sporttab;
/**
 * Class SoccerActivity
 * @version 1.0 Jan 07, 2011
 * @author Agus Haryanto (agus.superwriter@gmail.com)
 * @website http://agusharyanto.net
 */

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

public class SoccerActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TextView textview = new TextView(this);
        textview.setText("This is the Soccer tab \n Firman Utina \n Irfan Bahdim \n Bambang Pamungkas");
        setContentView(textview);
    }
}

7.

7. Buat class baru lagi dan simpan dengan nama TennisActivity.java yang akan beraksi apabila tab Tennis diklik

package com.agus.sporttab;
/**
 * Class TennisActivity
 * @version 1.0 Jan 07, 2011
 * @author Agus Haryanto (agus.superwriter@gmail.com)
 * @website http://agusharyanto.net
 */

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

public class TennisActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("This is the Tennis tab \n Rafael Nadal \n Roger Federrer \n Novac Djokovic");
        setContentView(textview);
    }
}

8. Sekarang mari kita selesaikan otak dari aplikasi kita buka kembai file TabSport.java kemudian isikan dengan kode dibawah ini

package com.agus.sporttab;
/**
 * Class TabSportActivity
 * @version 1.0 Jan 07, 2011
 * @author Agus Haryanto (agus.superwriter@gmail.com)
 * @website http://agusharyanto.net
 */

import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;

public class TabSport extends TabActivity {
    /** Called when the activity is first created. */

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Resources res = getResources(); // Resource object to get Drawables
        TabHost tabHost = getTabHost();  // The activity TabHost
        TabHost.TabSpec spec;  // Resusable TabSpec for each tab
        Intent intent;  // Reusable Intent for each tab

        // Create an Intent to launch an Activity for the tab (to be reused)
        intent = new Intent().setClass(this, SoccerActivity.class);

        // Initialize a TabSpec for each tab and add it to the TabHost
        spec = tabHost.newTabSpec("soccer").setIndicator("Soccer",
                          res.getDrawable(R.drawable.ic_tab_soccer))
                      .setContent(intent);
        tabHost.addTab(spec);

        // Do the same for the other tabs
        intent = new Intent().setClass(this, BasketActivity.class);
        spec = tabHost.newTabSpec("basket").setIndicator("Basket",
                          res.getDrawable(R.drawable.ic_tab_basket))
                      .setContent(intent);
        tabHost.addTab(spec);

        intent = new Intent().setClass(this, TennisActivity.class);
        spec = tabHost.newTabSpec("tennis").setIndicator("Tennis",
                          res.getDrawable(R.drawable.ic_tab_tennis))
                      .setContent(intent);
        tabHost.addTab(spec);

        tabHost.setCurrentTab(3);
    }
}

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

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.agus.sporttab"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name" >
        <activity android:name=".TabSport"
                  android:label="@string/app_name"
                  android:theme="@android:style/Theme.NoTitleBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
		 <activity android:name=".SoccerActivity"
                 android:label="@string/app_name"
                 android:theme="@android:style/Theme.NoTitleBar">
        </activity>
  		<activity android:name=".BasketActivity"
                 android:label="@string/app_name"
                 android:theme="@android:style/Theme.NoTitleBar">
        </activity>
          <activity android:name=".TennisActivity"
                 android:label="@string/app_name"
                 android:theme="@android:style/Theme.NoTitleBar">
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="7" />

</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

Alhamdulillah kita telah menyelesaikan tutorial membuat Tab di android walaupun langkahnya lumayan panjang tapi terbayar dengan hasilnya.

Oh ya selanjutnya kita ada rencana membuat aplikasi semacam “motivational quotes” kalau yang ada dimarket kan bahasa inggris. Nah kita mau buat untuk quotesnya berisi kata-kata atau kalimat-kalimat motivasi yang berbahasa Indonesia (Aplikasi ini rencananya menggunakan Tab Menu untuk navigasinya). Nah bagi para pembaca yang ingin menyumbangkan kata-kata / kalimat motivasinya bisa isi di comment article ini atau email langsung ke saya, jangan lupa dicantumkan juga asal dari kata motivasi tersebut.

Misal, saya ambil contoh satu kalimat dari pak Mario Teguh

Tugas kita bukanlah untuk berhasil. Tugas kita adalah untuk mencoba, karena didalam mencoba itulah kita menemukan dan belajar membangun kesempatan untuk berhasil (Mario Teguh)

referensi:

http://developer.android.com

http://www.freeiconsdownload.com (sumber icon untuk tab)

Semoga Bermanfaat

Salam Hangat

Agus Haryanto