Is it possible to change actionbar tab indicator programmatically

Question

How can i change programmatically the selected tab indicator of my action bar ? i have read about tab styling, and Tab.setCustomView() method, but none of these helps :

With tab styles, i can change the indicator color, but it will remain for all tabs (i want to have an indicator for each tab).
With tab custom view, i have used a layout with a TextView for tab title, and View for managing the indicator color. In the java i change the View's background dynamically, but the problem with that is the View's background doesn't match tabs bounds.

<TextView
    android:id="@+id/custom_tab_text"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:layout_centerInParent="true"
    android:layout_centerHorizontal="true"
    android:gravity="center|center_horizontal"
    android:textStyle="bold"/>

<View 
    android:id="@+id/custom_tab_view"
    android:layout_width="match_parent"
    android:layout_height="10dp" 
    android:layout_alignParentBottom="true"/>

Can somebody tell me where i'am wrong ? Is there another way to do it ? Thanks

Ru using your parent layout background as android:backgrund="@drawable/tab_indicator" http://stackoverflow.com/q/3725692/1012284 — Padma Kumar, Aug 28 '13 at 11:37
try to use `setLeftStripDrawable` and `setRightStripDrawable` — Lia Pronina, Aug 28 '13 at 11:38
@PadmaKumar, i have tried that, but the tab bounds is greater than my parent layout. i have tried also setting `padding and marigin` at `0dp` but nothing. — S.Thiongane, Aug 28 '13 at 11:48
@LiaPronina thanks, but i m not talking about left and right, but bottom drawable. thanks — S.Thiongane, Aug 28 '13 at 11:50

score 17 · Accepted Answer · answered Aug 28 '13 at 15:03

I have succeeded to implement what i wanted by using @Padma's answer to generate my tab indicator backgrounds : i needed 5 selectors : green, yellow, blue, orange and red. So i created 5 xml drawables (tabs_selector_red.xml, tabs_selector_blue.xml, etc...) :

tabs_selector_green.xml :

    <!-- Non focused states -->
<item android:drawable="@android:color/transparent" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>

<!-- Focused states -->
<item android:drawable="@android:color/transparent" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>

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

<!-- Focused states -->
<item android:drawable="@android:color/transparent" android:state_focused="true" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="true" android:state_pressed="true" android:state_selected="true"/>

I also created a layer-list for each xml background : layer_bg_selected_tabs_green.xml

<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/tab_green" />

        <padding android:bottom="5dp" />
    </shape>
</item>
<item>
    <shape android:shape="rectangle" >
        <solid android:color="#FFFFFF" />
    </shape>
</item>

And finally, in the Java, i switch the background dynamically buy using selected tab's custom view and index :

private static final int[] TABS_BACKGROUND = {
        R.drawable.tabs_selector_orange, R.drawable.tabs_selector_green,
        R.drawable.tabs_selector_red, R.drawable.tabs_selector_blue,
        R.drawable.tabs_selector_yellow };
/*
BLA BLA BLA
*/
@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
    // TODO Auto-generated method stub
    RelativeLayout tabLayout = (RelativeLayout) tab.getCustomView();
    tabLayout.setBackgroundResource(TABS_BACKGROUND[tab.getPosition()]);
    tab.setCustomView(tabLayout);
/* ... */
}

Now let's add some screenshots :

green blue red

As you see, the `indicator` doesn't match properly the tab's bounds. If someone has an idea to solve that ?! — S.Thiongane, Aug 28 '13 at 15:06
Getting Java.lang.NullPontException on "tabLayout.setBackgroundResource(TABS_BACKGROUND[tab.getPosition()]);". — AndroidHacker, Feb 10 '14 at 07:04
`tabLayout` may be null, ask another question with you code, we will see what's going wrong ! — S.Thiongane, Feb 10 '14 at 07:38
Please check out my question at http://stackoverflow.com/questions/21673531/pragmatically-set-actioinbartab-background-color-with-tab-selector-line-at-botto — AndroidHacker, Feb 10 '14 at 09:39
you can probably fix the tabs not matching properly by setting tabPaddingEnd and tabPaddingStart to 0 dp on the TabLayout — Espen Riskedal, Jan 05 '16 at 12:30

score 5 · Answer 2 · answered Aug 28 '13 at 12:05

//your tab bar should be

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/Wrap"
    android:background="@drawable/tabs_selector"
    android:gravity="center_horizontal|bottom"
    android:minHeight="@dimen/size_fourty"
     >
    <TextView
    android:id="@+id/custom_tab_text"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:layout_centerInParent="true"
    android:layout_centerHorizontal="true"
    android:gravity="center|center_horizontal"
    android:textStyle="bold"/>

</RelativeLayout>

//your tabs_selector.xml should like this

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

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

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

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

// your layer_bg_unselected_tabs should be like this

<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/red" />

        <padding android:bottom="2dp" />
    </shape>
</item>
<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/gray" />
    </shape>
</item>

// your layer_bg_selected_tabs should be like this

<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/red" />

        <padding android:bottom="8dp" />
    </shape>
</item>
<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/gray" />
    </shape>
</item>

thanks but it doesn't solve entirely my problem. I used it to have the different `indicator` backgrounds (red, green, blue, etc...) but i still can not change it dynamically in the code. i tried to change the parent layout background of the selected tab in the `OnTabSelected` by using the `setCustomView` method, but that seems not working ! — S.Thiongane, Aug 28 '13 at 13:03
how red, green, blue will indicate tab can you share your screens how it look like? — Padma Kumar, Aug 28 '13 at 13:19

Is it possible to change actionbar tab indicator programmatically

2 Answers2

Linked