Search code examples
androidxmlandroid-tabhost

Trying to change tab indicator color


I've generated a custom action bar here and everything works except for tabs. Tab indicator and tab background color stays the same no matter what.

tab_indicator_ab_recorder.xml file:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_recorder" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_recorder" />

<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_recorder" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_recorder" />

<!-- Pressed -->
<!--    Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_recorder" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_recorder" />

<!--    Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_recorder" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_recorder" />

Accourding to documentation, I need to override background attribute of tab layout with this xml file. But how do I do it? I tried doing this:

<TabWidget
    android:id="@android:id/tabs"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/tab_indicator_ab_recorder"/>

but this isn't working. Any idea how could I fix this?


Solution

  • You could specify the tab indicator in your java code. Below is what I did when setting up the tab host. Added complete code with two tabs for clarification. The getTabIndicator() method is the relevant part though.

    private void initTabs(String currentTab) {
        mTabHost = (TabHost) mRootView.findViewById(R.id.orderTabHost);
        mTabHost.setup();
    
        // Add drawing tab
        TabHost.TabSpec drawingTab = mTabHost.newTabSpec(DRAWING_TAB_TAG);
        drawingTab.setContent(R.id.tab_drawing_container);
        String drawingTitle = getResources().getString(R.string.drawing_title);
        drawingTab.setIndicator(getTabIndicator(drawingTitle));
        mTabHost.addTab(drawingTab);
    
        // Add detail tab
        TabHost.TabSpec detailTab = mTabHost.newTabSpec(DETAIL_TAB_TAG);
        detailTab.setContent(R.id.tab_info_container);
        String detailTitle = getResources().getString(R.string.detail_title);
        detailTab.setIndicator(getTabIndicator(detailTitle));
        mTabHost.addTab(detailTab);
    }
    
    // Call this for every tab.
    private View getTabIndicator(String tabTitle) {
        View tabIndicator = LayoutInflater.from(getActivity()).inflate(
                R.layout.tab_indicator_holo, mTabHost.getTabWidget(), false);
        TextView title = (TextView) tabIndicator
                .findViewById(android.R.id.title);
        title.setText(tabTitle);
        return tabIndicator;
    }