How do I animate a view along a path in android?

Question

I would like to animate a hexagon that i drew in the class "MyView". I wanted to make a path and be able to just animate along that path.

A few precursors to understand the issue. I have getters and setters for the xPropertyName and the yPropertyName in the MyView class. The setters do not actively change the onDraw method in the MyView class. I'm not sure if that is the issue or not.

I've tried doing moveTo(), lineTo(), setLastPoint(), etc (maybe improperly) to get my path to the correct location.

I've also read the Android move object along a path and Animate ImageView along Path Android questions and I would not like to override any methods or do anything that's complicated beyond calling preset methods and using my view class. I would just like to have the hex object move along the path.

I was wondering if the reason may be the "startX" and "startY" are not updated in the onDraw method of MyView. However, there is no documentation on this.

        float xCenter = PHONE_DIMS.x / 2;
        float yOffset = PHONE_DIMS.y / 3;

        MyView hex = new MyView(this, yellow, 10,10, 90);
        doodleView.addView(hex);

        Path hexPath = new Path();

        hexPath.moveTo(10,10);
        hexPath.lineTo(10,PHONE_DIMS.y *4/5);
        hexPath.moveTo(10, PHONE_DIMS.y *4/5);

        ObjectAnimator hexAn = ObjectAnimator.ofFloat(hex,"startX","startY",hexPath);

        OvershootInterpolator interpolator = new OvershootInterpolator();
        hexAn.setInterpolator(interpolator);
        hexAn.setDuration(5000);
        hexAn.start();

//Below is MyView just for context


public class MyView extends DrawView {
    private float size,x,y;
    /**
     * Constructor for a basic Draw View
     *
     * @param context The Context the view is running in, through which it can access the current theme, resources, etc.
     * @param brush   A paint object for styling when drawing
     */
    public MyView(Context context, Paint brush, float startX, float startY, float size) {
        super(context, brush);
        setStartX(startX);
        setStartY(startY);
        this.setSize(DimHelp.DP2PX(size,context));
        initFromParentCoordsPX(
                DimHelp.DP2PX(getX(),context),
                DimHelp.DP2PX(getY(),context),
                DimHelp.DP2PX(size + getX(), context),
                DimHelp.DP2PX(size + getY(), context)
        );

    }

    /**
     * Draw something on the Canvas
     * @param canvas the canvas that is drawn upon
     */
    protected void onDraw(Canvas canvas) {

        Paint myBrush = this.getBrush();
        float comp = myBrush.getStrokeWidth()/2;
        float canWidth = getSize();
        float canHeight = getSize();

        canvas.drawLine(canWidth/3, 0+comp, 2*canWidth/3, 0+comp, myBrush);
        canvas.drawLine(2*canWidth/3, 0+comp, canWidth-comp, canHeight/3, myBrush);
        canvas.drawLine(canWidth-comp, canHeight/3, canWidth-comp, 2*canHeight/3, myBrush);
        canvas.drawLine(canWidth-comp, 2*canHeight/3, 2*canWidth/3, canHeight-comp, myBrush);
        canvas.drawLine(2*canWidth/3, canHeight-comp, canWidth/3, canHeight-comp, myBrush);
        canvas.drawLine(canWidth/3, canHeight-comp, 0+comp, 2*canHeight/3, myBrush);
        canvas.drawLine(0+comp, 2*canHeight/3, 0+comp, canHeight/3, myBrush);
        canvas.drawLine(0+comp, canHeight/3, canWidth/3, 0+comp, myBrush);


    }

    //Getters and setters for the size, x and y variables
    public void setSize(float s) {size = s;}
    public float getSize() {return size;}
    public void setStartX(float ex) {x = ex;}
    public float getX() {return x;}
    public void setStartY(float ey) {y = ey;}
    public float getY() {return y;}
}

Answer 1

You need to animate the x and y properties to move an image. Modify your existing code as shown here:

    MyView hex = new MyView(this, yellow, 10,10, 90);
    doodleView.addView(hex);

    Path hexPath = new Path();

    hexPath.moveTo(10,10);
    hexPath.lineTo(10,PHONE_DIMS.y *4/5);
    // you've already moved to this position with the above lineTo() call
    // hexPath.moveTo(10, PHONE_DIMS.y *4/5); 

    // Animate the x and y properties, not startX and startY
    ObjectAnimator hexAn = ObjectAnimator.ofFloat(hex,"x","y",hexPath);

    OvershootInterpolator interpolator = new OvershootInterpolator();
    hexAn.setInterpolator(interpolator);
    hexAn.setDuration(5000);
    hexAn.start();