Highlight or underline selected TabPageIndicator Highlight or underline selected TabPageIndicator android android

Highlight or underline selected TabPageIndicator


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.


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