Drawing path gradually in Android

Question

I have a custom view, around which I want to draw a path, like a border. But the border should draw itself gradually, like a snake growing in size. The aim is to use it as a timer for a player to make his move in a game.

I used the Path class and the methods lineTo and addArc to draw the border.

timerPath = new Path();
timerPath.moveTo(getTranslationX() + width / 2, getTranslationY() + 3);
timerPath.lineTo(getTranslationX() + width - 10, getTranslationY() + 3);
timerPath.addArc(new RectF(getTranslationX() + width - 20, getTranslationY() + 3, 
getTranslationX() + width - 3, getTranslationY() + 20), -90f, 90f);
...
...
timerPath.lineTo(getTranslationX() + width / 2, getTranslationY() + 3);

timerPaint = new Paint();
timerPaint.setColor(Color.GREEN);
timerPaint.setStyle(Paint.Style.STROKE);
timerPaint.setStrokeWidth(6);

I use the drawPath() method in onDraw:

canvas.drawPath(timerPath, timerPaint);

It looks well.

Now, I wonder if there is a way to draw just part of the path using percentage (10%, 11%, 12% .. etc). Then I'll be able to animate the drawing.

If it's not possible, is there another way of animating border drawing? (to use as a timer)

Appreciate your help.

Answer 1

You can use the PathMeasure class to do this. Create a PathMeasure object from your path, measure the length and then use getSegment() to return a partial path that you can draw to the canvas:

    float percentage = 50.0f; // initialize to your desired percentage

    PathMeasure measure = new PathMeasure(timerPath, false);
    float length = measure.getLength();
    Path partialPath = new Path();
    measure.getSegment(0.0f, (length * percentage) / 100.0f, partialPath, true);
    partialPath.rLineTo(0.0f, 0.0f); // workaround to display on hardware accelerated canvas as described in docs
    canvas.drawPath(partialPath, timerPaint);