'Creating a path for animation given a set of coordinate points in Android Studio

I asked this question before, but now I've stumbled around and figured out a direction. Basically, I need to record the user's finger's movements around the screen, and replay an animation of that movement on a view upon pressing a replay button, as well as a reverse animation of it when pressing a reverse button. I'm trying to achieve this by saving the finger's (x,y) coordinates in onTouch(), which I store in an ArrayList for PointF objects, then create a path for the view to animate on based on the coordinates stored in said ArrayList. Then I'll need to animate along that path. However, I am not sure how to create a path based on an arraylist that could be of any length.

Code related to the animation so far:


import android.animation.ObjectAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PointF;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;

import androidx.annotation.RequiresApi;

import java.util.ArrayList;

/**
 * TODO: document your custom view class.
 */
public class MyView extends View {
    ArrayList<PointF>theCoords;
    ArrayList<Float> xcord;
    ArrayList<Float> ycord;
    private Paint paint;
    //coordinates
    private float x;
    private float y;


    public MyView (Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
        xcord = new ArrayList<Float>();
        ycord= new ArrayList<Float>();
        theCoords=new ArrayList<PointF>();
    }


    public MyView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initPaint();
        xcord = new ArrayList<Float>();
        ycord= new ArrayList<Float>();
        theCoords=new ArrayList<PointF>();
    }


    public MyView(Context context) {
        super(context);
        initPaint();
        xcord = new ArrayList<Float>();
        ycord= new ArrayList<Float>();
        theCoords=new ArrayList<PointF>();

    }





    //initialize paint object
    private void initPaint(){
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.BLACK);
        paint.setTextSize(40);
    }
    @Override
    //drawing on the canvas
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.WHITE);
    
        canvas.drawCircle(x,y,50,paint);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                theCoords.clear();
                xcord.clear();
                ycord.clear();
                x = event.getX();
                y = event.getY();
                PointF p1 = new PointF(x,y);
                theCoords.add(p1);
                postInvalidate();
                break;
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_UP:

                x = event.getX();
                y = event.getY();
                PointF p2 = new PointF(x,y);
                theCoords.add(p2);
                postInvalidate();

                break;
        }
        return true;
    }

    @RequiresApi(api = Build.VERSION_CODES.R)
    public void replayAnim()
    {
        PointF pcur;
        PointF pnext;
        //create path
        for(int i =0;i<theCoords.size()-1;i++)
        {
            pcur=new PointF(theCoords.get(i));
            pnext=new PointF(theCoords.get(i+1));
            //how to form a path with these?
        }
        //anim along the path

    }
    public void reverseAnim()
    {
        //the original code I have, which only
        //moves the view to its original position
        for (int i = xcord.size() - 1; i >= 0; i--)
        {
            x = xcord.get(i);
            y = ycord.get(i);
            Log.d("ReverseAnimation", "x: " + Float.toString(x));
            postInvalidate();
        }
    }
    public float getX()
    {
        return x;
    }
    public float getY()
    {
        return y;
    }
} ```


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source