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 < xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"> shape <[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 ) and you can select the style you want. Ends 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 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. Borders 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 section, and tapping the “+” icon). To remove the fill, right above the section you’ll find the Fills section. Tap the trash can icon to take out the trash (erm, fill) Borders Borders 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 , but you’d have a monster headache at the end of lecture. can that 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 ! How’s for an incentive? You have everything you need in this article. “Android Development for Gifted Primates” that And now, an amazing explanation on the difference between a path and a stroke . 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 path is a set of points . 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. A stroke is a visual attribute that you can apply to a 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 (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. donating any amount over $3 . 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) After its release, the book will go to its regular price of $15 when you donate so I can contact you and send you the book as soon as it’s released! IMPORTANT: Leave me a message with your email address _I'm an Android developer and designer with a love for beautiful UIs!_www.buymeacoffee.com Buy Antonis Tsagaris a Coffee - BuyMeACoffee.com

Dash

ORANGE

Super

Too Long; Didn't Read

Questions about cloud security? Get answers here.

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

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Coin Mentioned

Antonis Tsagaris

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Coin Mentioned

Antonis Tsagaris

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES