TUTORIAL PEMBUATAN TABHOST PADA ADT BUNDLE ANDROID

1. Buat Proyek android .

2. Tentukan desain untuk aplikasinya.

3. Buat proyek blank activity

4 .Masukan Main Activity Details

---

5. Tambahkan Android’s Support library

Dengan ADT plugin version 20.0.2, Android’s support library adalah menambahkan untuk automisasi proyek. Jika tidak secara automatis ditambahkan, Anda dapat menambahkannya dengan cara click kanan “NavigationTabDemo” ( Package Explorer ) dan pilih Android Tools -> Add Support Library

---

6. Buat folder baru drawable pada res dan buat file baru namai dengan android.xml dan tuliskan kode berikut:

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

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

    <item

        android:state_selected="true"

        android:state_pressed="false"

        android:drawable="@drawable/android_selected" />

    <item

        android:drawable="@drawable/android_unselected" />

</selector>

---

7.Buat file baru dengan nama apple.xml pada res/drawable directory buat seperti rangkaian diatas dan tuliskan kode berikut:

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

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

    <item

        android:state_selected="true"

        android:state_pressed="false"

        android:drawable="@drawable/apple_selected" />

    <item

        android:drawable="@drawable/apple_unselected" />

</selector>

---

8.Ubah layout file res/layout/activity_main.xml

<TabHost

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

    android:id="@android:id/tabhost"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <LinearLayout

        android:orientation="vertical"

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <TabWidget

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

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_weight="0"/>

        <FrameLayout

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

            android:layout_width="0dp"

            android:layout_height="0dp"

            android:layout_weight="0"/>

        <FrameLayout

            android:id="@+id/realtabcontent"

            android:layout_width="match_parent"

            android:layout_height="0dp"

            android:layout_weight="1"/>

    </LinearLayout>

</TabHost>

---

9. Buat Class baru  src/in/wptrafficanalyzer/navigationtabdemo/AndroidFragment.java

package in.wptrafficanalyzer.navigationtabdemo;

import android.os.Bundle;

import android.support.v4.app.ListFragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ListView;

public class AndroidFragment extends ListFragment{

    /** An array of items to display in ArrayList */

    String android_versions[] = new String[]{

        “Nama:Dionisius Riyan Edlianto”,

              “Kelas:SI12A”,

              “NIM:12.12.0009”

    };

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        /** Creating array adapter to set data in listview */

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity().getBaseContext(), android.R.layout.simple_list_item_multiple_choice, android_versions);

        /** Setting the array adapter to the listview */

        setListAdapter(adapter);

        return super.onCreateView(inflater, container, savedInstanceState);

    }

    @Override

    public void onStart() {

        super.onStart();

        /** Setting the multiselect choice mode for the listview */

        getListView().setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);

    }

}

---

10. Buat file class baru  src/in/wptrafficanalyzer/navigationtabdemo/AppleFragment.java

package in.wptrafficanalyzer.navigationtabdemo;

import android.os.Bundle;

import android.support.v4.app.ListFragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ListView;

public class AppleFragment extends ListFragment{

    /** An array of items to display in ArrayList */

    String apple_versions[] = new String[]{

     “Alamat blog:Shareilmu2ilmu.blogspot.com”,

     “Mata kuliah:Pemmograman Mobile”        

    };

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        /** Creating array adapter to set data in listview */

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity().getBaseContext(), android.R.layout.simple_list_item_multiple_choice, apple_versions);

        /** Setting the array adapter to the listview */

        setListAdapter(adapter);

        return super.onCreateView(inflater, container, savedInstanceState);

    }

    @Override

    public void onStart() {

        super.onStart();

        /** Setting the multiselect choice mode for the listview */

        getListView().setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);

    }

}

---

14. Buat file class baru src/in/wptrafficanalyzer/navigationtabdemo/DummyTabContent.java

package in.wptrafficanalyzer.navigationtabdemo;

import android.content.Context;

import android.view.View;

import android.widget.TabHost.TabContentFactory;

public class DummyTabContent implements TabContentFactory{

    private Context mContext;

    public DummyTabContent(Context context){

        mContext = context;

    }

    @Override

    public View createTabContent(String tag) {

        View v = new View(mContext);

        return v;

    }

}

---

15. Ubah file pada src/in/wptrafficanalyzer/navigationtabdemo/MainActivity.java

package in.wptrafficanalyzer.navigationtabdemo;

import android.os.Bundle;

import android.support.v4.app.FragmentActivity;

import android.widget.TabHost;

public class MainActivity extends FragmentActivity {

    TabHost tHost;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        tHost = (TabHost) findViewById(android.R.id.tabhost);

        tHost.setup();

        /** Defining Tab Change Listener event. This is invoked when tab is changed */

        TabHost.OnTabChangeListener tabChangeListener = new TabHost.OnTabChangeListener() {

            @Override

            public void onTabChanged(String tabId) {

                android.support.v4.app.FragmentManager fm =   getSupportFragmentManager();

                AndroidFragment androidFragment = (AndroidFragment) fm.findFragmentByTag("android");

                AppleFragment appleFragment = (AppleFragment) fm.findFragmentByTag("apple");

                android.support.v4.app.FragmentTransaction ft = fm.beginTransaction();

                /** Detaches the androidfragment if exists */

                if(androidFragment!=null)

                    ft.detach(androidFragment);

                /** Detaches the applefragment if exists */

                if(appleFragment!=null)

                    ft.detach(appleFragment);

                /** If current tab is android */

                if(tabId.equalsIgnoreCase("android")){

                    if(androidFragment==null){

                        /** Create AndroidFragment and adding to fragmenttransaction */

                        ft.add(R.id.realtabcontent,new AndroidFragment(), "android");

                    }else{

                        /** Bring to the front, if already exists in the fragmenttransaction */

                        ft.attach(androidFragment);

                    }

                }else{    /** If current tab is apple */

                    if(appleFragment==null){

                        /** Create AppleFragment and adding to fragmenttransaction */

                        ft.add(R.id.realtabcontent,new AppleFragment(), "apple");

                     }else{

                        /** Bring to the front, if already exists in the fragmenttransaction */

                        ft.attach(appleFragment);

                    }

                }

                ft.commit();

            }

        };

        /** Setting tabchangelistener for the tab */

        tHost.setOnTabChangedListener(tabChangeListener);

        /** Defining tab builder for Andriod tab */

        TabHost.TabSpec tSpecAndroid = tHost.newTabSpec("android");

        tSpecAndroid.setIndicator("Tab 1",getResources().getDrawable(R.drawable.android));

        tSpecAndroid.setContent(new DummyTabContent(getBaseContext()));

        tHost.addTab(tSpecAndroid);

        /** Defining tab builder for Apple tab */

        TabHost.TabSpec tSpecApple = tHost.newTabSpec("apple");

        tSpecApple.setIndicator("Tab 2",getResources().getDrawable(R.drawable.apple));

        tSpecApple.setContent(new DummyTabContent(getBaseContext()));

        tHost.addTab(tSpecApple);

    }

}

---

16. Ubah AndroidManifest.xml

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

    package="in.wptrafficanalyzer.navigationtabdemo"

    android:versionCode="1"

    android:versionName="1.0" >

    <uses-sdk

        android:minSdkVersion="8"

        android:targetSdkVersion="15" />

    <application

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@android:style/Theme.Black" >

        <activity

            android:name=".MainActivity"

            android:label="@string/title_activity_main" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

</manifest>

Hasil Output:

Tab.1

Tab 2.

Posted in: