Failed to find style vpiCirclePageIndicatorStyle

Question

I wanted to have viewpageindicator in my project, but am having trouble importing it. I've got errors in my XML.

Missing styles. Is the correct theme chosen for this layout?
Use the Theme combo box above the layout to choose a different layout, or fix the theme style references.

Failed to find style 'vpiCirclePageIndicatorStyle' in current theme

My XML file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >


    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/indicator"
        android:layout_width="248dp"
        android:layout_height="30dp"
        android:layout_alignParentBottom="true"
        android:layout_below="@id/pager"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="30dp"
        android:padding="3dip" />


</RelativeLayout>

My updated res/values/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="hololightnoactionbar" parent="android:Theme.Holo.Light">
        <item name="android:windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
    </style>

    <style name="dividerstyle" parent="@android:style/Widget.ListView">
        <item name="android:cacheColorHint">@android:color/transparent</item>
        <item name="android:divider">@drawable/list_divider</item>
        <item name="android:dividerHeight">1px</item>
    </style>

    <style name="roundedwhitebox">
        <item name="android:background">@drawable/roundedwhitebox</item>
    </style>

    <style name="roundedlightgraybox">
        <item name="android:background">@drawable/roundedlightgraybox</item>
    </style>

    <style name="rotatingProgressCircle">
        <item name="android:indeterminateDrawable">@drawable/circleindeterminate</item>
    </style>

    <style name="StyledIndicators" parent="@android:style/Theme.Light">
        <item name="vpiCirclePageIndicatorStyle">@style/CustomCirclePageIndicator</item>
        <item name="vpiLinePageIndicatorStyle">@style/CustomLinePageIndicator</item>
        <item name="vpiTitlePageIndicatorStyle">@style/CustomTitlePageIndicator</item>
        <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
        <item name="vpiUnderlinePageIndicatorStyle">@style/CustomUnderlinePageIndicator</item>
    </style>

    <style name="CustomTitlePageIndicator">
        <item name="android:background">#18FF0000</item>
        <item name="footerColor">#FFAA2222</item>
        <item name="footerLineHeight">1dp</item>
        <item name="footerIndicatorHeight">3dp</item>
        <item name="footerIndicatorStyle">underline</item>
        <item name="android:textColor">#AA000000</item>
        <item name="selectedColor">#FF000000</item>
        <item name="selectedBold">true</item>
    </style>

    <style name="CustomLinePageIndicator">
        <item name="strokeWidth">4dp</item>
        <item name="lineWidth">30dp</item>
        <item name="unselectedColor">#FF888888</item>
        <item name="selectedColor">#FF880000</item>
    </style>

    <style name="CustomCirclePageIndicator">
        <item name="fillColor">#FF888888</item>
        <item name="strokeColor">#FF000000</item>
        <item name="strokeWidth">2dp</item>
        <item name="radius">10dp</item>
        <item name="centered">true</item>
    </style>

    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
        <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
        <item name="android:textColor">#FF555555</item>
        <item name="android:textSize">16sp</item>
        <item name="android:divider">@drawable/custom_tab_indicator_divider</item>
        <item name="android:dividerPadding">10dp</item>
        <item name="android:showDividers">middle</item>
        <item name="android:paddingLeft">8dp</item>
        <item name="android:paddingRight">8dp</item>
        <item name="android:fadingEdge">horizontal</item>
        <item name="android:fadingEdgeLength">8dp</item>
    </style>

    <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
        <item name="android:typeface">monospace</item>
    </style>

    <style name="CustomUnderlinePageIndicator">
        <item name="selectedColor">#FFCC0000</item>
        <item name="android:background">#FFCCCCCC</item>
        <item name="fadeLength">1000</item>
        <item name="fadeDelay">1000</item>
    </style>

</resources>

My project structure is here, where vpilibrary is the imported viewpageindicator library

What's wrong with it? and let me know if you need more files for debugging. Thx

ps:My minsdkversion and targetsdkversion is both 16

Answer 1

Problem:

Solution:

1. Add a custom style in res/layout/values/styles.xml

You can find some examples here.

<style name="StyledIndicators" parent="@android:style/Theme.Light">
    <item name="vpiCirclePageIndicatorStyle">@style/CustomCirclePageIndicator</item>
</style>

<style name="CustomCirclePageIndicator">
    <item name="fillColor">#000000</item>
    <item name="strokeColor">#000000</item>
    <item name="strokeWidth">1dp</item>
    <item name="radius">6dp</item>
    <item name="centered">true</item>
</style>

2. Add new style as a theme in your activity, "StyledIndicators":

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

3. After that just need to change to theme to the one that comes with the project, choose Manifest Themes - StyledIndicators.