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 :)

Colman

Please, update your question and put some code here. – Doubledecker

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.

Allude

Hi, i'm using action bar, how i can implement both action bar and android:theme="@style/Theme.MyTheme" on manifest file? – Castanets

@StackOverflowError I think that problem is answered here and here – Allude

@Allude i used ABC, its the same way? – Castanets

Answer 2

Just use two library 1) Sherlock action bar 2) ViewPageIndicator and implement tabPageIndicator view it will it provides you default tab and for highliget tab provide underline. IF you want to change underline color than you need to change drawable 9th patch images which used in underlinbe.

Here is sample code

XML view sample

               <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" >

        <com.viewpagerindicator.TabPageIndicator
            android:id="@+id/indicator"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@color/lock_background_greeen"
           />

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>
</FrameLayout>

Fragment Code

        final FragmentPagerAdapter adapter = new  FragmentChildPageAdapter(getChildFragmentManager());//getActivity().getSupportFragmentManager()

    final ViewPager pager = (ViewPager) v.findViewById(R.id.pager);
    pager.setAdapter(adapter);

    final TabPageIndicator indicator = (TabPageIndicator) v.findViewById(R.id.indicator);
    indicator.setViewPager(pager);

Catcall