Cara Membuat Tabs Layout Dengan Eclipse Android ADT

Cara Membuat Tabs Layout Dengan Eclipse Android ADT

Tabs layout atau tab system adalah bentuk tabs yang akan terbuka layout-layout baru dalam satu activity, jika Anda membuat sebuah activity dan menginginkan bisa membuat menu-menu dari batton maka saya sarankan jangan gunakan button dan activity baru cukup menggunakan tabs menu atau tabs layout ini karena lebih singkat dan ringan aplikasi kita tidak perlu harus banyak activity.

Untuk membuat tabs layout ini dibutuhkan sebuah project baru kemudian drag-drop tabs dan component (listview,form,webview,dll) yang dibutuhkan kedalam layout dari tabs, untuk lebih jelas silahkan ikuti langkah-langkah dibawah ini.

1. Setelah Anda membuat project baru disini kemudian Anda drag-drop tabs kedalam disain project activity_main.xml

Cara Membuat Tabs Layout Dengan Android IDE 1
2. Atau anda juga bisa cocokkan dengan kode activity_main.xml dibawah ini.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.tablayout.MainActivity" >

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >
            </TabWidget>

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <LinearLayout
                    android:id="@+id/tab1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >

                    <ListView
                        android:id="@+id/listView1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_weight="1" >
                    </ListView>

                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >
                    
                    <TextView
                        android:id="@+id/textView1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Large Text"
                        android:textAppearance="?android:attr/textAppearanceLarge" />

                    <EditText
                        android:id="@+id/editText1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:ems="10"
                        android:inputType="textPersonName" >

                        <requestFocus />
                    </EditText>
                    
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >
                    
                    <WebView
                        android:id="@+id/webView1"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" />

                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost>

</RelativeLayout>

3. Selanjutnya edit MainActivity.java kemudian isikan kode dibawah ini kedalam onCreate

TabHost Taband;

Taband = (TabHost) findViewById(android.R.id.tabhost);
Taband.setup();
               
Taband.addTab(Taband.newTabSpec("tab1").setIndicator("Lihat").setContent(R.id.tab1));
Taband.addTab(Taband.newTabSpec("tab2").setIndicator("Tambah").setContent(R.id.tab2));
Taband.addTab(Taband.newTabSpec("tab3").setIndicator("Cari").setContent(R.id.tab3));
               
Taband.setCurrentTab(0);

4. Untuk kode penuh dari MainActivity seperti dibawah ini.

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TabHost;


public class MainActivity extends ActionBarActivity {
	
	TabHost Taband;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
        Taband = (TabHost) findViewById(android.R.id.tabhost);
        Taband.setup();
               
        Taband.addTab(Taband.newTabSpec("tab1").setIndicator("Lihat").setContent(R.id.tab1));
        Taband.addTab(Taband.newTabSpec("tab2").setIndicator("Tambah").setContent(R.id.tab2));
        Taband.addTab(Taband.newTabSpec("tab3").setIndicator("Cari").setContent(R.id.tab3));
               
        Taband.setCurrentTab(0);
        
    }


    @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;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

5. Hasilnya pada emulator seperti dibawah ini.

Cara Membuat Tabs Layout Dengan Android IDE 2

Tags: ,