CODEWITHSUNDEEP
android
user3414081
user3414081

Reputation: 161

Circle page indicator - how to change fill color changing

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?

Upvotes: 16

Views: 23017

Answers (4)

HannahCarney
HannahCarney

Reputation: 3631

try app:snap="true"

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

Upvotes: 1

marvz
marvz

Reputation: 369

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>

Upvotes: 36

Pankaj Arora
Pankaj Arora

Reputation: 10274

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

Upvotes: 3

alex
alex

Reputation: 6409

Set the snap attribute to true.

vpi:snap="true"

or

vpi.setSnap(true);

Upvotes: 5

Related Questions