Android TabHost Tutorial – Part 2

Moving ahead from TabHost Tutorial Part 1, here we are going to see about few needed things for Tab Bar Design.

• Set TabWidget Tab Icon
• Set TabWidget Tab background/Color
• Set Current Tab

Set TabWidget Tab Icon
In previous article we saw how to set text (name) to tab bar. Now we are going to see about how to set both text (name) & icon for a tab.
For ex:- If the tab name is ‘About Us’ you can set a icon related to ‘About Us’.
To set text & icon we need to use setIndicator property.
tabSpec.setIndicator(Char,Drawable);

 

1	firstTabSpec.setIndicator("First Tab Name", getResources().getDrawable(R.drawable.logo));

2	secondTabSpec.setIndicator("Second Tab Name", getResources().getDrawable(R.drawable.logo));

Set Current Tab
We can manually set any tab to visible at first view.

 

1	tabHost.getTabWidget().setCurrentTab(1);

we can use setCurrentTab() in run time too.

Set TabWidget Tab Background / Color

In default android tab bar color will be in Grey, you can easily change the color of the tab bar.
It will be very useful when you are using different UI graphics for your App.

use the below line of code in onCreate() to display in first time.

 

1	for(int i=0;i<tabHost.getTabWidget().getChildCount();i++)

2

{

3	tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#7392B5"));

4

}

To set different color for current selected tab. use

 

1	tabHost.getTabWidget().getChildAt(0).setBackgroundColor(Color.parseColor("#4E4E9C"));

Here 0 position is the first tab.

When you change the tab selection you need to change your selected color to that current tab & replace the default color to other tab. For that use OnTabChangeListener(). These method will be called when you change the tab selection.

 

01

@Override

02	public void onTabChanged(String tabId) {

03	// TODO Auto-generated method stub

04	for(int i=0;i

05

{

06	tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#7392B5"));

07

}

08

09	tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundColor(Color.parseColor("#4E4E9C"));

10

}

Screenshot

You can download the full source code here

TabBar-Part2.zip