Creating Navigation tabs using TabHost and Fragments in Android

In this article, we will develop an  Android application containing navigation tabs. There are many ways by which we can add navigation tabs to an application.

Beginning with Android 3.0, the standard way to create navigation tab is using action bar. Please read the article titled ” Adding Navigation Tabs containing listview to Action Bar in Android” to see how to create navigation tabs in Android 3.0 and above.

For Android 2.x and above, we can use Action bar Sherlock library to create navigation library. Please read the article titled ” Adding Navigation tabs containing listview to Action Bar in Pre Honeycomb versions using Sherlock library” to see how to create navigation tabs using Sherlock library.

In this application, we are creating navigation tabs using TabHost and Fragments. Since fragments are available only with Android 3.0 and above, we will make use Android’s support library to work this application in Android 1.6 and above.

This application is developed in Eclipse 3.7.2 with ADT plugin (20.0.2) and Android SDK ( R20.0.1 ) .

1. Create a new Android application project namely “NavigationTabDemo”

Figure 1 : New Android Application Project

2. Design Application Launcher

Figure 2 : Design Application Launcher

3. Create a blank activity

Figure 3 : Create a blank activity

4 .Enter Main Activity Details

Figure 4 : Enter MainActivity Details

5. Adding Android’s Support library

With ADT plugin version 20.0.2, Android’s support library is added to the project automatically. If not added automatically, then you can add it by Right click “NavigationTabDemo” ( Package Explorer ) and select Android Tools -> Add Support Library

6. Download the given below file and extract to drawable-ldpi

Navigation Tab to Action bar - drawable-ldpi.zip 2.22 KB

Download drawable-ldpi.zip

7. Download the given below file and extract to drawable-mdpi

Navigation Tab to Action bar - drawable-mdpi.zip 6.49 KB

Download drawable-mdpi.zip

8. Download the given below file and extract to drawable-hdpi

Navigation Tab to Action bar - drawable-hdpi.zip 7.44 KB

Download drawable-hdpi.zip

9. Create a new folder drawable in res and create a new file namely android.xml with the given below code

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

10. Create new file namely apple.xml in res/drawable directory created in the above step and add the given below code

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

11. Update the 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>

12. Create new class file 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[]{
        "Jelly Bean",
        "IceCream Sandwich",
        "HoneyComb",
        "Ginger Bread",
        "Froyo"
    };

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

13. Create new class file 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[]{
        "Mountain Lion",
        "Lion",
        "Snow Leopard",
        "Leopard",
        "Tiger",
        "Panther",
        "Jaguar",
        "Puma"
    };

    @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. Create new class file 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. Update the file 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("Android",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("Apple",getResources().getDrawable(R.drawable.apple));
        tSpecApple.setContent(new DummyTabContent(getBaseContext()));
        tHost.addTab(tSpecApple);

    }
}

16. Update the file 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>

17. Screenshot of the application in execution

Figure 5 : Screenshot of the application in Execution

18. Download

Navigation Tab using TabHost and Fragments - Revised - R1 833.57 KB

Download Full Source Code

19. Reference

http://developer.android.com/guide/index.html

How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com

---

Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :

---

Tags: fragment, ListActivity, ListFragment, listview, tab, tabhost