Change the footer and text colors of TabPageIndicator (ViewPagerIndicator)

Question

It drives me crazy: I can't understand for life how to change the footer and text colors of my TabPageIndicator (from Jake Wharton ViewPagerIndicator). I looked at the source code for the ViewPagerIndicator sample application, and I cannot find where the code differs for the "Default" and "Styled" samples. By default, the default blue footer and white text are used, while the Styled pattern has a red footer and uses a gray font.

I know that this is possible, but I can’t find out how to do it! Any help is greatly appreciated. :)

Answer 1

Yes, this is different from the manifest definition for the topic:

For the default tab:

<activity android:name=".SampleTabsDefault" android:label="Tabs/Default" android:theme="@style/Theme.PageIndicatorDefaults"> 

And the style tab:

 <activity android:name=".SampleTabsStyled" android:label="Tabs/Styled" android:theme="@style/StyledIndicators"> 

Answer 2

I think the correct answer is to add the following style to your style.xml file (it contains elements that tell the VPI how to show). Something like that:

 <style name="Widget.MyTitlepageIndicator"> <item name="footerColor">#ff99cc33</item> <item name="footerIndicatorStyle">underline</item> <item name="footerIndicatorHeight">3dp</item> <item name="footerLineHeight">1.5dp</item> <item name="footerPadding">6dp</item> <item name="selectedColor">#ffffffff</item> </style> 

Then, in the layout.xml file, where you define your VPI, just talk about the style you created, for example:

 <com.viewpagerindicator.TitlePageIndicator android:id="@+id/history_vp_ind" android:layout_width="fill_parent" android:layout_height="wrap_content" style="@style/Widget.MyTitlepageIndicator" /> 

Answer 3

To do this programmatically, modify the TabPageIndicator and add the following method:

 public void setTextColor(int color) { for (int i = 0; i < mTabLayout.getChildCount(); i++) { View child = mTabLayout.getChildAt(i); if (child instanceof TextView) ((TextView) child).setTextColor(color); } } 

Then, simply use the method to change the color of the display text in the indicator. for example

 setTextColor(0xFFFFFFFF) 

will be white.

Answer 4

you can change the default background of TabPageIndicator in two ways

1. you can change the background in XML

 <com.viewpagerindicator.TabPageIndicator android:id="@+id/container" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#0c445c" /> 

2. Replace the constructor in the TabPageIndicator.java class in the viewpager library

 public TabPageIndicator(Context context, AttributeSet attrs) { super(context, attrs); setHorizontalScrollBarEnabled(false); mTabLayout = new IcsLinearLayout(context, R.attr.vpiTabPageIndicatorStyle); mTabLayout.setBackgroundColor(Color.parseColor("#0c445c")); addView(mTabLayout, new ViewGroup.LayoutParams(WRAP_CONTENT, MATCH_PARENT)); } 

Hope this help