Currently diving into Canvas and drawing custom views. I just created a round rect with border with this code (my onDraw method):
paint.color = Color.RED
paint.style = Paint.Style.FILL
val cornerRadius = 150f
val strokeWidth = 12f
val rect = RectF(
rootView.left.toFloat() + strokeWidth,
rootView.top.toFloat() + strokeWidth,
rootView.right.toFloat() - strokeWidth,
rootView.bottom.toFloat() - strokeWidth
)
canvas.drawRoundRect(rect, cornerRadius, cornerRadius, paint)
paint.style = Paint.Style.STROKE
paint.color = Color.GREEN
paint.strokeWidth = strokeWidth
canvas.drawRoundRect(rect, cornerRadius, cornerRadius, paint)
What I want to achieve is animation (snake-like progress) for this border. Last time I did something similar was circle border animation where drawArc with the dynamically changed angle in the Animation object did the perfect job. However, this time I cannot use drawArc because the different shape is required. I attach an image where I pointed out where I want the animation to start. I was thinking about creating Path object but I have no idea how to start drawing from the right bottom corner (just after the rounded part). Did anyone work with something similar already?
Last time (for the circle, as mentioned before) I did something like this:
canvas.drawArc(rect, START_ANGLE_POINT, angle, false, paint)
and the Animation class:
private inner class CountdownAnimation(private val roundCountdownView: RoundCountdownView): Animation() {
override fun applyTransformation(interpolatedTime: Float, t: Transformation?) {
roundCountdownView.angle = 360f * interpolatedTime
roundCountdownView.requestLayout()
}
}
I would like to achieve something similar but cannot find anything useful on the Internet. Found already this SO question but I think that doing it via bitmaps is overkill for this specific problem. I will appreciate any suggestions. Thanks in advance! :)
