Highlight or underline selected TabPageIndicator

Question

I have a dualpane on a tablet-sized landscape layout and I'm using fragments.

On the left I have a fragment with a listview. When a click occurs on one of the item list the right fragment loads the detail.

In the layout of the right (detail) fragment there is a com.viewpagerindicator.TabPageIndicator and a android.support.v4.view.ViewPager. The ViewPager will load 2 elements and each one has its com.viewpagerindicator.TabPageIndicator. I'm trying to highlight or underline the selected tab but I failed doing it.

I hope you have some advice :)

Answer 1

By default the TabPageIndicator doesn't apply any style. To enable the default style from ViewPagerIndicator add the following line to either the application tag or the appropriate activity tag in your manifest.xml

android:theme="@style/Theme.MyTheme"

Then add a res\values\styles.xml file to your project with the following content

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.MyTheme" parent="@android:style/Theme.Light">
        <item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>
    </style>  
</resources>  

I'm using the android light theme for my application, but you might want to change this to the theme you are using now.

If you want to make changes to the default VPI style change the styles.xml file to something like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>

  <style name="Theme.MyTheme" parent="@android:style/Theme.Light">
    <item name="vpiTabPageIndicatorStyle">@style/MyTabPageIndicator</item>
  </style>  

  <style name="MyTabPageIndicator" parent="Widget.TabPageIndicator">
    <item name="android:gravity">center</item>
    <item name="android:background">@drawable/vpi__tab_indicator</item>
    <item name="android:paddingLeft">22dip</item>
    <item name="android:paddingRight">22dip</item>
    <item name="android:paddingTop">12dp</item>
    <item name="android:paddingBottom">12dp</item>
    <item name="android:textAppearance">@style/MyTabPageIndicator.Text</item>
    <item name="android:textSize">12sp</item>
    <item name="android:maxLines">1</item>
  </style>

  <style name="MyTabPageIndicator.Text" parent="TextAppearance.TabPageIndicator">
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">@color/vpi__dark_theme</item>
  </style>

</resources>

Note that the settings above are exactly the same as the default VPI style for the TabPageIndicactor, so you still have to make the changes you'd like.