Android Tabs with Fragments

On July 10, 2011, in UX, by Evelina Vrabie

I’ve been recently using the Android Compatibility Library in a project where I found myself in the need for a tabbed layout, in which each of the tab’s children would be a fragment. The usual way to do this is for the activity you need the tabs in to extend TabActivity. However, if you want to use fragments in your activity, you must extend android.support.v4.app.FragmentActivity instead. Since Java doesn’t allow multiple class inheritance, you find yourself in a bit of dilemma.

Well, there’s a simple solution for making this work. What you need is basically to use a TabHost to hold both the TabWidget (which are the actual tab labels) and their content. Since the TabHost is nothing more than a View, you can place that anywhere, including in the root of a fragment defined in XML, like the one below (tabs_fragment.xml). I am hoping the comments in the code are self-explanatory enough.

<?xml version="1.0" encoding="utf-8"?>
<TabHost
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@android:id/tabhost"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:background="#EFEFEF">

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

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

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

				<FrameLayout
					android:id="@+id/tab_1"
					android:layout_width="fill_parent"
					android:layout_height="fill_parent" />

				<FrameLayout
					android:id="@+id/tab_2"
					android:layout_width="fill_parent"
					android:layout_height="fill_parent" />

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

Don’t forget to use the correct ids (@android:id/tabhost, @android:id/tabs and @android:id/tabcontent) because the TabHost expects exactly these in order to retrieve the references for each component of the view. If you want to use a custom style for your tabs, it is easy to do so by creating a tab_selector.xml in /res/drawables in which you can use different colors or backgrounds for each tab state. You can find an example in the attached zip.

The equivalent code for actually creating the tabs is in TabsFragment.java below.

package org.codeandmagic.android;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

public class TabsFragment extends Fragment implements OnTabChangeListener {

	private static final String TAG = "FragmentTabs";
	public static final String TAB_WORDS = "words";
	public static final String TAB_NUMBERS = "numbers";

	private View mRoot;
	private TabHost mTabHost;
	private int mCurrentTab;

	@Override
	public void onAttach(Activity activity) {
		super.onAttach(activity);
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		mRoot = inflater.inflate(R.layout.tabs_fragment, null);
		mTabHost = (TabHost) mRoot.findViewById(android.R.id.tabhost);
		setupTabs();
		return mRoot;
	}

	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);
		setRetainInstance(true);

		mTabHost.setOnTabChangedListener(this);
		mTabHost.setCurrentTab(mCurrentTab);
		// manually start loading stuff in the first tab
		updateTab(TAB_WORDS, R.id.tab_1);
	}

	private void setupTabs() {
		mTabHost.setup(); // you must call this before adding your tabs!
		mTabHost.addTab(newTab(TAB_WORDS, R.string.tab_words, R.id.tab_1));
		mTabHost.addTab(newTab(TAB_NUMBERS, R.string.tab_numbers, R.id.tab_2));
	}

	private TabSpec newTab(String tag, int labelId, int tabContentId) {
		Log.d(TAG, "buildTab(): tag=" + tag);

		View indicator = LayoutInflater.from(getActivity()).inflate(
				R.layout.tab,
				(ViewGroup) mRoot.findViewById(android.R.id.tabs), false);
		((TextView) indicator.findViewById(R.id.text)).setText(labelId);

		TabSpec tabSpec = mTabHost.newTabSpec(tag);
		tabSpec.setIndicator(indicator);
		tabSpec.setContent(tabContentId);
		return tabSpec;
	}

	@Override
	public void onTabChanged(String tabId) {
		Log.d(TAG, "onTabChanged(): tabId=" + tabId);
		if (TAB_WORDS.equals(tabId)) {
			updateTab(tabId, R.id.tab_1);
			mCurrentTab = 0;
			return;
		}
		if (TAB_NUMBERS.equals(tabId)) {
			updateTab(tabId, R.id.tab_2);
			mCurrentTab = 1;
			return;
		}
	}

	private void updateTab(String tabId, int placeholder) {
		FragmentManager fm = getFragmentManager();
		if (fm.findFragmentByTag(tabId) == null) {
			fm.beginTransaction()
					.replace(placeholder, new MyListFragment(tabId), tabId)
					.commit();
		}
	}

}

Now that you have the content of your fragment in place, you need to create the tab’s children (which are fragments, like the title says). You can subclass the android.support.v4.app.Fragment (I used a ListFragment in this example). You can also use loaders if your fragment needs to do some background work. In the example below, I use an AsyncTaskLoader to simulate a time-consuming operation in background, at the end of which some words or numbers are added into the list’s adapter and displayed inside a tab. You also need a LoaderCallback object (or your fragment can directly implement this interface) in order to communicate with the LoaderManager to create your loader and also know when its job is done.

package org.codeandmagic.android;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.ListFragment;
import android.support.v4.app.LoaderManager.LoaderCallbacks;
import android.support.v4.content.AsyncTaskLoader;
import android.support.v4.content.Loader;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;

public class MyListFragment extends ListFragment implements
		LoaderCallbacks<Void> {

	private static final String TAG = "FragmentTabs";

	private String mTag;
	private MyAdapter mAdapter;
	private ArrayList<String> mItems;
	private LayoutInflater mInflater;
	private int mTotal;
	private int mPosition;

	private static final String[] WORDS = { "Lorem", "ipsum", "dolor", "sit",
			"amet", "consectetur", "adipiscing", "elit", "Fusce", "pharetra",
			"luctus", "sodales" };
	private static final String[] NUMBERS = { "I", "II", "III", "IV", "V",
			"VI", "VII", "VIII", "IX", "X", "XI", "XII", "XIII", "XIV", "XV" };

	private static final int SLEEP = 1000;

	private final int wordBarColor = R.color.word_bar;
	private final int numberBarColor = R.color.number_bar;

	public MyListFragment() {
	}

	public MyListFragment(String tag) {
		mTag = tag;
		mTotal = TabsFragment.TAB_WORDS.equals(mTag) ? WORDS.length
				: NUMBERS.length;

		Log.d(TAG, "Constructor: tag=" + tag);
	}

	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);
		// this is really important in order to save the state across screen
		// configuration changes for example
		setRetainInstance(true);

		mInflater = LayoutInflater.from(getActivity());

		// you only need to instantiate these the first time your fragment is
		// created; then, the method above will do the rest
		if (mAdapter == null) {
			mItems = new ArrayList<String>();
			mAdapter = new MyAdapter(getActivity(), mItems);
		}
		getListView().setAdapter(mAdapter);

		// initiate the loader to do the background work
		getLoaderManager().initLoader(0, null, this);
	}

	@Override
	public Loader<Void> onCreateLoader(int id, Bundle args) {
		AsyncTaskLoader<Void> loader = new AsyncTaskLoader<Void>(getActivity()) {

			@Override
			public Void loadInBackground() {
				try {
					// simulate some time consuming operation going on in the
					// background
					Thread.sleep(SLEEP);
				} catch (InterruptedException e) {
				}
				return null;
			}
		};
		// somehow the AsyncTaskLoader doesn't want to start its job without
		// calling this method
		loader.forceLoad();
		return loader;
	}

	@Override
	public void onLoadFinished(Loader<Void> loader, Void result) {

		// add the new item and let the adapter know in order to refresh the
		// views
		mItems.add(TabsFragment.TAB_WORDS.equals(mTag) ? WORDS[mPosition]
				: NUMBERS[mPosition]);
		mAdapter.notifyDataSetChanged();

		// advance in your list with one step
		mPosition++;
		if (mPosition < mTotal - 1) {
			getLoaderManager().restartLoader(0, null, this);
			Log.d(TAG, "onLoadFinished(): loading next...");
		} else {
			Log.d(TAG, "onLoadFinished(): done loading!");
		}
	}

	@Override
	public void onLoaderReset(Loader<Void> loader) {
	}

	private class MyAdapter extends ArrayAdapter<String> {

		public MyAdapter(Context context, List<String> objects) {
			super(context, R.layout.list_item, R.id.text, objects);
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			View view = convertView;
			Wrapper wrapper;

			if (view == null) {
				view = mInflater.inflate(R.layout.list_item, null);
				wrapper = new Wrapper(view);
				view.setTag(wrapper);
			} else {
				wrapper = (Wrapper) view.getTag();
			}

			wrapper.getTextView().setText(getItem(position));
			wrapper.getBar().setBackgroundColor(
					mTag == TabsFragment.TAB_WORDS ? getResources().getColor(
							wordBarColor) : getResources().getColor(
							numberBarColor));
			return view;
		}

	}

	// use an wrapper (or view holder) object to limit calling the
	// findViewById() method, which parses the entire structure of your
	// XML in search for the ID of your view
	private class Wrapper {
		private final View mRoot;
		private TextView mText;
		private View mBar;

		public Wrapper(View root) {
			mRoot = root;
		}

		public TextView getTextView() {
			if (mText == null) {
				mText = (TextView) mRoot.findViewById(R.id.text);
			}
			return mText;
		}

		public View getBar() {
			if (mBar == null) {
				mBar = mRoot.findViewById(R.id.bar);
			}
			return mBar;
		}
	}
}

Now, all you need to do is create a FragmentActivity to accommodate your tabs fragment. You can either instantiate the fragment programmatically using the methods in the FragmentManager or by putting it directly in XML, like below (main.xml).

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">

	<fragment
		class="org.codeandmagic.android.TabsFragment"
		android:id="@+id/tabs_fragment"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent" />
</LinearLayout>

With that, your job is pretty much done. You can see in the screenshot the result and also can download the project that’s available in the attached zip. Enjoy!

FragmentTabs.tar

Jalota_arun

Thnx alot…this exact i have been lokking for last 3 days…!!gr8 post thnk u!!!
- nargis
  
  Thanks ..good tutorial..modified it to add icons ,tab selectors and a third tab too
  - kunal
    
    its not working
Evelina Vrabie

Glad to help
http://profiles.google.com/wp19831014 peng wang

thanks,it is help me .
Vinh Bui

Thanks a lot, it’s really useful to me.
tabbykitten

Thanks for tips
tab_1, tab_2 is overhead for tabhost_fragment.xml is overhead, you can use android.R.id.tabcontent directly
Brill Pappin

Best example of Tabs with Fragments i’ve seen yet. A simple as can be and the code is clean and obvious.
Brill Pappin

Here is anther tip. The tab in your example are left aligned.
if you add the android:layout_weight=”1″ attribute to the root LinierLayout of tabs.xml they will spread out to take up the whole width of the screen.

Long labels will still cause some tabs to be longer than others, but that would be an issue no matter what you did.

It was also easy to add an image to the tabs.xml so that you get a more “iphone” like effect.
- http://www.facebook.com/thanhbinh.gd Thanh Binh Bui
  
  Thank you. i love u :-*
- Kiko
  
  About the labels problem, when you add android:layout_weight=”1″ attribute, also set the android:layout_width=”0dp” and tabs will have same width
Abe Froman

When I try running the code you provided I just get a loading icon that never goes away. The done loading string appears in my LogCat but nothing is appearing on the screen. If you have any ideas what I may have done wrong please let me know.
- Brill Pappin
  
  Run it through the debugger, that’s that it’s for.
  I had to modify it as well for my project, but it works just fine.
  - Tom Karni
    
    I had the same problem when I used it in my project but not when I ran this package. Brill, how did you solve it?
- U Sargin
  
  i have used android-support-v13 no v4 and i have same problem
  - Tom Karni
    
    I finally solved it with:
    @Override
    public void onLoadFinished(Loader loader, Void result) {
    //update adapter
    …
    setListShown(true);
    }
    - CH4:D
      
      God, this really solved my issue as well! I’ve been up all night trying to customize this tutorial to suit my needs but even simple label and id adjustments screw this app up.
      
      I don’t know if this is an android or eclipse bug but i tried tracking the changes little by little and rerunning at each change.
      
      It appears that if you add one extra tab to the tabs_fragment.xml the whole application gets foobar’d. However, this may not be the exact cause but probably a consequence because the issue is intermittent.
      
      Sometimes the loading screen shows up even if you undo the changes and uninstall the app. Sometimes it just corrects itself after a few runs.
    - rathael
      
      Try to change “getListView().setAdapter(mAdapter);” by “setListAdapter(mAdapter);”.
http://twitter.com/cloudjacker Cloud Jacker

Thanks! I dont understand what your activity is doing though, why do the individual tabs load the words and numbers so slowly? Is that a fragment feature?

I need to use tabs to load full layouts. Ie tab 1 loads an activity and tab 2 loads a separate activity! But TabActivity and that entire methodology is deprecated, yet this fragment “replacement” isn’t very intuitive for froyo+
- Evelina Vrabie
  
  Have you read the code? The words are loaded slowly because I wanted to simulate an operation that takes time, like a network call. If you actually read the code you’ll see there’s a Thread.sleep() that does the trick (there’s a comment that says that as well).
  
  About the methodology, if you think it’s deprecated then use something else that you see fit. If you find a better way, please share so we can all learn
Pingback: The Android Tutorial Series Part 3 – Layout | My Experiments with Technology
Vinesh Gaadhe

Ohhh man u rocks… I was looking for this from last 24 hours…thanks a lot man
- http://uk.linkedin.com/in/evelinavrabie Evelina Vrabie
  
  I’m a woman, but that’s fine…glad to be of help
- http://frontiervillepardner.blogspot.com FrontierVille
  
  Evelina is not a man…
ye009

Can you post some code for listFragment with which used customlistAdapter in setAdapter and listfragment loads data from asychTaskLoader, I am having problem with how to refresh the listfragment when data is loaded from asynchTaskLoader. Please help
Dada Venki

hi i have read your tutorial its nice but i have a doubt if in any tab if i want to move another screen (same tab) like clicking any of the rows in listview how it can be done any suggestion will be a great help
Zerotvt

Thanks
samcool

Is there an article only for fragments ? I searched around for lot of tutorials and tried implementing by following them but couldn’t get it working. I am looking for fragment implementation which will work on all the android versions. That will be really helpful. Thank you in advance.
Tom Karni

This is a greate tutorial, helped me a lot.
Gladiatornoida

private TabSpec newTab(String tag, int labelId, int tabContentId) {
Log.d(TAG, “buildTab(): tag=” + tag);

View indicator = LayoutInflater.from(getActivity()).inflate(
R.id.tab,
(ViewGroup) mRoot.findViewById(android.R.id.tabs), false);
((TextView) indicator.findViewById(R.id.text)).setText(labelId);

TabSpec tabSpec = mTabHost.newTabSpec(tag);
tabSpec.setIndicator(indicator);
tabSpec.setContent(tabContentId);
return tabSpec;
}

Can you please give explanation for R.id.tab & indicator.findViewById(R.id.text). From where these ids come?
- http://www.facebook.com/kyle.beckman Kyle Beckman
  
  I have the same question…. any help?
  - Nelson
    
    I’m not sure about R.id.tab, but I think you actually mean android.R.id.tabs, but R.id.text is just the id of a TextView defined in the list_item.xml file. She’s not talking about it in the text, but if you download the tar file with the whole project there you can see that file, which is actually the layout for every single row displayed in the listview.
    - http://www.facebook.com/nico.sordoni Nico Sordoni
      
      R.id.tab doesn’t appear anywhere, but instead appear R.layout.tab, that is the layout used as “background” for the indicators of the tabs. R.id.text is a TextView inside this layout, used to contain the text of the tab’s indicator.
Gladiatornoida

I found it in your code. Thanks!
Pingback: Android Tabs with Fragments « tediscript.wordpress.com
Pingback: Android U_MISSING_RESOURCE_ERROR when populating a custom view in a ListFragment | PHP Developer Resource
kyk

Thanks for posting a working project!
Pingback: Android Fragments con pestañas | LiME Creative LabsLiME Creative Labs
http://profiles.google.com/mlaccessdev nicolas raby

Hi, android.support.v4.app.FragmentActivity , does I mean the code requires Android v4 at least ?
mith

Hi. Thanks for the wonderful code and tutorial. I have a question though. How could I make the tabs scrollable as in if I add many tabs , how to make it scrollable horizontally ?
Thanks
- mith
  
  A quick google search helped me.. This is how I did
  
  Hope this helps somebody.
  Thanks
- evelyne24
  
  Hey, thanks for the comment. My code has become a bit obsolete because there are other people out there creating compatibility libraries to support all kinds of ICS features, including tabs, tabs + swipe, etc. Best look for Jake Wharton’s libraries (he’s the author of ActionBarSherlock). Check out this library: https://github.com/JakeWharton/Android-ViewPagerIndicator/ it probably has everything you want.
  - Thomas Markle
    
    You should add an update at the top of the post, I just found the ABSherlock library and it looks like it’s a great time saver.
Filip Bulovic

Very nice example, thanks.
seetha

you are superb dear….
zx81

Hi, Thanx for nice example, saves lot of learning time.

BTW, what is R.layout.tab in newTab() and how can I create a proper XML for that element?
binhbt

Oh man. Thanks a lot. nice example :X:X:X:X:X:X:X:X::-*
Alex

this is crashing on second orientation change
CH4:D

Line 106 is wrong. It should just simply be
if (mPosition < mTotal).

As it stands, the last element in the array won't show up if you add the "- 1" because it stops one item behind.
jin

Hi, This tutorial really helped me a lot. I want to make a third tab, but unable to code it. Pl help for the same.
rathael

I think you must change “getListView().setAdapter(mAdapter);” by “setListAdapter(mAdapter);”.
Everton Barros

Very nice post, I needed to do something similar, only in my case I needed to put tabs in a popup, after picking up a bit, I managed to reach the final solution. Thank you!
nate

If you wanted to make one of the fragments a mapview how would you go about do that?
Dim

Is it simple enough to add each fragment to the backstack such that hitting the back button returns to the previous tab?
Dusan

OMFG! Does anybody know why i cant set weight atribut on root LinearLayout in tabs.xml. I tryed a lot of thing, but it wont work… I want tabs to spread out to take whole screen…
dereky

it really helps me a lot,thanks very much
Pingback: How to make tabs using fragments (using content by factory)? : Android Community - For Application Development
Pingback: Project for tabs using fragments not working video
Authman Apatira

This project (FragmentTabs) crashes when you rotate the device 4x.
http://completelybaked.blogspot.com/ Jim_Welke

Right on, Evalina! Great code sample; it clarified a lot things I (an Android newbie) was struggling with. Specifically, how to structure the .xml files so that configuration info and selectors work right. I appreciate the clarity in your comments, too. Thanks. Peace.
mesi

what is R.id.bar ? pls mention
rashid

How do i implement this using ListView instead of Creating a list of LinearLayouts? Pls help.
arw357

Thx . usefull indeed !
Shakir Orakzai

wonderfull very nice

Android Magic

"It's not easy being green…"

Android Tabs with Fragments

About the author

Evelina Vrabie

Recent Posts

Archives

Comments