Draw Path with Animation in Android

A few days back I needed to work on a graph where the path is moving from starting point to the endpoint and it got me thinking about how we can achieve that.

After searching a lot I found this library.

GitHub - swapnil1104/CurveGraphView: A highly customizable and performant custom view to render…

https://github.com/swapnil1104/CurveGraphView

How to use this library:

Step 1: Add the library in Gradle file

dependencies {
    implementation 'com.github.swapnil1104:CurveGraphView:{current_lib_ver}'
}

Step 2: Define configuration

Step 3: Create a point map

Step 4: Create Graph data using points

Step 5: Add graph data in curve graph view

But the limitation with this library is when you want to create a Bezier Curve, you don’t have control over middle points. Like in which direction at what angle you want to bend your curve.

When you open the CurveViewGraph class you will see the below code.

This tells us middle points are starting of x and the end of y.

So now the second option is Custom view. Let’s start creating a path on Canvas and then add animation to it.

Step 1: Create Custom View class extend View class.

Step 2: Define paint

private val linePaint = Paint(ANTI_ALIAS_FLAG).apply {
    style = Paint.Style.STROKE
    strokeWidth = 14f
    color = Color.parseColor("#E02E2E")
}

Step 3: I am dividing my view width into 10 parts to get the coordinates. And then calculating the x and y-axis.

This way I have created paths.

Step 4: Provide canvas width and height on which we are drawing.

Calculate size using the onSizeChanged method and call init() to create a path.

Step 5: Draw path on canvas

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    canvas.drawPath(path, linePaint)
}

Step 6: Define this view in the layout XML file.

Run the app and you will see a graph without animation.

Step 7: Add Animation, Get path length

val measure = PathMeasure(path, false)
length = measure.length

Step 8: Create path effect

private fun createPathEffect(pathLength: Float, phase: Float, offset: Float): PathEffect? {
    return DashPathEffect(
            floatArrayOf(pathLength, pathLength),
            (phase * pathLength).coerceAtLeast(offset)
    )
}

DashPathEffect creates a path in phases. Interval array must contain an even number of entries. phase is an offset into the intervals array.

params: intervals — an array of ON and OFF distances
phase — offset into the intervals array

Step 9: Set phase

fun setPhase(phase: Float) {
    Logger.d("CurveGraphDrawable", "setPhase called with:$phase")
    linePaint.pathEffect = createPathEffect(length, phase, 0.0f)
    invalidate() //will call onDraw
}

Step 10: Animate it using an Object animator

val animator = ObjectAnimator.ofFloat(this, "phase", 1.0f, 0.0f)
animator.duration = 3000
animator.start()

You can check the complete Custom class code HERE.

Now run the app and you will see a graph with animation. You can experiment with it according to your need.

Conclusion

The main motive was to understand how animation works on the path. Even when you are using any open source library to create a graph always check what it does from the inside, you might not need to add the whole library, just a small chunk of code will help you.

Hope this article was helpful for you. Do experiment and share with me what you have implemented.

If you have any feedback please write me back at karishma.agr1996@gmail.com.Your claps are really appreciated to help others find this article 😃 .