How To Draw A French Curve

How I drew custom shapes in bottom bar

Recently, I received a design that contains BottomNavigationView. Until here everything is fine, merely when I looked at the sketch I said ummm… it's going to be hard 😟. Here is a re-create of the existent design:

I've never did something similar this before, so I started looking online on how to create a curve custom view. After some enquiry and a discussion with my colleagues, I found out that information technology's a kind of Bézier curve.

Bézier curve

If you've used a design or a cartoon software, you've probably used Bézier curves without even knowing. This is named later a French engineer, Pierre Bézier, who invented this method to depict the shine curves needed when designing cars.

Bézier path in Adobe Illustrator (Wikipedia)

I and so found a very good article that explains the type of curve I need, I strongly recommend reading it. In addition, it contains a tool to play with curves.

The blazon of curve that fits my design was Cubic Bézier curves and I'll take the definition establish in the article.

Cubic Bézier curves are defined in terms of four control points. While the first and final control points specify locations of the endpoints of the drawn curve, the second and 3rd command bespeak influence the tangency of the curve.

Let'south now dive into the code and run across how to create a cubic Bézier curve in Android.

First of all, we create a custom view that extends BottomNavigationView to have advantage of all its features and just focus on the design.

If we look at the lawmaking, we've only added an init()method, which volition only initialize the path and paint objects.

The role of the path is to let us describe geometric forms including Bézier curve. The style path draws a line betwixt two points : a start bespeak and an end point. By default BottomNavigationView is in the course of a rectangle, so nosotros're going to use Path to redraw it with curves every bit shows the view to a higher place.

While path object has the role to command the styling and color of what is drawn. You can create an object merely without passing a parameter, just information technology is possible to exist more precise past specifying flags. The showtime matter is to make up one's mind what you want to depict, the contours of a view without its interior, or only the interior, or maybe both? In order to assign a value, we employ setStyle(Paint.Way way) , For our instance we will draw both contours and the interior so nosotros're going to utilize FILL_AND_STROKE.

We tin can then assign a colour, you lot choose the colour you lot similar, and yous set groundwork color of the view to transparent to avoid default color in background.

First of all, we'll initialize the positions of our points. The position of points depends on the width and acme of the view. P1 is the kickoff point of our path this is where nosotros will start drawing. P2 is the commencement of our showtime bend. To calculate the position of the point, bluntly information technology was a bit of trial and error using the radius of FAB button and information technology depends on each view and each design, so co-ordinate to your needs, you lot can adjust these calculations. It was the aforementioned thing for P3 (which is the finish of the first curve and the beginning of the second one) and P4 (the end of the second curve).

Avoid doing calculations in the onDraw() method because it is called each fourth dimension and it is not skilful for the performance of your awarding. I made the calculations of my betoken in the onSizeChanged() method which is called when the size of the view has inverse, so non likewise greedy in terms of performance

Now here is the most interesting and complicated part . No no, don't worry it's easier than you lot think. To begin we reset the path to clear any lines and curves from it, then we movement it to the kickoff indicate P1 using moveTo(ten,y)method and depict the beginning line which is between P1 and P2 using lineTo(10,y)that adds a line from the last signal to the specified indicate, and to clarify, in our case we exercise non actually need to specify the kickoff point because by default If in that location is no previous point, then a moveTo(0,0)is inserted automatically.

For the cubic curves, we gonna use cubicTo(x1,y1,x2,y2,x3,y3)method which allows us to depict a cubic curve, and then the first and 2nd point (x1,y1) (x2,y2) have the role of controlling the tangency. For the calculations, as you might have guessed, you take to try and grope to have the right position for your control points. To take an idea where the control points tin can exist positioned y'all can attempt this online tool . We do the same affair for the second curve, and finally, nosotros draw the rest of the navigation bar as if we draw a rectangle using lineTo and close the contour.

Finally, we volition be able to pigment using the canvas object which is the component on which we will pigment. Canvas offers several drawing methods and the one that suits our use case is sail.drawPath(Path path, Paint paint) that co-ordinate to the documentation draws the specified path using the specified pigment and the path will be filled or framed based on the Manner in the pigment.

At present I hope information technology's clearer for y'all how to draw with android and how to take bezier curve. Happy coding