How to change the color of a selected tab in android tab host?

3.4k views Asked by At

I already have a tab widget which can change its child tab color when it was selected. But this is buggy, border lines from my android tab widget is not consistently working well. sometimes the borders lines turns to color white when I am selecting another tab to make it clear, this is my code for my activity. Im sorry if I can't provide images because I haven't earned a lot of reputations here at stack overflow

@SuppressWarnings("deprecation")
public class TabHostActivity extends TabActivity {

    private TabHost tabHost;
    private int currentTab = 0;
    private int lastTab = 0;

    @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);

            requestWindowFeature(Window.FEATURE_NO_TITLE);
            getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);

            setContentView(R.layout.activity_tabhost);
            UserAccount userAccount = new UserAccount();

            tabHost = (TabHost) findViewById(android.R.id.tabhost);


            TabSpec tab1 = tabHost.newTabSpec("First Tab");
            tab1.setContent(new Intent(this, HomeActivity.class));
            tab1.setIndicator("",getResources().getDrawable(R.drawable.home_icon));
            tabHost.addTab(tab1);

            TabSpec tab2 = tabHost.newTabSpec("Second Tab");
            tab2.setContent(new Intent(this, About.class));
            tab2.setIndicator("",getResources().getDrawable(R.drawable.about_icon));
            tabHost.addTab(tab2);


            TabSpec tab3 = tabHost.newTabSpec("Third Tab");
            tab3.setContent(new Intent(this, GridViewActivity.class));
            tab3.setIndicator("",getResources().getDrawable(R.drawable.gallery_icon));
            tabHost.addTab(tab3);


            getTabHost().setOnTabChangedListener(new OnTabChangeListener() {
                 public void onTabChanged(String tabId)
                 {
                        currentTab = getTabHost().getCurrentTab();

                        setCurrentTabColor();

                        lastTab =currentTab;
                 }
            });

            getTabWidget().getChildAt(lastTab).setBackgroundColor(Color.GRAY);
        }

        public void setCurrentTabColor(){
            getTabWidget().getChildAt(currentTab).setBackgroundColor(Color.GRAY);
            getTabWidget().getChildAt(lastTab).setBackgroundColor(Color.parseColor("#FCAFA6"));
        }
}

this is my xml for tabhost which is set the background color of my tab widget to pink

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:id="@+id/LinearLayout01"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1" >
        </FrameLayout>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:background="#FCAFA6" >
        </TabWidget>
    </LinearLayout>

</TabHost>
1

There are 1 answers

0
wolfaviators On

first, in my activity, I instantiated my tab host

tabHost = (FragmentTabHost) findViewById(R.id.tabContainer);
tabHost.setup(this, getSupportFragmentManager(), R.id.tabContent);
    tabHost.addTab(tabHost.newTabSpec("1").setIndicator("New Tab"),
            PageFragment.class, null);

I wrote a method to update my tabs's color based on whether or not it was selected

protected void updateTabs() {



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

        if (tabHost.getTabWidget().getChildAt(i).isSelected()) {
            SessionState.getSelectedIndex().setSelectedPage(i);
            tabHost.getTabWidget()
                    .getChildAt(i)
                    .setBackgroundResource(
                            R.drawable.tab_selected_background);
        } else {

            tabHost.getTabWidget()
                    .getChildAt(i)
                    .setBackgroundResource(
                            R.drawable.tab_unselected_background);

        }
    }

}

then I called that method every time the tab changed

tabhost.setOnTabChangedListener(new OnTabChangeListener() {

        @Override
        public void onTabChanged(String tabId) {
            updateTabs();
        }
    });

I hope this helps