Vector illustration basics for Android developers — Part 4: z-ordering
Fancy-sounding name, nothing complicated about it
This is part 4 in a five-part series. Read the other parts here: Part 1, Part 2, Part 3 , Part 5 and the Bonus Part.
z-ordering is a very simple concept to grasp, especially if you’re an Android developer. It describes the way views are laid out from back to front.
You probably already know that in a layout, if you place two views in the same two-dimensional (X-Y) space, the view that was declared earlier in the XML file is the view that will be at the bottom and the view that was declared later in the XML file is the view that will be at the front (the android:elevation attribute can change this, of course).
So, in this layout
<RelativeLayout …> <TextView android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="some text" /> <ImageView android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:background="#ffffff" /></RelativeLayout>
the ImageView with a solid white background will sit higher than the TextView (to its front) and will cover it, rendering it invisible to a user.
And that’s z-ordering in a nutshell.
The same thing happens in vector graphics software. When you draw a shape and then draw another shape in the same two-dimensional space, the second shape will be drawn over the first shape, rendering it partially or totally invisible, depending on location, fill (or lack of it) and alpha (transparency) values.
Manipulating the position of items on the z-axis
All vector graphics software created after 1894 allows you to change the position of the items on the z-axis.
In Gravit Designer this can be done by selecting the object you want to move and then going to Modify →Arrange and selecting one of the following
- Send to front: no matter where the objects sits in the z-axis hierarchy, bring it to the front of all other objects
- Bring forward: this will bring the object one step to the front. Say that there are three objects in front of the selected one. The first click will bring it in front of the first shape, the second click to the front of the second shape and the third click in front of the third shape.
- Send backward: send the object one step backwards.
- Send to back: send the object all the way to the back, behind all other objects.
Practicing
Let’s quickly create a simple partial sunset scene to see this in action.
First, let’s create a new project in landscape (in Gravit on the opening dialog select New design → Blog cover).
Then, create a big deep blue rectange that takes up the entire surface of the canvas. To do this, select a Rectange shape from the shape drop-down on the top toolbar. Draw the rectangle.
On the right of the screen you’ll see a panel called “Fills”. Tap the circle directly beneath the “Fills” header and select a blue color. Your entire canvas should now be blue. If it is not, let me know in the comments to figure out what you’re doing wrong.
Now create another rectangle that takes up the full with of the canvas but only about one third of its height. Make it a brown-y color and align its bottom to the bottom of the canvas, like so
This rectangle represents our ground with a horizon and, as was bound to happen, it has been placed in front of the sky.
Almost there, now let’s draw our sun. From the shapes drop-down select “Ellipse” and, holding Shift down to draw a perfect circle, draw an orange circle
Oops. The sun is sitting in front of the ground. That’s not right. That’s mad.
To fix this, select the circle and then go to Modify → Arrange →Send backward
Success!
This was a very simple example but it perfectly illustrates how you can use z-ordering to your advantage. In this case, you didn’t have to somehow cut the circle and align its bottom with the top of the ground shape, you just sent it to the back of it and to the front of the sky shape. Care to guess what will happen if you press “Send backward” one more time?
OK, class is dismissed. Or is it?
Here’s one final tip that has nothing to do with today’s lesson.
Select the sun and duplicate it by Ctrl+C and then Ctrl+V. This will create another sun at the exact same spot the first one is. Now, select the sun and on the right panel go the the Effects section. Tap the “+” sign on the blur row and then bring the radius all the way to the max. This should give you a nice glow-y effect!
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!
