How to make a page indicator for horizontal recyclerview

Question

Any idea how to create a page indicator for recyclerview list ?

Answer 1

Shoban's answer did not work for me, so here is how I got it to work.

Keep in mind that I removed the animations as they were not necessary for my usecase. The result looks exactly like the screenshot attached in this question.

Also, in order to allow scrolling only one element at a time, I used PagerSnapHelper() to achieve the desired result.

PagerSnapHelper helper = new PagerSnapHelper();

helper.attachToRecyclerView(recyclerView);

recyclerView.addItemDecoration(new CirclePagerIndicatorDecoration());

Here is my code for the decorator:

public class CirclePagerIndicatorDecoration extends RecyclerView.ItemDecoration {

private final int colorActive = 0xFFFFFFFF;
private final int colorInactive = 0x66FFFFFF;
private final int circleRadius = 8;

private static final float DP = Resources.getSystem().getDisplayMetrics().density;

/**
 * Height of the space the indicator takes up at the bottom of the view.
 */
private final int mIndicatorHeight = (int) (DP * 16);

/**
 * Indicator stroke width.
 */
private final float mIndicatorStrokeWidth = DP * 2;

/**
 * Indicator width.
 */
private final float mIndicatorItemLength = DP * 16;
/**
 * Padding between indicators.
 */
private final float mIndicatorItemPadding = DP * 4;

/**
 * Some more natural animation interpolation
 */
private final Interpolator mInterpolator = new AccelerateDecelerateInterpolator();

private final Paint mPaint = new Paint();

public CirclePagerIndicatorDecoration() {
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    mPaint.setStrokeWidth(mIndicatorStrokeWidth);
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setAntiAlias(true);
}

@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
    super.onDrawOver(c, parent, state);

    int itemCount = parent.getAdapter().getItemCount();

    // center horizontally, calculate width and subtract half from center
    float totalLength = mIndicatorItemLength * itemCount;
    float paddingBetweenItems = Math.max(0, itemCount - 1) * mIndicatorItemPadding;
    float indicatorTotalWidth = totalLength + paddingBetweenItems;
    float indicatorStartX = (parent.getWidth() - indicatorTotalWidth) / 2F;

    // center vertically in the allotted space
    float indicatorPosY = parent.getHeight() - mIndicatorHeight / 2F;

    drawInactiveIndicators(c, indicatorStartX, indicatorPosY, itemCount);

    // find active page (which should be highlighted)
    LinearLayoutManager layoutManager = (LinearLayoutManager) parent.getLayoutManager();
    int activePosition = layoutManager.findFirstVisibleItemPosition();
    if (activePosition == RecyclerView.NO_POSITION) {
        return;
    }

    // find offset of active page (if the user is scrolling)
    final View activeChild = layoutManager.findViewByPosition(activePosition);
    int left = activeChild.getLeft();
    int width = activeChild.getWidth();

    // on swipe the active item will be positioned from [-width, 0]
    // interpolate offset for smooth animation
    float progress = mInterpolator.getInterpolation(left * -1 / (float) width);

    drawHighlights(c, indicatorStartX, indicatorPosY, activePosition, progress, itemCount);
}

private void drawInactiveIndicators(Canvas c, float indicatorStartX, float indicatorPosY, int itemCount) {
    mPaint.setColor(colorInactive);

    // width of item indicator including padding
    final float itemWidth = mIndicatorItemLength + mIndicatorItemPadding;

    float start = indicatorStartX;
    for (int i = 0; i < itemCount; i++) {
        c.drawCircle(start, indicatorPosY, circleRadius, mPaint);
        start += itemWidth;
    }
}

private void drawHighlights(Canvas c, float indicatorStartX, float indicatorPosY,
                            int highlightPosition, float progress, int itemCount) {
    mPaint.setColor(colorActive);

    //width of item indicator including padding
    final float itemWidth = mIndicatorItemLength + mIndicatorItemPadding;

    float highlightStart = indicatorStartX + itemWidth * highlightPosition;

    if (progress == 0F) {
        // no swipe, draw a normal indicator
        c.drawCircle(highlightStart, indicatorPosY, circleRadius, mPaint);
    }
}

@Override
public void getItemOffsets(@NotNull Rect outRect,
                           @NotNull View view,
                           @NotNull RecyclerView parent,
                           @NotNull RecyclerView.State state) {

    super.getItemOffsets(outRect, view, parent, state);
    outRect.bottom = mIndicatorHeight;
}