Android TabWidget without TabHost - SingleTabWidget

I am a big fun of fragments in Android. Design with fragments is very useful for developers when you think about different ui for phone and tablet. And we have an ActionBar when we want to design our interface with Navigation Tabs.
Before fragments and the action bar, we have used TabActivity, TabHost and TabWidget for tabbed design. Now, we can use the same structure for fragments with FragmentTabHost. Are you sure?

When i was checking FragmentTabHost sample, the layout and setup of FragmentTabHost like below
setContentView(R.layout.fragment_tabs);
mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);
mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
realtabcontent? what is that? what is wrong with the tabcontent?

When i check out the fragment_tabs.xml layout, i can see what it is. Now, realtabcontent is our new content. And when i check out the FragmentTabHost.java code, i can understand why do we need the realtabcontent.

Another think about FragmentTabHost is when showing/hiding fragments, it uses attach/detach methods. It means, we have to be more careful about fragment life cycle and savedInstanceState. And also lot of questions about FragmentTabHost

I just want to show simple information by simple tab navigation. Imagine that, you are developing a movie star application. In first tab you will show simple information about movie star, second tab about films, and third tab about awards. And you want to show all information in one ui on the tablet. How it can be hard? Just create 3 fragments about informations. Show them with tab navigation in phone and show them in one ui on the tablet.

Ok. I need a TabWidget without FragmentTabHost(Maybe, you too). Yes i know, there is a lot of beautiful samples and widgets on the net. And generally, they are created from RadioGroup and RadioButton. But why don't we use the futures of TabWidget. We just create simple selectors and set them.

When you check out the TabWidget.java, it is a powerful widget and done a lot of thinks for us. There is one magic function in this code that we have to interested in
public void onFocusChange(View view, boolean hasFocus)
an event is fired from this function to TabHost about tab changing.

And also, when you check out the TabHost.java, there is another magic function is there ,
public void addTab(TabSpec tabSpec)
this function is responsible about to add our tab indicator to TabWidget.

So, we need two thinks. First, we need an addTab function to add our tab indicator to our TabWidget, and the second, we have to override onFocus function to eliminate TabHost control.

I created my own SingleTabWidget like that which is extended from the original TabWidget. You can find source code in the sample project. And I created 2 methods in it to set layout and add tabs.

First is
public void setLayout(int layoutResId) {
to set tab indicator layout like TextView, ImageView or TextView and ImageView in LinearLayout.
Also, you can put whatever you want as a tab indicator and change source code for your requirements.

Second is
public void addTab(int imageResId, String title)
to add tab indicator to TabWidget.

As you can see in sample project, i have created single_tab_indicator.xml layout as a tab indicator. And set it to TabWidget like below
tabWidget.setLayout(R.layout.single_tab_indicator);
And add tab like below,
tabWidget.addTab(R.drawable.single_tab_indicator_android_red_selector,
                 getString(R.string.tab_1));
That's all. I have a TabWidget without TabHost. And i can control my fragments easily.


Also, as you guess you don't need fragments to show separated views. You can create different kind of layouts to show/hide them.

You can find source code and sample usage on

1 comments:

Unknown said...

Sir how to implement on orientation change,, it come to tab1 from other tab on configration change and how to we have implement nest fragment onConfigration change.
Thanks in a lot ...

Post a Comment