Design to Canvas in Android

undraw.co

Whenever we as Android developers see a perfect and complicated design that a professional designer has implemented, we say: “What the hell? how can we implement this difficult masterpiece?”. In this article, we are going to describe a way to implement the most challenging designs. If you prefer to use PNG and SVG instead of custom view and increase your APK size, skip this article :).

https://undraw.co/illustrations

What is the challenge?

Oftentimes, SVG and PNG are used to implement the user interface in applications. Sometimes, it causes some problems for us, such as increasing the size of the application, not supporting some SVG’s tags like dashed lines by Vector, etc. So, we should use custom views to draw them here. The way is just a little rougher, just a little!

A Beautiful Design

Screen capture

Here we have two dashed lines, a curve with gradient, two circles that one is dashed, and a cross icon.

Let’s do it… 👩‍🎨

How?

At first, you can get the source from here.

Then, check the “utils” package. In this package, we have an Interface called CustomViewHelperInterface. Within this interface, you can find some attributes that you have to value and some extension functions. (These extension functions affect child classes).

SampleCurveView shows you how you can implement CustomViewHelperInterface in your classes.

Attributes to be valued

As seen in the above code, artboardHeight() and artboardWidth() are our artboard’s height and width of the design file that the designer gave us. Also, targetHeight() and targetWidth() are the view’s height and width that we want to draw.

For instance, these attributes have been valued like below within SampleCurveView.

According to initial values, we have to find a relation between the design points and the view. We can do it in three steps that I express below.

Coordinates

If you have experience with Canvas, you know to draw everything with Canvas, we have to give target coordinates (X and Y points). Also, the coordinates should be responsive! This means the X or Y point for all devices with different sizes should be the same. No stretching, no deforming, etc.

At first, we find the coordinates from the design. After that, we can get the percentage of coordinates relative to the dimensions of the design artboard. At last, we use these percentages to find the target’s coordinates.

Oops! :| I’m a bit baffled. What about you? Let’s make it simple. ;)

At first, we find the coordinates from the design.

If you are using some applications such as Sketch or Adobe Xd, it is simple to get the points. Click on each point and copy the X and Y from the top right of the screen.

After that, we can get the percentage of coordinates relative to the dimensions of the design artboard.

With the below functions, we can get the percentages X (width) and Y (height) from the design:

At last, we use these percentages to find the target’s coordinates.

To convert the obtained percentages to the height and width of the view dimensions, we can use the below functions:

NOTE: YOU DO NOT NEED TO DO ALL OF THESE STEPS.

Because with these extension functions, we can do them in just one line.

The sample usage with extension functions:

Up to now, I have told you everything that you need to know. It’s better to check the source code and the implementation. You can find them here.

I know this article will be long, but I’d like to tell you more about Bezier Curves to have more dominance on the subject.

Bézier curve: Is a parametric curve used in computer graphics and related fields.

Each Bezier curve has 4 essential points. Two “End Points” and two “Control Points”.

You can find the full implementation of the above design in SampleCurveView.kt. I hope you find this article helpful. I’ll be pleased if you mention your opinions. Also, if you have any questions, you know how you can find me. I’m everywhere. :)

GitHub link: https://github.com/rvhamed/easy_draw

--

--

Software engineer. I love learning, teaching, and coding. Android Developer @ Snapp!

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store