How to change the color of the tabs of the tabhost in android application
In Android, you can change the colour of
the tab. By default the colour of the tab host is grey. I want to change the colour of the unselected
tab as #a45d0a i.e Dark orange [Brown
tone] and the selected tabs as #A42C0A i.e Dark red.
Here first I initialize the tabs and each
tab is associated with a list view.
final TabHost tabs =
(TabHost)popupView.findViewById(R.id.TabHost01);
(TabHost)popupView.findViewById(R.id.TabHost01);
tabs.setup();
tabs.getTabWidget().setShowDividers(TabWidget.SHOW_DIVIDER_MIDDLE);
tabs.getTabWidget().setDividerDrawable(R.drawable.custom_tab_indicator_divider);
// create tab
1
1
TabHost.TabSpec tab1 = tabs.newTabSpec(“tab1”);
tab1.setContent(R.id.listView01);
tab1.setIndicator(getTabIndicator(tabs.getContext(),
“Dialed”,
getResources().getDrawable(R.color.white)));
“Dialed”,
getResources().getDrawable(R.color.white)));
tabs.addTab(tab1);
// create tab 2
TabHost.TabSpec tab2 = tabs.newTabSpec(“tab2”);
tab2.setContent(R.id.listView02);
tab2.setIndicator(getTabIndicator(tabs.getContext(),
“Missed”,
getResources().getDrawable(R.color.white)));
“Missed”,
getResources().getDrawable(R.color.white)));
tabs.addTab(tab2);
// create tab 3
TabHost.TabSpec tab3 = tabs.newTabSpec(“tab3”);
tab3.setContent(R.id.listView03);
tab3.setIndicator(getTabIndicator(tabs.getContext(),
“Received”,
getResources().getDrawable(R.color.white)));
“Received”,
getResources().getDrawable(R.color.white)));
tabs.addTab(tab3);
Before dealing with the onTabChanged()
event, we need to set the intial colors for the tabs with the below code:
for(int i=0;i< tabs.getTabWidget().getChildCount();i++)
{
if (i == 0) tabs.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor(“#A42C0A
“));
“));
else tabs.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor(“#A45D0A
“));
“));
}
Now we need to deal with the on tab
changed event.
tabs.setOnTabChangedListener(new OnTabChangeListener(){
@Override
public void onTabChanged(String
tabId) {
tabId) {
// TODO Auto-generated method stub
for(int i=0;i< tabs.getTabWidget().getChildCount();i++)
{
tabs.getTabWidget().getChildAt(i).setBackgroundColor(Color.parsecolor(“#A45D0A
“)); //unselected
“)); //unselected
}
tabs.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundColor(Color.parseColor(“#A42C0A
“)); // selected
“)); // selected
}
});
Now you need to populate data for the list
view which are associated with the respective tabs. That’s it. Happy Coding..
