Tuesday, 9 June 2015

Membuat tab menu di aplikasi android

Dikesempatan kali ini saya akan menjelaskan bagaimana membuat menu tab di  aplikasi android. Menu tab seringkali digunakan untuk menampilkan menu pada aplikasi. Banyak aplikasi yang menggunakan menu tab seperti media player bawaan android. Ternyata membuat menu tab ini tidak terlalu sulit. Lansung saja kita .
  • Buat project baru dengan nama MenuTab
  • Kemudian buka folder res => layout => activity_main.xml. Disini ada 3 komponen yaitu TabHost,TabWidget dan FrameLayout. TabWidget digunakan untuk menampilkan menu - menu tab yang kita buat. Dan FrameLayout digunakan untuk menampilkan isi dari menu tab. Berikut kode lengkapnya.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <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:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical" >
     
            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom" />
     
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_gravity="bottom" />
     
        </LinearLayout>
    </TabHost>
  • Selanjutnya masuk ke folder src -> MainActivity.java untuk membuat menu - menu tab. MainActivity dibawah memakai extends TabActivity yang dimana artinya class yang terdapat di TabActivity bisa diturunkan ke MainActivity.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    package com.example.menutab;
     
    import android.os.Bundle;
    import android.app.TabActivity;
    import android.content.Intent;
    import android.widget.TabHost;
     
    @SuppressWarnings("deprecation")
    public class MainActivity extends TabActivity {
     
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
             
            TabHost tabhost = getTabHost();
            TabHost.TabSpec spec;
            Intent intent;
             
            intent = new Intent().setClass(this, BerandaActivity.class);//content pada tab yang akan kita buat
            spec = tabhost.newTabSpec("beranda").setIndicator("Beranda",null).setContent(intent);//mengeset nama tab dan mengisi content pada menu tab anda.
            tabhost.addTab(spec);//untuk membuat tabbaru disini bisa diatur sesuai keinginan anda
             
            intent = new Intent().setClass(this, BeritaActivity.class);
            spec = tabhost.newTabSpec("berita").setIndicator("Berita",null).setContent(intent);
            tabhost.addTab(spec);
             
            intent = new Intent().setClass(this, TemanActivity.class);
            spec = tabhost.newTabSpec("teman").setIndicator("Teman",null).setContent(intent);
            tabhost.addTab(spec);
     
        }
    }
  • Kemudian kita menyiapkan layout untuk ditampilkan di menu tab.
  • Source beranda.xml. Layout ini digunakan untuk menampilkan menu beranda.
    1
    2
    3
    4
    5
    6
    7
    8
    <?xml version="1.0" encoding="utf-8"?>
    <DigitalClock xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center_vertical|center"
        android:textSize="50sp" >
        
    </DigitalClock>
  • Source berita.xml. Layout ini digunakan untuk menampilkan menu berita.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
     >
        <ListView
            android:id="@android:id/list"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            />
    </LinearLayout>
  • Source teman.xml. Layout ini digunakan untuk menampilkan menu teman.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
     >
        <ListView
            android:id="@android:id/list"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            />
    </LinearLayout>
  • Selanjutnya membuat class baru untuk memanggil layout" yang sudah kita buat.
  • Source BerandaActivity.java.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    package com.example.menutab;
     
    import android.app.Activity;
    import android.os.Bundle;
     
    public class BerandaActivity extends Activity {
        @Override
        public void onCreate(Bundle savedInstanceState){
            super.onCreate(savedInstanceState);
            setContentView(R.layout.beranda);
        }
         
    }
  • Source BeritaActivity.java
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    package com.example.menutab;
     
    import android.app.ListActivity;
    import android.os.Bundle;
    import android.widget.ArrayAdapter;
     
    public class BeritaActivity extends ListActivity {
        String [] berita ={"Jadwal Piala Dunia 2014", "Capres Indonesia", "Debat Capres", "Debat Cawapres"};
        @Override
        public void onCreate(Bundle savedInstanceState){
            super.onCreate(savedInstanceState);
            setContentView(R.layout.berita);
         
            setListAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, berita));
             
        }
    }
  • Source TemanActivity.java
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    package com.example.menutab;
     
    import android.app.ListActivity;
    import android.os.Bundle;
    import android.widget.ArrayAdapter;
     
     
    public class TemanActivity extends ListActivity {
        String [] teman ={"Andra", "Dina", "Edo", "Julia"};
        @Override
        public void onCreate(Bundle savedInstanceState){
            super.onCreate(savedInstanceState);
            setContentView(R.layout.teman);
         
            setListAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, teman));
             
        }
    }
  • Jangan lupa untuk mendaftarkan activity yang kita buat ke Androidmanifest.xml kodenya seperti berikut.
    1
    2
    3
    <activity android:name="BerandaActivity"></activity>
    <activity android:name="BeritaActivity"></activity>
    <activity android:name="TemanActivity"></activity>
  • Kode lengkapnya dapat dilihat seperti ini.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.example.menutab"
        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.menutab.MainActivity"
                android:label="@string/app_name" >
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
     
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
            <activity android:name="BerandaActivity"></activity>
            <activity android:name="BeritaActivity"></activity>
            <activity android:name="TemanActivity"></activity>
        </application>
     
    </manifest>
  • Berikut saya sertakan screenshot dari aplikasi diatas
  • Gambar Tab Berandamenu-tab-beranda
  • Gambar Tab Berita menu-tab-berita
  • Gambar Tab Temanmenu-tab-teman
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)