Vector illustration basics for Android developers — Part 2: Strokes and paths

Note: this is part 2 in a five-part series. It would be optimal to read them in the correct order, so here’s Part 1 for those who missed it.

A stroke is the line that surrounds a shape or, in the case of open paths, the line that follows a path (an amazing explanation on the difference of a stroke and a path has been pasted at the end of this article).

When you draw a circle on your screen, that circle can have a fill and a stroke. It can also have a fill but no stroke or, conversely, have a stroke but no fill.

Just like shapes, strokes can have attributes that define their appearance. When you create a shape drawable in XML, you can define some stroke attributes. For example, the following represents a rectangle with an orange dashed stroke around it and no fill


android:dashGap="1dp" />

The attributes of this stroke are

  • width
  • color
  • dash width (how long the dashes should be)
  • dash gap (how big the gap between the dashes should be)

Pretty straightforward.

Although the Android SDK doesn’t go much further than this, Gravit Designer (and any other vector illustration program) offers us much deeper controls to customize our strokes to our heart’s desire.


Caps are the ends of a stroke. Obviously, closed paths (like circles and rectangles) do not have ends but let’s refer to our header image once more

As you can see, especially in the case of wide strokes, it can make a lot of difference. For example, the “liquid style” illustrations like the one below depend heavily on strokes with rounded caps, to give that “dripping/moving” feeling to the art.

Illustration by
The Artifex Forge

Changing the cap style in Gravit Designer is super-simple: after you’ve drawn a stroke, go to the right pane and click the “faders” icon at the “Borders” section. I’ve highlighted it below

Area of interest surrounded by a red circle

In there, you’ll find, among other things, setting for the ends (helpfully called Ends ) and you can select the style you want.

Shapes at the start and end of strokes

Gravit Designer lets you attach various shapes to both the starting and ending point of a stroke. In our header example illustration, you’ll notice a curved orange arrow.

The arrow was not created manually by me. In fact, this is just a thick stroke with the arrow on its right end added by going to the Borders section like before, clicking the “faders” icon and selecting an arrow for the right end of the stroke from the dropdown next to the clipboard-looking icons. Other shapes you can add include circles, bullets, diamonds, double arrows etc.

More stroke attributes

In the Borders section, inside the pop up that appears after clicking the “faders” icon, you may have noticed that you can also adjust the dash width and dash gap.

Finally, you can adjust the color of the stroke at the Borders section, directly below the “Borders” header. Tap the circle and select the color you want from a preset swatch of colors or just use your own. There’s also an eyedropper tool over the circle that allows you to pick your color from some other part of your illustration.

Cool stuff. So, how do I create a stroke?

Oh, yeah. Completely forgot about that.

To create a stroke, simply draw a shape and remove the fill (if the shape does not have a stroke preset, add one by going to the Borders section, and tapping the “+” icon). To remove the fill, right above the Borders section you’ll find the Fills section. Tap the trash can icon to take out the trash (erm, fill)

Another way to create a stroke is by using the Pen tool. The pen tool is a very powerful tool available in every vector graphics software but it takes some practice for someone to get the hang of it.

It’s not hard, but it’s better for you to watch a video tutorial about it, since words cannot explain it sufficiently. Well, they can , but you’d have a monster headache at the end of that lecture.

And what do you know, here’s a great tutorial on using the pen tool in Gravit Designer!

But honestly, you don’t need a tutorial just to make a stinkin’ practice stroke. Simply select the Pen tool (it’s easy to find: at the toolbar at the top of the screen, it looks like a fountain pen) and click at a point in your document. Then, click at another point in your document to join the nodes. There you go, your practice stroke!

For a longer-lasting stroking experience, after you place the first point, click at another point in your artboard but do not release the mouse button. Instead, drag the mouse to create a seductive curved stroke and release when satisfied. Nice! Now you have a curved stroke to practice on.

(That last paragraph got me all hot and bothered, for some inexplicable reason)

Today’s exercise

Take thirty minutes to create some strokes and change their attributes. The first person to create a beautiful, purple, dashed, curved stroke with an arrow at both ends and posts it in the comments below will win a copy of my book “Android Development for Gifted Primates” ! How’s that for an incentive? You have everything you need in this article.

And now, an amazing explanation on the difference between a path and a stroke

A path is a set of points . It is a set of coordinates that define a shape. The path itself is only a set of numbers, a mathematical definition, nothing more. Anything you see on your screen is a visual representation of that path.

A stroke is a visual attribute that you can apply to a path . A stroke can have a defined width, color or a number of other properties. A stroke is a visual effect that is attached to the path.

You can have a path without a stroke, but you can’t have a stroke without a path .

Thanks to the person that wrote this because I was struggling to explain the difference but this guy/gal explained it perfectly.

Hacker Noon稿源:Hacker Noon (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 移动开发 » Vector illustration basics for Android developers — Part 2: Strokes and paths

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录