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

Again, simpler than you think

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.

Here’s part 3 for those that don’t care ‘bout no stinkin’ order! And here’s Part 4! And part 5! And the bonus part!

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

Just like shapes, strokes 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

<shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle">

<[stroke](https://developer.android.com/guide/topics/resources/drawable-resource.html#stroke-element)  
    android:width="2dp"  
    android:color="#FB8C00"  
    android:dashWidth="4dp"  
    android:dashGap="1dp" />  

</shape>

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

Caps are the ends of a stroke. Obviously, closed paths (like circles and rectangles) do not have ends but open paths do.

Let’s refer to our header image once more

As you can see, especially in the case of wide strokes, the style of the cap can make a lot of difference in appearance.

For example, “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.

HOLY UPDATE, BATMAN!

Due to the overwhelmingly positive reaction to this series and the requests of various readers (thank you, your messages made my day!), I have started working on a book version of this series, with expanded content and various exercises that will get you started quickly and efficiently.

The book will be released mid-March but you can pre-order it now by going to my BuyMeACoffee page (link below) and donating any amount over $3 (including $3, obviously). Donating $6 or $9 will also get you e-mail support from me while you’re working on the exercises! Stuck? Shoot me an e-mail and I’ll respond at breakneck speed.

After its release, the book will go to its regular price of $15 and stay there forever (or at least until Michael Bay makes a good movie, which is practically forever), so if you enjoyed these articles and want a gorgeous-looking version with expanded content and more awful jokes, you know what to do! (hint: click the link below)

IMPORTANT: Leave me a message with your email address when you donate so I can contact you and send you the book as soon as it’s released!

Buy Antonis Tsagaris a Coffee - BuyMeACoffee.com_I'm an Android developer and designer with a love for beautiful UIs!_www.buymeacoffee.com