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);
tabs.setup();
tabs.getTabWidget().setShowDividers(TabWidget.SHOW_DIVIDER_MIDDLE);
tabs.getTabWidget().setDividerDrawable(R.drawable.custom_tab_indicator_divider);
// create tab
1
TabHost.TabSpec tab1 = tabs.newTabSpec("tab1");
tab1.setContent(R.id.listView01);
tab1.setIndicator(getTabIndicator(tabs.getContext(),
"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)));
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)));
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) {
// TODO Auto-generated method stub
for(int i=0;i< tabs.getTabWidget().getChildCount();i++)
{
tabs.getTabWidget().getChildAt(i).setBackgroundColor(Color.parsecolor("#A45D0A
")); //unselected
}
tabs.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundColor(Color.parseColor("#A42C0A
")); // selected
}
});
Now you need to populate data for the list
view which are associated with the respective tabs. That’s it. Happy Coding..
No comments:
Post a Comment