CirclePageIndicator doesn't work properly

[mrHerintsoaHasina]

Hi,
Thanks fo your work. It's a pleasure to use it. I have just a problem with the circle page indicator. It's shown but when I swipe to another page, the white circle indicator doesn't move to indicate the current page. How can I fix that ?

Best regards

[ckdevrel]

@mrHerintsoaHasina Thanks for you comment. Glad to see that you are using my project. I guess this issue would not happen. Did you change the color code of selected cirlcle indicator in vpi_defaults.xml?

[mrHerintsoaHasina]

I didn't change it. I'm using the default values to quickly test the app. Do I need to change some values ?

[sharish]

@mrHerintsoaHasina Circle indicator moves only if your device OS is > 3.x and field isSliderAnimation in MainActivity is set to false

[mrHerintsoaHasina]

@cooltechworks I have 4.4.2 android version and the field isSliderAnimation was set to false. Is it a problem if I extend MainActivity with android.support.v7.app.ActionBarActivity instead of AppCompatActivity ?

[sharish]

@mrHerintsoaHasina No it should not cause any issues. Can you post your code?

[mrHerintsoaHasina]

@cooltechworks I put here MainActivity.java, CirclePageIndicator.java and ColorShades.java.

The MainActivity.java

import android.graphics.drawable.Drawable;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity{

private static final String SAVING_STATE_SLIDER_ANIMATION = "SliderAnimationSavingState";
private boolean isSliderAnimation = false;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    Window window = getWindow();
    window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    setContentView(R.layout.activity_main);

    ViewPager viewPager = (ViewPager) findViewById(R.id.pager);

    viewPager.setAdapter(new ViewPagerAdapter(R.array.icons, R.array.titles, R.array.hints));

    CirclePageIndicator mIndicator  = (CirclePageIndicator) findViewById(R.id.indicator);
    mIndicator.setViewPager(viewPager);



    viewPager.setPageTransformer(true, new CustomPageTransformer());

    viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(final int position, float positionOffset, int positionOffsetPixels) {

            View landingBGView = findViewById(R.id.landing_backgrond);
            int colorBg[] = getResources().getIntArray(R.array.landing_bg);


            ColorShades shades = new ColorShades();
            shades.setFromColor(colorBg[position % colorBg.length])
                    .setToColor(colorBg[(position + 1) % colorBg.length])
                    .setShade(positionOffset);

            landingBGView.setBackgroundColor(shades.generate());

        }

        public void onPageSelected(int position) {

        }

        public void onPageScrollStateChanged(int state) {
        }
    });


}

public class ViewPagerAdapter extends PagerAdapter {

    private int iconResId, titleArrayResId, hintArrayResId;

    public ViewPagerAdapter(int iconResId, int titleArrayResId, int hintArrayResId) {

        this.iconResId = iconResId;
        this.titleArrayResId = titleArrayResId;
        this.hintArrayResId = hintArrayResId;
    }

    @Override
    public int getCount() {
        return getResources().getIntArray(iconResId).length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        Drawable icon = getResources().obtainTypedArray(iconResId).getDrawable(position);
        String title = getResources().getStringArray(titleArrayResId)[position];
        String hint = getResources().getStringArray(hintArrayResId)[position];


        View itemView = getLayoutInflater().inflate(R.layout.viewpager_item, container, false);


        ImageView iconView = (ImageView) itemView.findViewById(R.id.landing_img_slide);
        TextView titleView = (TextView)itemView.findViewById(R.id.landing_txt_title);
        TextView hintView = (TextView)itemView.findViewById(R.id.landing_txt_hint);


        iconView.setImageDrawable(icon);
        titleView.setText(title);
        hintView.setText(hint);

        container.addView(itemView);

        return itemView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((RelativeLayout) object);

    }
}

public class CustomPageTransformer implements ViewPager.PageTransformer {


    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        View imageView = view.findViewById(R.id.landing_img_slide);
        View contentView = view.findViewById(R.id.landing_txt_hint);
        View txt_title = view.findViewById(R.id.landing_txt_title);

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left
        } else if (position <= 0) { // [-1,0]
            // This page is moving out to the left

            // Counteract the default swipe
            setTranslationX(view,pageWidth * -position);
            if (contentView != null) {
                // But swipe the contentView
                setTranslationX(contentView,pageWidth * position);
                setTranslationX(txt_title,pageWidth * position);

                setAlpha(contentView,1 + position);
                setAlpha(txt_title,1 + position);
            }

            if (imageView != null) {
                // Fade the image in
                setAlpha(imageView,1 + position);
            }

        } else if (position <= 1) { // (0,1]
            // This page is moving in from the right

            // Counteract the default swipe
            setTranslationX(view, pageWidth * -position);
            if (contentView != null) {
                // But swipe the contentView
                setTranslationX(contentView,pageWidth * position);
                setTranslationX(txt_title,pageWidth * position);

                setAlpha(contentView, 1 - position);
                setAlpha(txt_title, 1 - position);

            }
            if (imageView != null) {
                // Fade the image out
                setAlpha(imageView,1 - position);
            }

        }
    }
}

/**
 * Sets the alpha for the view. The alpha will be applied only if the running android device OS is greater than honeycomb.
 * @param view - view to which alpha to be applied.
 * @param alpha - alpha value.
 */
private void setAlpha(View view, float alpha) {

    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB && ! isSliderAnimation) {
        view.setAlpha(alpha);
    }
}

/**
 * Sets the translationX for the view. The translation value will be applied only if the running android device OS is greater than honeycomb.
 * @param view - view to which alpha to be applied.
 * @param translationX - translationX value.
 */
private void setTranslationX(View view, float translationX) {
    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB && ! isSliderAnimation) {
        view.setTranslationX(translationX);
    }
}

public void onSaveInstanceState(Bundle outstate) {

    if(outstate != null) {
        outstate.putBoolean(SAVING_STATE_SLIDER_ANIMATION,isSliderAnimation);
    }

    super.onSaveInstanceState(outstate);
}

public void onRestoreInstanceState(Bundle inState) {

    if(inState != null) {
        isSliderAnimation = inState.getBoolean(SAVING_STATE_SLIDER_ANIMATION,false);
    }
    super.onRestoreInstanceState(inState);

}

}

The CirclePageIndicator.java

import static android.graphics.Paint.ANTI_ALIAS_FLAG;
import static android.widget.LinearLayout.HORIZONTAL;
import static android.widget.LinearLayout.VERTICAL;
import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.drawable.Drawable;
import android.os.Parcel;
import android.os.Parcelable;
import android.support.v4.view.MotionEventCompat;
import android.support.v4.view.ViewConfigurationCompat;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;

/**

• Draws circles (one for each view). The current view position is filled and

• others are only stroked.
  */
  public class CirclePageIndicator extends View implements PageIndicator {

  private static final int INVALID_POINTER = -1;

  private float mRadius;
  private final Paint mPaintPageFill = new Paint(ANTI_ALIAS_FLAG);
  private final Paint mPaintStroke = new Paint(ANTI_ALIAS_FLAG);
  private final Paint mPaintFill = new Paint(ANTI_ALIAS_FLAG);
  private ViewPager mViewPager;
  private ViewPager.OnPageChangeListener mListener;
  private int mCurrentPage;
  private int mSnapPage;
  private float mPageOffset;
  private int mScrollState;
  private int mOrientation;
  private boolean mCentered;
  private boolean mSnap;

  private int mTouchSlop;
  private float mLastMotionX = -1;
  private int mActivePointerId = INVALID_POINTER;
  private boolean mIsDragging;

  public CirclePageIndicator(Context context) {
  this(context, null);
  }

  public CirclePageIndicator(Context context, AttributeSet attrs) {
  this(context, attrs, R.attr.vpiCirclePageIndicatorStyle);
  }

  public CirclePageIndicator(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  if (isInEditMode()) return;

  //Load defaults from resources
  final Resources res = getResources();
  final int defaultPageColor = res.getColor(R.color.default_circle_indicator_page_color);
  final int defaultFillColor = res.getColor(R.color.default_circle_indicator_fill_color);
  final int defaultOrientation = res.getInteger(R.integer.default_circle_indicator_orientation);
  final int defaultStrokeColor = res.getColor(R.color.default_circle_indicator_stroke_color);
  final float defaultStrokeWidth = res.getDimension(R.dimen.default_circle_indicator_stroke_width);
  final float defaultRadius = res.getDimension(R.dimen.viewpager_circleindicator_radius);
  final boolean defaultCentered = res.getBoolean(R.bool.default_circle_indicator_centered);
  final boolean defaultSnap = res.getBoolean(R.bool.default_circle_indicator_snap);
  
  //Retrieve styles attributes
  TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CirclePageIndicator, defStyle, 0);
  
  mCentered = a.getBoolean(R.styleable.CirclePageIndicator_centered, defaultCentered);
  mOrientation = a.getInt(R.styleable.CirclePageIndicator_android_orientation, defaultOrientation);
  mPaintPageFill.setStyle(Style.FILL);
  mPaintPageFill.setColor(a.getColor(R.styleable.CirclePageIndicator_pageColor, defaultPageColor));
  mPaintStroke.setStyle(Style.STROKE);
  mPaintStroke.setColor(a.getColor(R.styleable.CirclePageIndicator_strokeColor, defaultStrokeColor));
  mPaintStroke.setStrokeWidth(a.getDimension(R.styleable.CirclePageIndicator_strokeWidth, defaultStrokeWidth));
  mPaintFill.setStyle(Style.FILL);
  mPaintFill.setColor(a.getColor(R.styleable.CirclePageIndicator_fillColor, defaultFillColor));
  mRadius = a.getDimension(R.styleable.CirclePageIndicator_radius, defaultRadius);
  mSnap = a.getBoolean(R.styleable.CirclePageIndicator_snap, defaultSnap);
  
  Drawable background = a.getDrawable(R.styleable.CirclePageIndicator_android_background);
  if (background != null) {
    setBackgroundDrawable(background);
  }
  
  a.recycle();
  
  final ViewConfiguration configuration = ViewConfiguration.get(context);
  mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(configuration);
  

  }

  public void setCentered(boolean centered) {
  mCentered = centered;
  invalidate();
  }

  public boolean isCentered() {
  return mCentered;
  }

  public void setPageColor(int pageColor) {
  mPaintPageFill.setColor(pageColor);
  invalidate();
  }

  public int getPageColor() {
  return mPaintPageFill.getColor();
  }

  public void setFillColor(int fillColor) {
  mPaintFill.setColor(fillColor);
  invalidate();
  }

  public int getFillColor() {
  return mPaintFill.getColor();
  }

  public void setOrientation(int orientation) {
  switch (orientation) {
  case HORIZONTAL:
  case VERTICAL:
  mOrientation = orientation;
  requestLayout();
  break;

      default:
          throw new IllegalArgumentException("Orientation must be either HORIZONTAL or VERTICAL.");
  }
  

  }

  public int getOrientation() {
  return mOrientation;
  }

  public void setStrokeColor(int strokeColor) {
  mPaintStroke.setColor(strokeColor);
  invalidate();
  }

  public int getStrokeColor() {
  return mPaintStroke.getColor();
  }

  public void setStrokeWidth(float strokeWidth) {
  mPaintStroke.setStrokeWidth(strokeWidth);
  invalidate();
  }

  public float getStrokeWidth() {
  return mPaintStroke.getStrokeWidth();
  }

  public void setRadius(float radius) {
  mRadius = radius;
  invalidate();
  }

  public float getRadius() {
  return mRadius;
  }

  public void setSnap(boolean snap) {
  mSnap = snap;
  invalidate();
  }

  public boolean isSnap() {
  return mSnap;
  }

  @OverRide
  protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);

  if (mViewPager == null) {
      return;
  }
  final int count = mViewPager.getAdapter().getCount();
  if (count == 0) {
      return;
  }
  
  if (mCurrentPage >= count) {
      setCurrentItem(count - 1);
      return;
  }
  
  int longSize;
  int longPaddingBefore;
  int longPaddingAfter;
  int shortPaddingBefore;
  if (mOrientation == HORIZONTAL) {
      longSize = getWidth();
      longPaddingBefore = getPaddingLeft();
      longPaddingAfter = getPaddingRight();
      shortPaddingBefore = getPaddingTop();
  } else {
      longSize = getHeight();
      longPaddingBefore = getPaddingTop();
      longPaddingAfter = getPaddingBottom();
      shortPaddingBefore = getPaddingLeft();
  }
  
  final float threeRadius = mRadius * 3;
  final float shortOffset = shortPaddingBefore + mRadius;
  float longOffset = longPaddingBefore + mRadius;
  if (mCentered) {
      longOffset += ((longSize - longPaddingBefore - longPaddingAfter) / 2.0f) - ((count * threeRadius) / 2.0f);
  }
  
  float dX;
  float dY;
  
  float pageFillRadius = mRadius;
  if (mPaintStroke.getStrokeWidth() > 0) {
      pageFillRadius -= mPaintStroke.getStrokeWidth() / 2.0f;
  }
  
  //Draw stroked circles
  for (int iLoop = 0; iLoop < count; iLoop++) {
      float drawLong = longOffset + (iLoop * threeRadius);
      if (mOrientation == HORIZONTAL) {
          dX = drawLong;
          dY = shortOffset;
      } else {
          dX = shortOffset;
          dY = drawLong;
      }
      // Only paint fill if not completely transparent
      if (mPaintPageFill.getAlpha() > 0) {
          canvas.drawCircle(dX, dY, pageFillRadius, mPaintPageFill);
      }
  
      // Only paint stroke if a stroke width was non-zero
      if (pageFillRadius != mRadius) {
          canvas.drawCircle(dX, dY, mRadius, mPaintStroke);
      }
  }
  
  //Draw the filled circle according to the current scroll
  float cx = (mSnap ? mSnapPage : mCurrentPage) * threeRadius;
  if (!mSnap) {
      cx += mPageOffset * threeRadius;
  }
  if (mOrientation == HORIZONTAL) {
      dX = longOffset + cx;
      dY = shortOffset;
  } else {
      dX = shortOffset;
      dY = longOffset + cx;
  }
  canvas.drawCircle(dX, dY, mRadius, mPaintFill);
  

  }

  public boolean onTouchEvent(MotionEvent ev) {
  if (super.onTouchEvent(ev)) {
  return true;
  }
  if ((mViewPager == null) || (mViewPager.getAdapter().getCount() == 0)) {
  return false;
  }

  final int action = ev.getAction() & MotionEventCompat.ACTION_MASK;
  switch (action) {
      case MotionEvent.ACTION_DOWN:
          mActivePointerId = MotionEventCompat.getPointerId(ev, 0);
          mLastMotionX = ev.getX();
          break;
  
      case MotionEvent.ACTION_MOVE: {
          final int activePointerIndex = MotionEventCompat.findPointerIndex(ev, mActivePointerId);
          final float x = MotionEventCompat.getX(ev, activePointerIndex);
          final float deltaX = x - mLastMotionX;
  
          if (!mIsDragging) {
              if (Math.abs(deltaX) > mTouchSlop) {
                  mIsDragging = true;
              }
          }
  
          if (mIsDragging) {
              mLastMotionX = x;
              if (mViewPager.isFakeDragging() || mViewPager.beginFakeDrag()) {
                  mViewPager.fakeDragBy(deltaX);
              }
          }
  
          break;
      }
  
      case MotionEvent.ACTION_CANCEL:
      case MotionEvent.ACTION_UP:
          if (!mIsDragging) {
              final int count = mViewPager.getAdapter().getCount();
              final int width = getWidth();
              final float halfWidth = width / 2f;
              final float sixthWidth = width / 6f;
  
              if ((mCurrentPage > 0) && (ev.getX() < halfWidth - sixthWidth)) {
                  if (action != MotionEvent.ACTION_CANCEL) {
                      mViewPager.setCurrentItem(mCurrentPage - 1);
                  }
                  return true;
              } else if ((mCurrentPage < count - 1) && (ev.getX() > halfWidth + sixthWidth)) {
                  if (action != MotionEvent.ACTION_CANCEL) {
                      mViewPager.setCurrentItem(mCurrentPage + 1);
                  }
                  return true;
              }
          }
  
          mIsDragging = false;
          mActivePointerId = INVALID_POINTER;
          if (mViewPager.isFakeDragging()) mViewPager.endFakeDrag();
          break;
  
      case MotionEventCompat.ACTION_POINTER_DOWN: {
          final int index = MotionEventCompat.getActionIndex(ev);
          mLastMotionX = MotionEventCompat.getX(ev, index);
          mActivePointerId = MotionEventCompat.getPointerId(ev, index);
          break;
      }
  
      case MotionEventCompat.ACTION_POINTER_UP:
          final int pointerIndex = MotionEventCompat.getActionIndex(ev);
          final int pointerId = MotionEventCompat.getPointerId(ev, pointerIndex);
          if (pointerId == mActivePointerId) {
              final int newPointerIndex = pointerIndex == 0 ? 1 : 0;
              mActivePointerId = MotionEventCompat.getPointerId(ev, newPointerIndex);
          }
          mLastMotionX = MotionEventCompat.getX(ev, MotionEventCompat.findPointerIndex(ev, mActivePointerId));
          break;
  }
  
  return true;
  

  }

  @OverRide
  public void setViewPager(ViewPager view) {
  if (mViewPager == view) {
  return;
  }
  if (mViewPager != null) {
  mViewPager.setOnPageChangeListener(null);
  }
  if (view.getAdapter() == null) {
  throw new IllegalStateException("ViewPager does not have adapter instance.");
  }
  mViewPager = view;
  mViewPager.setOnPageChangeListener(this);
  invalidate();
  }

  @OverRide
  public void setViewPager(ViewPager view, int initialPosition) {
  setViewPager(view);
  setCurrentItem(initialPosition);
  }

  @OverRide
  public void setCurrentItem(int item) {
  if (mViewPager == null) {
  throw new IllegalStateException("ViewPager has not been bound.");
  }
  mViewPager.setCurrentItem(item);
  mCurrentPage = item;
  invalidate();
  }

  @OverRide
  public void notifyDataSetChanged() {
  invalidate();
  }

  @OverRide
  public void onPageScrollStateChanged(int state) {
  mScrollState = state;

  if (mListener != null) {
      mListener.onPageScrollStateChanged(state);
  }
  

  }

  @OverRide
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  mCurrentPage = position;
  mPageOffset = positionOffset;
  invalidate();

  if (mListener != null) {
      mListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
  }
  

  }

  @OverRide
  public void onPageSelected(int position) {
  if (mSnap || mScrollState == ViewPager.SCROLL_STATE_IDLE) {
  mCurrentPage = position;
  mSnapPage = position;
  invalidate();
  }

  if (mListener != null) {
      mListener.onPageSelected(position);
  }
  

  }

  @OverRide
  public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) {
  mListener = listener;
  }

  /*

  • (non-Javadoc)
    *
  • @see android.view.View#onMeasure(int, int)
    */
    @OverRide
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    if (mOrientation == HORIZONTAL) {
    setMeasuredDimension(measureLong(widthMeasureSpec), measureShort(heightMeasureSpec));
    } else {
    setMeasuredDimension(measureShort(widthMeasureSpec), measureLong(heightMeasureSpec));
    }
    }

  /**

  • Determines the width of this view
    *

  • @param measureSpec

  •        A measureSpec packed into an int
    

  • @return The width of the view, honoring constraints from measureSpec
    */
    private int measureLong(int measureSpec) {
    int result;
    int specMode = MeasureSpec.getMode(measureSpec);
    int specSize = MeasureSpec.getSize(measureSpec);

    if ((specMode == MeasureSpec.EXACTLY) || (mViewPager == null)) {
    //We were told how big to be
    result = specSize;
    } else {
    //Calculate the width according the views count
    final int count = mViewPager.getAdapter().getCount();
    result = (int)(getPaddingLeft() + getPaddingRight()
    + (count * 2 * mRadius) + (count - 1) * mRadius + 1);
    //Respect AT_MOST value if that was what is called for by measureSpec
    if (specMode == MeasureSpec.AT_MOST) {
    result = Math.min(result, specSize);
    }
    }
    return result;
    }

  /**

  • Determines the height of this view
    *

  • @param measureSpec

  •        A measureSpec packed into an int
    

  • @return The height of the view, honoring constraints from measureSpec
    */
    private int measureShort(int measureSpec) {
    int result;
    int specMode = MeasureSpec.getMode(measureSpec);
    int specSize = MeasureSpec.getSize(measureSpec);

    if (specMode == MeasureSpec.EXACTLY) {
    //We were told how big to be
    result = specSize;
    } else {
    //Measure the height
    result = (int)(2 * mRadius + getPaddingTop() + getPaddingBottom() + 1);
    //Respect AT_MOST value if that was what is called for by measureSpec
    if (specMode == MeasureSpec.AT_MOST) {
    result = Math.min(result, specSize);
    }
    }
    return result;
    }

  @OverRide
  public void onRestoreInstanceState(Parcelable state) {
  SavedState savedState = (SavedState)state;
  super.onRestoreInstanceState(savedState.getSuperState());
  mCurrentPage = savedState.currentPage;
  mSnapPage = savedState.currentPage;
  requestLayout();
  }

  @OverRide
  public Parcelable onSaveInstanceState() {
  Parcelable superState = super.onSaveInstanceState();
  SavedState savedState = new SavedState(superState);
  savedState.currentPage = mCurrentPage;
  return savedState;
  }

  static class SavedState extends BaseSavedState {
  int currentPage;

  public SavedState(Parcelable superState) {
      super(superState);
  }
  
  private SavedState(Parcel in) {
      super(in);
      currentPage = in.readInt();
  }
  
  @Override
  public void writeToParcel(Parcel dest, int flags) {
      super.writeToParcel(dest, flags);
      dest.writeInt(currentPage);
  }
  
  @SuppressWarnings("UnusedDeclaration")
  public static final Creator<SavedState> CREATOR = new Creator<SavedState>() {
      @Override
      public SavedState createFromParcel(Parcel in) {
          return new SavedState(in);
      }
  
      @Override
      public SavedState[] newArray(int size) {
          return new SavedState[size];
      }
  };
  

  }
  }

interface PageIndicator extends ViewPager.OnPageChangeListener {
/**
* Bind the indicator to a ViewPager.
*
* @param view
*/
void setViewPager(ViewPager view);

/**
 * Bind the indicator to a ViewPager.
 *
 * @param view
 * @param initialPosition
 */
void setViewPager(ViewPager view, int initialPosition);

/**
 * <p>Set the current page of both the ViewPager and indicator.</p>
 *
 * <p>This <strong>must</strong> be used if you need to set the page before
 * the views are drawn on screen (e.g., default start page).</p>
 *
 * @param item
 */
void setCurrentItem(int item);

/**
 * Set a page change listener which will receive forwarded events.
 *
 * @param listener
 */
void setOnPageChangeListener(ViewPager.OnPageChangeListener listener);

/**
 * Notify the indicator that the fragment list has changed.
 */
void notifyDataSetChanged();

}

The ColorShades.java

public class ColorShades {

private int mFromColor;
private int mToColor;
private float mShade;

public ColorShades setFromColor(int fromColor) {
    this.mFromColor = fromColor;
    return this;
}

public ColorShades setToColor(int toColor) {
    this.mToColor = toColor;
    return this;
}

public ColorShades setFromColor(String fromColor) {

    this.mFromColor = Color.parseColor(fromColor);
    return this;
}

public ColorShades setToColor(String toColor) {
    this.mToColor = Color.parseColor(toColor);
    return this;
}

public ColorShades forLightShade(int color) {
    setFromColor(Color.WHITE);
    setToColor(color);
    return this;
}

public ColorShades forDarkShare(int color) {
    setFromColor(color);
    setToColor(Color.BLACK);
    return this;
}

public ColorShades setShade(float mShade) {
    this.mShade = mShade;
    return this;
}


/**
 * Generates the shade for the given color.
 * @return the int value of the shade.
 */
public int generate() {

    int fromR = (Color.red(mFromColor));
    int fromG = (Color.green(mFromColor));
    int fromB = (Color.blue(mFromColor));

    int toR = (Color.red(mToColor));
    int toG = (Color.green(mToColor));
    int toB = (Color.blue(mToColor));

    int diffR = toR - fromR;
    int diffG = toG - fromG;
    int diffB = toB - fromB;



    int R = fromR + (int) (( diffR * mShade));
    int G = fromG + (int) (( diffG * mShade));
    int B = fromB + (int) (( diffB * mShade));

    return  Color.rgb(R, G, B);

}


/**
 * Assumes the from and to color are inverted before generating the shade.
 * @return the int value of the inverted shade.
 */
public int generateInverted() {

    int fromR = (Color.red(mFromColor));
    int fromG = (Color.green(mFromColor));
    int fromB = (Color.blue(mFromColor));

    int toR = (Color.red(mToColor));
    int toG = (Color.green(mToColor));
    int toB = (Color.blue(mToColor));


    int diffR = toR - fromR;
    int diffG = toG - fromG;
    int diffB = toB - fromB;

    int R = toR - (int) (( diffR * mShade));
    int G = toG - (int) (( diffG * mShade));
    int B = toB - (int) (( diffB * mShade));

    return  Color.rgb(R, G, B);

}

/**
 * Gets the String equivalent of the generated shade
 * @return String value of the shade
 */
public String generateInvertedString() {
    return String.format("#%06X", 0xFFFFFF & generateInverted());
}

/**
 * Gets the inverted String equivalent of the generated shade
 * @return String value of the shade
 */
public String generateString() {
    return String.format("#%06X", 0xFFFFFF & generate());
}

}

[sharish]

@mrHerintsoaHasina Thanks for the code and I was able to reproduce it. In your code, you are still using viewpager.setOnPageChangeListener() in MainActivity.java#onCreate() which is deprecated and it does not work on this project. Please change it to viewpager.addOnPageChangeListener() as we have used in the master project here. This is not an issue with this project.

Thanks,
Harish

[mrHerintsoaHasina]

@cooltechworks For me the method addOnPageChangeListener is undefined for the type android.support.v4.view.ViewPager. From what version I need to use ?

[sharish]

@mrHerintsoaHasina Android Support Library, revision 22.2.0 (May 2015) - in this version setOnPageChangeListener() has been deprecated and addOnPageChangeListener is added. Please use this version or above.

Thanks,
Harish