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?

Answer 1

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>

Answer 2

Set the snap attribute to true.

vpi:snap="true"

or

vpi.setSnap(true);

Answer 3

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);