This is a simple tutorial on how to use tabs with fragment in android application.
Java
Latest commit 4ea665a Jan 21, 2014 @learnNcode Update README.md
Permalink
Failed to load latest commit information.
.settings first commit Dec 18, 2013
libs first commit Dec 18, 2013
res first commit Dec 18, 2013
src/com/learnncode/tabsample first commit Dec 18, 2013
.classpath first commit Dec 18, 2013
.project first commit Dec 18, 2013
AndroidManifest.xml first commit Dec 18, 2013
LICENSE.txt Added LICENSE.txt Dec 19, 2013
README.md Update README.md Jan 21, 2014
ic_launcher-web.png first commit Dec 18, 2013
proguard-project.txt first commit Dec 18, 2013
project.properties first commit Dec 18, 2013

README.md

TabWidgetSample

Demo on how to use tabs with fragment in android .

This is a simple tutorial on how to use tabs with fragment in android application.

Final output
Final Outout


In this application we are using fragment from android-support-v4.jar, you are required to add android-support-v4.jar into your app.

1] Create a class lets say "BaseActivity" as we are using fragments to show tabs. BaseActivity class will extends "android.support.v4.app.FragmentActivity" class.

Here is xml file for BaseActivity class

<android.support.v4.app.FragmentTabHost
       android:id="@android:id/tabhost"
       android:layout_width="match_parent"
       android:layout_height="match_parent" >
       <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"
               android:orientation="horizontal" />
           <FrameLayout
               android:id="@android:id/tabcontent"
               android:layout_width="match_parent"
               android:layout_height="match_parent" />
       </LinearLayout>
   </android.support.v4.app.FragmentTabHost>

2] BaseActivity class

In onCreate() method first setup tabhost instance and then add tabs

mTabHost  = (FragmentTabHost) findViewById(android.R.id.tabhost);
mTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);
mTabHost.addTab(mTabHost.newTabSpec("tab1").
setIndicator(getResources().getString(R.string.tab_one)),
TabOneFrgment.class, null);
mTabHost.addTab(mTabHost.newTabSpec("tab2").
setIndicator(getResources().getString(R.string.tab_two)),
TabTwoFrgment.class, null);

Here we are adding tabs in tabhost using addTab method

addTab method takes 3 parameter:

a] TabSpec instance : you can define tab indicator, can assign a tag for this tab etc.

b] activity which you want to show when user clicks on this tab.

c] bundle instance

setIndicator(): here you can set text and or icon which will displayed on tab.

You can also add icon with tabs

              Ex : mTabHost.addTab(mTabHost.newTabSpec("tab2").
                     setIndicator(getResources().getString(R.string.tab_two),                    
                     getResources().getDrawable(R.drawable.ic_launcher)),
                    TabTwoFrgment.class, null);

Tag a tab

By default tabs are shown in the same order as they were added in tabhost.

You can set a tab as current tab by using setCurrentTabByTag method.

Ex : mTabHost.setCurrentTabByTag("tag2");

You can also show a tab by using tags :

Ex : TabOneFrgment tabOneFrgment = (TabOneFrgment)  fragmentManager.findFragmentByTag("tab1");
fragmentTransaction.show(tabOneFrgment);
fragmentTransaction.commit();

How to navigate tabs???

Tab navigation has 2 aspects:

a] create a new fragment (add a fragment)

b] show already added fragment.

It is easy to create a new fragment on tab click but the trickiest part is to retain fragment state while changing tabs.

So in the sample app we are retaining fragment state whenever user changes a tab.

For this you need to add setOnTabChangedListener to the tab host.

Ex : mTabHost.setOnTabChangedListener(new OnTabChangeListener() {.....});

Inside setOnTabChangedListener we need check whether the intended fragment is already created (please refer fragment life cycle).

If fragment is already created we just need to show that fragment else we will have to create a new fragment and hide current fragment.

mTabHost.setOnTabChangedListener(new OnTabChangeListener() {
@Override
public void onTabChanged(String tabId) {
android.support.v4.app.FragmentManager fragmentManager = getSupportFragmentManager();
TabOneFrgment tabOneFrgment = (TabOneFrgment) fragmentManager.findFragmentByTag("tab1");
TabTwoFrgment tabTwoFrgment = (TabTwoFrgment) fragmentManager.findFragmentByTag("tab2");
android.support.v4.app.FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
if(tabId.equalsIgnoreCase("tab1")){
if(tabOneFrgment != null){
if(tabTwoFrgment != null){
fragmentTransaction.hide(tabTwoFrgment);
}
fragmentTransaction.show(tabOneFrgment);
}
}else{
if(tabTwoFrgment != null){
if(tabOneFrgment != null){
fragmentTransaction.hide(tabOneFrgment);
       }
fragmentTransaction.show(tabTwoFrgment);
}
}
fragmentTransaction.commit();
}
});

Happy Coding Happy Learning :)