Tuesday, May 12, 2015

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);
             
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: