I am currently working at a travel app, and I have a vertical line, that represents the progress made on your trip. This is the onDraw function of my class:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (paint != null) {
canvas.drawLine(startingX, startingY, startingX, progress + startingY, paint);
if (transitTrip) {
if (ratio > progresses.get(0)) {
canvas.drawBitmap(waypointPassedBig, startingX - bitmap.getWidth() / 2, (24 * Constants.density) + (0 * (totalProgress + 10 * Constants.density) / (progresses.size() - 1)), paint);
} else {
canvas.drawBitmap(waypointBig, startingX - bitmap.getWidth() / 2, (24 * Constants.density) + (0 * (totalProgress + 10 * Constants.density) / (progresses.size() - 1)), paint);
}
for (int i = 1; i < progresses.size(); i++) {
if (ratio > progresses.get(i)) {
canvas.drawBitmap(waypointPassed, startingX - bitmap.getWidth() / 2, (24 * Constants.density) + (i * (totalProgress + 10 * Constants.density) / (progresses.size() - 1)), paint);
} else {
canvas.drawBitmap(waypoint, startingX - bitmap.getWidth() / 2, (24 * Constants.density) + (i * (totalProgress + 10 * Constants.density) / (progresses.size() - 1)), paint);
}
}
if (ratio > progresses.get(progresses.size()-1)) {
canvas.drawBitmap(waypointPassedBig, startingX - bitmap.getWidth() / 2, (24 * Constants.density) + ((progresses.size()-1) * (totalProgress + 10 * Constants.density) / (progresses.size() - 1)), paint);
} else {
canvas.drawBitmap(waypointBig, startingX - bitmap.getWidth() / 2, (24 * Constants.density) + ((progresses.size()-1) * (totalProgress + 10 * Constants.density) / (progresses.size() - 1)), paint);
}
}
canvas.drawBitmap(bitmap, startingX - bitmap.getWidth() / 2, progress + startingY - bitmap.getHeight() / 2, paint);
}
}
As you can see, I first draw the line, then I draw my waypoints, and ultimately my position. "progress" represents the progress on the trip from 0% to 100%. Now, if the progress is 50% it will directly draw the line to half of the view. Now I need this to animate the line and not just simply appear. How can I do this efficiently? I tried setting a list of paths instead of "drawline", and in a for (i go through all the points of the line, and create for each one a line from the start, to that point). After that I tried settings a incrementor, and each onDraw only to draw from the start to the point from the path, represented by the incrementor, but like that it draw nothing.
