Search code examples
androidandroid-recyclerviewandroid-canvas

Circular RecyclerView - Rotate and Translate list items on scroll


On scroll, I want to rotate and translate these list items in a way that they still are around in a circular manner. I have made a custom view and over ride these methods with this rotation and translation as used Here. But rotations are a bit weird and non circular. This is what I want to achieve

enter image description here

@Override
protected void dispatchDraw(Canvas canvas) {
    canvas.save();
    int top = getTop();

    float rotate = calculateAngle(top, recyclerViewHeight);
    Matrix m = canvas.getMatrix();
    m.preTranslate(-2 / getWidth(), -2 / getHeight());
    m.postRotate(rotate);
    m.postTranslate(2 / getWidth(), 2 / getHeight());
    canvas.concat(m);
    super.dispatchDraw(canvas);
    canvas.restore();

}

private float calculateAngle(int top, float height) {
    float result = 0f;
    float fullAngleFactor= 60f;
    if (top < height / 2f) {
        result = (top - (height / 2f)) / (height / 2f) * fullAngleFactor;
    } else if (top > height / 2f) {
        result = (top - (height / 2f)) / (height / 2f) * fullAngleFactor;
    }
    return result;
}

Solution

  • I used this library to achieve same behavior. No need to create any custom view and override onDraw() or onDispatchDraw(). I used this layout manager configuration:

    layoutManager = new CircleLayoutManager.Builder(this)
                    .setRadius(900)
                    .setAngleInterval(30)
                    .setDistanceToBottom(-350)
                    .setGravity(CircleLayoutManager.LEFT)
                    .build();