Draw a line in custom view

Question

INTRODUCTION

I'm practicing with custom views, and I need to make an app: This app shows a small circle (like a small ball), and this ball moves respect to the phones orientation (using accelerometer). I have done with this.

QUESTION

Now, I need to get an extra functionality:

• This ball now appears on the top left side of the screen, and I need it to appear in the middle.
• I need to draw the trajectory of the ball that is, to draw a black line that represents the ball's track

This is the code of my custom view:

public class MyView extends View {

    private Path drawPath;
    private Paint drawPaint;
    private Bitmap canvasBitmap;
    float speedX;
    float speedY;
    float radius = 10;
    float posX = radius;
    float posY = radius;
    long lastUpdateTime = 0;
    final float METER_TO_PIXEL = 50.0f;


    /**
     * Constructor
     */
    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setupDraw();
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(drawPath, drawPaint);
        canvas.drawCircle(posX, posY, radius, drawPaint);
    }


    private void setupDraw() {

        drawPaint = new Paint();
        drawPaint.setColor(Color.BLACK);
        canvasBitmap = Bitmap.createBitmap(640, 1200, Bitmap.Config.ARGB_8888);
        posX = getWidth() /2;
        posY = getHeight() /2;
    }

    public void update (float gravityX, float gravityY) {

        if(lastUpdateTime == 0) {
            lastUpdateTime = System.currentTimeMillis();
            return;
        }
        long now = System.currentTimeMillis();
        long ellapse = now - lastUpdateTime;
        lastUpdateTime = now;

        speedX -=((gravityX * ellapse)/1000.0f) * METER_TO_PIXEL;
        speedY +=((gravityY * ellapse)/1000.0f) * METER_TO_PIXEL;

        posX += ((speedX * ellapse) / 1000.0f);
        posY += ((speedY * ellapse) / 1000.0f);

        /*Checks screen limits*/
        if (posX < radius) {
            posX = radius;
            speedX = 0;
        }
        else if (posX > (getWidth() - radius)) {
            posX = getWidth() - radius;
            speedX = 0;
        }
        if (posY < radius) {
            posY = radius;
            speedY = 0;
        }
        else if (posY > (getHeight() - radius)) {
            posY = getHeight() - radius;
            speedY = 0;
        }
        this.invalidate();
    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        /*HERE IS WHERE I TRY TO SET THE BALL ON THE MIDDLE OF THE SCREEN*/
        drawPath = new Path();
        drawPath.moveTo(w / 2, h / 2);
    }
}

Answer 1

I achieved to put the ball in the middle by doing:

protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);

    if (isFirstTime) {
        drawPath = new Path();
        drawPath.moveTo(w / 2, h / 2);
        isFirstTime = false;
    }
    //...
}

And I start the pathdrawing in the middle by:

public void update (float gravityX, float gravityY) {

    if(lastUpdateTime == 0) {
        posX = getWidth() /2;
        posY = getHeight() /2;
        lastUpdateTime = System.currentTimeMillis();
        this.invalidate();
    }
    //...
}

But to draw the path I'm still having some trouble. I achieved to draw something, but it draws 2 lines: 1st the ball track, and 2nd a direct line from the middle to the ball. This last line makes the surface between the 2 lines to be painted ass well, so I have to still see how to solve this.

For this, I have included this at the end of the update() method:

drawPath.lineTo(posX, posY);
drawCanvas.drawPath(drawPath, drawPaint);
this.invalidate();

And my onDraw() method looks like this:

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint);
    canvas.drawPath(drawPath, drawPaint);
    canvas.drawCircle(posX, posY, radius, drawPaint);
}