Circle page indicator - how to change fill color changing

Question

I'm using ViewPageIndicator, specifically CirclePageIndictor in my Android application. The requirement is that the fillColor will move straight to the next circle in the indicator, without the situation like this one in the picture (the circle moves slowly and stays in the middle while paging)

How can I do this?

did you find solution ? I didn't get this effect with `vpi:snap="true"` or `vpi.setSnap(true);` — Logic, Jan 04 '16 at 12:17

score 36 · Answer 1 · answered Jun 19 '14 at 10:14

You can try this on your xml:

<com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="10dip"
        app:radius="12dp"
        app:fillColor="@color/header_bg_color"
        app:pageColor="#ffffff"
        app:strokeColor="@color/header_bg_color"/>

and don't forget to add xmlns:app="http://schemas.android.com/apk/res-auto" on your layout. E.g

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

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

    <com.viewpagerindicator.CirclePageIndicator
            android:id="@+id/indicator"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:padding="10dip"
            app:radius="12dp"
            app:fillColor="@color/header_bg_color"
            app:pageColor="#ffffff"
            app:strokeColor="@color/header_bg_color"/>

</LinearLayout>

I have tried but still display default color any other way? – bhavesh kaila Nov 06 '15 at 05:39 — bhavesh kaila, Nov 06 '15 at 05:39

score 5 · Answer 2 · answered Apr 23 '14 at 08:05

5

Set the snap attribute to true.

vpi:snap="true"

or

vpi.setSnap(true);

answered Apr 23 '14 at 08:05

alex

6,359
1
23
21

1

where should i set this ? in my case indicator is not changing while i change the page, but my page content is changing. – Chintan Khetiya May 12 '14 at 10:11

score 3 · Answer 3 · answered Apr 23 '14 at 09:50

final CirclePageIndicator circleIndicator = (CirclePageIndicator) findViewById(R.id.indicator);
    circleIndicator.setViewPager(_pager);
    final float density = getResources().getDisplayMetrics().density;
    circleIndicator.setFillColor(0xFFFFFFFF);
    circleIndicator.setStrokeColor(0xFFFFFFFF);
    circleIndicator.setStrokeWidth(1);
    circleIndicator.setRadius(6 * density);

score 1 · Answer 4 · answered Jan 25 '17 at 13:35

1

try app:snap="true"

 <com.viewpagerindicator.CirclePageIndicator
            android:id="@+id/indicator"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            app:snap="true"/>

answered Jan 25 '17 at 13:35

HannahCarney

3,441
2
26
32

Circle page indicator - how to change fill color changing

4 Answers4

Linked