We were recently inspired by a Google Material Design case study Rally, therefore we have implemented this project for fun, as well to learn new things.

While working on this project, I came across a situation where I needed to draw some shapes, such as the picture above, using Canvas API. In this article, I am focusing on drawing a Bezier curve , rather than the whole graph, but you can find the complete source code here. If you have never worked with canvas API, I suggest you first take a look at other tutorials and resources. I will talk about the basic idea of a Bezier curve, what Android provides for it and how we can implement it, by taking advantage of Canvas API. Let’s get started.

**Bezier Curve**

Basically it has start point, an end point and two control points to change the way how the curve is being drawn. There is an online editor so you can try to get a much better understanding of control points’ importance.

Now you have the basic idea of a Bezier curve and we’ll move on to the next part where we’ll be talking about what steps we need to complete to get the desired view.

**Three Steps to be Done**

- Calculate data points for our data to be represented
- Calculate connection points (I’ve already mentioned that connection points are helpers for start and end points to play behaviour of curve style.)
- Define path with these points and draw in canvas

In the picture above you can see we have two curves : the first curve with a red border color and the second one with a fill background color. I’ll start with the first curve. The second one is also the same way but just with changing the paint style.

**Step 1 : Calculating Data Points**

Virtual representation of data points

Data points here mean a list of point objects with x, y position. Before we start calculating points, the first thing we need is data to be represented which should be actually your data statistics or progress and in my case I generate it randomly. And then we calculate x,y coordinates using this data to get data points. I omitted some code for the sake of simplicity.

**Step 2 : Calculating Connection Points**

In the below picture, grey circles represent each pair of start and end points and then we calculate connection points for each circle using the logic described in the second picture below.

Illustration of calculating connection points for each pair of start and end points

https://javascript.info/article/bezier-curve/bezier4.svg

In the above picture, 1 is the start point and 4 is the end point. 2 and 3 are the connection points. The logic is then transformed to code which looks like this:

The calculated data points and connections points will look like this:

Blue circles are connection points

Next step is to connect all these points to form bezier curve.

**Step 3 : Define Path and Draw in Canvas**

Now we have all the data that we need to start drawing. Android canvas API provides a set of useful methods to draw simple shapes like circle, rectangle, line, etc. But for complex shapes with full control and flexibility, it provides the path in which we will be moving and positioning our points and draw it in canvas using drawPath method.

What I known so far is that there are two methods you can use to draw bezier curve - quadTo and cubicTo which we will be using in this article.

*cubicTo(float x1, float y1, float x2, float y2, float x3, float y3)*

*As per documentation, Add a cubic bezier from the last point, approaching control points (x1,y1) and (x2,y2), and ending at (x3,y3). If no moveTo() call has been made for this contour, the first point is automatically set to (0,0).*

We connect our points in path using moveTo and cubicTo and then we draw this path in canvas which will be rendered on the screen.

And our border paint object is:

And that’s it. We will see our bezier curve rendering on screen.

**Second Curve with Fill Background Color**

For the second curve, we also need to do the above three steps with a bit extra modification.

And our modified code will look like this:

Fill background paint style:

We’re done!! You can see two curves rendered on screen.

By this time, you can now create your own curve based on your requirement and you won’t need to integrate the whole third-party library for just using the curve. Android canvas API is awesome and you should give it a try.

In the next article I’m going to talk about how to animate our bezier curve smoothly when data points changed.

## References

https://buptfarmer.wordpress.com/2016/08/12/bezier-curves-in-android-using-path-cubicto/