Tutorial Tab Host pada Android

Ø  Buka Java-ADT bundle, buat project baru dengan pilih file – new – android application project, beri nama project dengan cobaTab1 lalu Next.

Ø  Pada jendela Configure Launcher Icon pilih icon dengan klik browse pilih gambar yang diinginkan lalu klik Next, sampai finish.

Ø  Bikin direktori baru dengan nama drawable, kemudian file .png dimasukkan pada file tersebut. Pastikan file .png berukuran kecil.

Ø  Kemudian akan masuk ke project baru. Ketikkan coding di bawah ini pada Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<TabHost android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:id= "@+id/tabHost"

    xmlns:android="http://schemas.android.com/apk/res/android"

    >

    <TabWidget

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:id="@android:id/tabs"

        />

    <FrameLayout

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:id="@android:id/tabcontent"

        >

        <LinearLayout

            android:layout_width="fill_parent"

            android:layout_height="fill_parent"

            android:id="@+id/tab1"

            android:orientation="vertical"

            android:paddingTop="60px"

            >

            <ImageView

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:src="@drawable/sss"/>

        </LinearLayout>

        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:id="@+id/tab2"

            android:orientation="vertical"

            android:paddingTop="60px"

            >

            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Nama : ENDAH PURNAMASARI"

                android:id="@+id/txt2"

                />

            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Kelas : SI 12 A"

                android:id="@+id/txt3"

                />

            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="NIM : 12.12.0017"

                android:id="@+id/txt4"

                />

               

            </LinearLayout>

         <LinearLayout

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:id="@+id/tab3"

                android:orientation="vertical"

                android:paddingTop="60px"

                > 

                <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Mata Kuliah : Pemrograman Mobile"

                android:id="@+id/txt5"

                />

                <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Tugas : Membuat Tab Host"

                android:id="@+id/txt6"

                />

              </LinearLayout>"

    </FrameLayout>

</TabHost>

Ø  Ketikkan coding di bawah ini pada MainActivity.java.

package ada.example.cobatab1;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.widget.TabHost;

import android.widget.TabHost.TabSpec;

import android.widget.TextView;

public class MainActivity extends Activity {

      

       @Override

       protected void onCreate(Bundle savedInstanceState) {

              super.onCreate(savedInstanceState);

              setContentView(R.layout.activity_main);

             

             

              TabHost tabHost=(TabHost)findViewById(R.id.tabHost);

              tabHost.setup();

             

              TabSpec spec1=tabHost.newTabSpec("Tab1");

              spec1.setContent(R.id.tab1);

              spec1.setIndicator("Tab1");

             

              TabSpec spec2=tabHost.newTabSpec("Tab 2");

              spec2.setIndicator("Tab2");

              spec2.setContent(R.id.tab2);

             

              TabSpec spec3=tabHost.newTabSpec("Tab 3");

              spec3.setIndicator("Tab 3");

              spec3.setContent(R.id.tab3);

             

              tabHost.addTab(spec1);

              tabHost.addTab(spec2);

              tabHost.addTab(spec3);

       }

       @Override

       public boolean onCreateOptionsMenu(Menu menu) {

              // Inflate the menu; this adds items to the action bar if it is present.

              getMenuInflater().inflate(R.menu.main, menu);

              return true;

       }

}

Ø  Jalankan project dengan cara klik kana pada nama project pilih Run As – Android Application. Maka akan muncul emulator seperti di bawah ini, klik menu.

Ø  Akan muncul beberapa menu, cari nama project yang telah kita buat tadi, yaitu cobaTab1.

Ø  Pada Tab 1, berisi gambar.

Ø  Jika di klik Tab 2, maka muncul data yang telah kita tuliskan tadi pada activity_main.xml.

Ø  Jika kita klik Tab 3, maka tampilannya seperti di bawah ini.