Remove Actionbar Tabs indicator on Android

Question

For default Actionbar tabs comes with the blue indicator (how much is selected) and my question is how do I remove this blue indicator.

I intend to use icons in these tabs, but as it is shown the icon and indicator in blue, so I want to remove the indicator. I am using the style Holo

Answer 1

Removing the Indicator is not easy.

The background of Tab of ActionBar is stylized that way:

<?xml version="1.0" encoding="utf-8"?>
<!-- Licença, omitida por espaço -->

<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="@color/transparent" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />

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

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

    <!--    Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />
</selector>

As you can see, there’s a combination for each of the states: state_selected, state_focused and state_pressed.

The person responsible for placing the indicator is the status selected, so just remove the items that define that state.

<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="@color/transparent" />

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

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

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

I removed that drawable of the source code of Holo Theme of Android.

To style the entire tab is easy, just include an element in your theme, to reset the background of the Tab.

<style name="AppTheme" parent="@android:style/Theme.Holo">
    <item name="actionBarTabStyle">@style/MyActionBarTabStyle</item>
    <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
</style>

<style name="MyActionBarTabStyle" parent="@android:style/Widget.Holo.ActionBar.TabView">
    <item name="android:background">@drawable/my_tab_indicator_ab_holo</item>
</style>

Now just create a file called my_tab_indicator_ab_holo.xml in the briefcase /res/drawable.

It is necessary to get the images 9 patch which are referred to in drawable and it’s them: list_focused_holo, list_pressed_holo_dark and tab_unselected_pressed_holo, because it is not possible to reference the resources internal platform.

For that, I resorted to Android source code on Github to get these drawables, the links are the following, the images are next:

HDPI resolution:

list_focused_holo.9.png -

list_pressed_holo_dark.9.png -

tab_unselected_pressed_holo.9.png -

MDPI resolution:

list_focused_holo.9.png -

list_pressed_holo_dark.9.png -

tab_unselected_pressed_holo.9.png -

XHDPI resolution:

list_focused_holo.9.png -

list_pressed_holo_dark.9.png -

tab_unselected_pressed_holo.9.png -

Resolution XXHDPI:

list_focused_holo.9.png -

list_pressed_holo_dark.9.png -

tab_unselected_pressed_holo.9.png -

Download these images and place them in their folders: /res/drawable-hdpi, /res/drawable-mdpi, /res/drawable-xhdpi and /res/drawable-xxhdpi.

Unfortunately this is the only way I see to stylize, without losing the original background.