Default Style Fails for ViewPagerIndicator's TabPageIndicator. Why and How to Fix?

Question

Instead of explaining the issue, much easier if I just show you:

As you can see the tab titles are all mashed together and entirely unstyled. They function correctly in that swiping through switches tabs (though there's no visible indication except position shifting where appropriate) and tapping a tab switches the view, but all style is missing. Here is the code:

gallerylists.xml

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

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent" >

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

  <android.support.v4.view.ViewPager
    android:id="@+id/gallerypager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />

</LinearLayout>

GalleryLists.java

public class GalleryLists extends Activity {
  Context context;

  private static final String[] titles = new String[] {
        "20 Hottest", "20 Worst", "20 Awesomest", "MMA", "Comedy", "Moto", "Games" };

  ViewPager listPager;
  ListPagerAdapter listPagerAdapter;

  PageIndicator indicator;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.gallerylists);

    context = this;

    listPagerAdapter = new ListPagerAdapter();

    ViewPager.OnPageChangeListener changeListener = new ViewPager.OnPageChangeListener() {

      @Override
      public void onPageScrolled(int i, float v, int i1) {}

      @Override
      public void onPageSelected(int i) {}

      @Override
      public void onPageScrollStateChanged(int i) {}
    };

    listPager = (ViewPager) findViewById(R.id.gallerypager);
    listPager.setAdapter(listPagerAdapter);
    listPager.setOnPageChangeListener(changeListener);

    indicator = (TabPageIndicator) findViewById(R.id.indicator);
    indicator.setViewPager(listPager);
    indicator.setOnPageChangeListener(changeListener);
  }

  private class ListPagerAdapter extends PagerAdapter {

    // Not important (I believe)
  }
}

That's it. Now, unless I'm very confused despite reading the documentation and examining the samples, I shouldn't have to take any extra steps to use the default style. I'm at a bit of a loss.

Hertzog

Answer 1

I feel like a bit of a moron, but here is the exceedingly simple and obvious solution.

AndroidManifest.xml

...
<activity
  android:name=".GalleryLists"
  android:theme="@style/Theme.PageIndicatorDefaults"
  ... >
</activity>
...

Yeah, all I needed to do was actually use the theme. Hopefully this will help some other poor lost soul.

Hertzog

Agggh, I had this tab open but never read it! Finally figured the theming out myself but could have saved time. – Wainscoting

Answer 2

I have the same problem, but android:theme="@style/Theme.PageIndicatorDefaults" does not combine with my app theme.

There is another way to personalize, overwriting res/values/style.xml:

<resources>

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

    </style>

    <style name="CustomTabPageIndicator" >
        <item name="android:gravity">center</item>
        <item name="android:background">@drawable/vpi__tab_indicator</item>        
        <item name="android:paddingTop">12dp</item>
        <item name="android:paddingBottom">12dp</item>
        <item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
        <item name="android:textSize">15sp</item>
        <item name="android:maxLines">1</item>
        <item name="android:textColor">#FF555555</item>
    </style>
</resources>

Sublunar

I actually just ran into a similar issue and did something similar. I wanted to use the holo theme where available so I needed to make another folder res/values-v11 with a style.xml where I set the parent="Theme.Holo" which in your case would be "Theme.Holo.Light". – Hertzog

Thanks so much for this! It's awful how much time it takes to figure out how to make the ViewPagerIndicator stuff work and how to customize it... If it wasn't for StackOverflow and you guys, I would try-and-error myself to death. – Doctrinal

Answer 3

A small addition to Michaels solution: in case you are using a custom theme for your Activity already, just add theese two lines to it:

<item name="vpiIconPageIndicatorStyle">@style/Widget.IconPageIndicator</item>
<item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>

Thetos