No style ViewPagerIndicator in combination with SherlockActionBar

Question

I'm trying to implement the ViewPagerIndicator with SherlockActionBar. It works: I can slide the fragments, but the style doesn't work!

It looks like this:

related topic: https://github.com/JakeWharton/Android-ViewPagerIndicator/issues/66

I know what's going wrong: In the sample of VPI, the style of a page is set in AndroidManifest.xml by (for example)

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

But when I add that android:theme element to my own Manifest.xml I get the following exception:

03-16 11:06:24.400: E/AndroidRuntime(483): Caused by: java.lang.IllegalStateException: You must use Theme.Sherlock, Theme.Sherlock.Light, Theme.Sherlock.Light.DarkActionBar, or a derivative.

I've also tried to copy all the style-information to styles.xml, but that also doesn't work.

Can you tell me how to set a style to the VPI? Thank you!

EDIT: Now I've added

<activity
         android:name=".SampleTabsDefault"
         android:theme="@style/StyledIndicators"> 
</activity>

to my Manifest.xml

and the following style in styles.xml

<style name="Theme.BataApp" parent="Theme.Sherlock.Light.DarkActionBar">
        <item name="actionBarStyle">@style/Widget.Styled.ActionBar</item>
        <item name="android:actionBarStyle">@style/Widget.Styled.ActionBar</item>
    </style>   

    <style name="StyledIndicators" parent="Theme.BataApp">
        <item name="vpiTitlePageIndicatorStyle">@style/Widget.TitlePageIndicator</item>
        <item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>
        <item name="vpiTabTextStyle">@style/Widget.TabPageIndicator.Text</item>
    </style>

Result: I don't get any Exception, see the style, but I now I can't see any fragments :(

The code of the activity can be found here: http://pastebin.com/hsNgxFDZ Screenshot of current page with style:

Answer 1

In order to see the Fragments, you'll have to somehow extend an Android base-theme. In order to see the ViewPagerIndicator, you'll have to somehow include those style-definitions. The answer is to create your own theme that extends the ActionBarSherlock-theme (which extends the Android base-themes), and implements the ViewPagerIndicator-styles.

Example:

<style name="myTheme" parent="@style/Theme.Sherlock">

    <!-- If you want to use the default ViewPagerIndicator-styles, use the following: -->
    <item name="vpiTitlePageIndicatorStyle">@style/Widget.TitlePageIndicator</item>
    <item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>
    <item name="vpiTabTextStyle">@style/Widget.TabPageIndicator.Text</item>

    <!-- If you want to implement your custom style of CirclePageIndicator, do it like so: -->
    <item name="vpiCirclePageIndicatorStyle">@style/myCirclePageIndicator</item>


    <!-- Put whatever other styles you want to define in your custom theme -->
</style>

<style name="myCirclePageIndicator" parent="Widget.CirclePageIndicator">
    <item name="fillColor">@color/my_custom_circle_indicator_fill_color</item>
</style>

Then in your Manifest, set android:theme="@style/myTheme" to the <application> or to your <activity>s.

Note that you don't have to include all 4 "vpi..."-styles; you only have to include those that you use. E.g. if you're only using the CirclePageIndicator, you only have to include <item name="vpiCirclePageIndicatorStyle">...</item> and can leave out the other 3 item declarations.

Answer 2

I accidentally removed android:layout_weight="1" when adding styles.

So for other who want to implement VPI with ABS:

layout.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_height="wrap_content"
        android:layout_width="fill_parent"
        style="@style/StyledIndicators" />
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />
</LinearLayout>

styles.xml:

 <style name="Theme.BataApp" parent="Theme.Sherlock.Light.DarkActionBar">
            etc.
        </style>   

        <style name="StyledIndicators" parent="Theme.BataApp">
            <item name="vpiTitlePageIndicatorStyle">@style/Widget.TitlePageIndicator</item>
            <item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>
            <item name="vpiTabTextStyle">@style/Widget.TabPageIndicator.Text</item>
        </style>

Thank you @Reinier! :D