How to customise the CirclePageIndicator?

Question

I am using ViewPager and PagerAdapter to get a slideshow of XMLs in android app. I am using CirclePageIndicator to number the page. How can I customise the color of the circle corresponding to current page ?

Answer 1

On your CirclePageIndicator object call setPageColor(Color.RED) to set the default fill colour of the circle to red. Call setFillColor(Color.BLACK) to set the fill colour of the selected circle to black. Call setStrokeColor(Color.WHITE) to set the stroke or the circle's border colour to white.

You can pick whatever colour you want to customize the indicator, these colour values I provided are just as an example.

You can also customize these indicators using XML.

Example from Android-ViewPagerIndicator's GitHub repo:

<com.viewpagerindicator.CirclePageIndicator
    android:id="@+id/indicator"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    app:fillColor="#FF888888"
    app:pageColor="#88FF0000"
    app:strokeColor="#FF000000" />

Answer 2

If you want to use custom images drawable instead of colors and stroke you can use this library:

https://github.com/augustopicciani/DrawablePageIndicator