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.

Answer 1

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>