how to change tab indicator underline height in actionbar

Question

In my actionbar, I want to minimize the height of selected tab underline. I tried to minimize the height of tab_selected.9.png, tab_selected_focused.9.png and tab_selected_pressed.9.png in drawable. But nothing affect, I think I am following the wrong way. And for actionbar and tab, I use android.support.v7.app.ActionBar and android.support.v7.app.ActionBar.Tab. Any suggestion greatly appreciated.

Thank

theme.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
       parent="@style/Theme.AppCompat.Light.DarkActionBar">

    <!-- Support library compatibility -->
    <item name="actionBarTabStyle">@style/MyActionBarTabs</item>

</style>

<!-- ActionBar tabs styles -->
<style name="MyActionBarTabs"
       parent="@style/Widget.AppCompat.ActionBar.TabView">
    <!-- tab indicator -->
    <item name="android:background">@drawable/actionbar_tab_indicator</item>

    <!-- Support library compatibility -->
    <item name="background">@drawable/actionbar_tab_indicator</item>
</style>
</resources>

actionbar_tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<!-- STATES WHEN BUTTON IS NOT PRESSED -->

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

<!-- Focused states (such as when focused with a d-pad or mouse hover) -->
<item android:state_focused="true" android:state_selected="false"
      android:state_pressed="false"
      android:drawable="@drawable/tab_unselected_focused" 
      />
<item android:state_focused="true" android:state_selected="true"
      android:state_pressed="false"
      android:drawable="@drawable/tab_selected_focused" />


<!-- STATES WHEN BUTTON IS PRESSED -->

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

<!-- Focused states (such as when focused with a d-pad or mouse hover) -->
<item android:state_focused="true" android:state_selected="false"
      android:state_pressed="true"
      android:drawable="@drawable/tab_unselected_pressed" />
<item android:state_focused="true" android:state_selected="true"
      android:state_pressed="true"
      android:drawable="@drawable/tab_selected_pressed" />
</selector>

You are using a deprecate navigation mode. Check the TabLayout in the desing support library. — Gabriele Mariotti, Aug 18 '15 at 06:19

score 1 · Answer 1 · edited May 23 '17 at 10:28

I have found the answer in this link - Is it possible to change actionbar tab indicator programmatically.

Instance of using 9 patch image for tab indicator, I used layout-list in tab_selected.xml, tab_selected_focused.xml, tab_selected_pressed.xml, tab_unselected.xml, tab_unselected_focused.xml and tab_unselected_pressed.xml.

tab_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>
    <shape android:shape="rectangle" >
    <solid android:color="#ffffff" />

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

tab_selected_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@color/actionbar_color" />
        </shape>
  </item>
</layer-list>

tab_selected_focused.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@color/actionbar_color" />
        </shape>
  </item>
</layer-list>

tab_unselected.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >


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

</layer-list>

tab_selected_unfocused.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@color/actionbar_color" />
        </shape>
  </item>
</layer-list>

tab_selected_unselected.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@color/actionbar_color" />
        </shape>
  </item>
</layer-list>

Thanks

how to change tab indicator underline height in actionbar

1 Answers1