There are two options for drawables in Android Studio—the first is to inflate an image (PNG or JPGs) and the second is to define the drawing you want in an XML file. The XML route is what I’m looking at today.
The Basic Activity that I’ve been modifying over the last few weeks had some of these XML files already loaded. If you go into res/drawable/ic_launcher_foreground.xml, you’ll see the xml for our friendly little Android alien icon.
It’s made of two <path> tags.
The first path defines the shape of the gradient that makes it appear our alien has a shadow. The second is the shape of the alien itself.
Let’s look at the alien code more closely.
Fill colors are hexadecimal numbers, a series of letters and numbers that correspond to a color. I wrote a quick run-down of how those work a long time ago, if you want a quick refresher.
Hex numbers are sometimes 6 digits, but you might notice in here, they’re 8 digits. The extra digits are added to the beginning to change up the transparency of the color (00 means fully transparent, FF is completely opaque). In this particular case, the strokeColor of the line defining the alien’s shape has been set to 00. That’s why we only see the fillColor (#FFFFFF = White).
Fun tip, if you don’t know the hex code you’re looking for, go into design view on any of your layout XML files. Click on one of your elements and scroll down to the background color option in the attribute panel. If you click the color, a window opens where you can just select the color you want, and it’ll give you the hex code.
That’s the easy bit.
The hard part, you may have noticed, is the pathData line.
The best resource I’ve seen yet on how this works is this article on Medium by Ali Muzaffar. Basically, letters start off commands like move, draw, or close shapes, and numbers within parentheses are coordinates to specify distances.
A quick reference:
Uppercase is absolute position. Lowercase is relative.
M (x,y) Move to (x,y).
Z Close the path by connecting to the start.
L (x,y) Line from current position to (x,y).
H (x) Horizontal line to this position.
V (y) Vertical line to this position.
C (x y x y) Draw a curve, using the first set of coordinates as a control point.
What makes this truly insane is that it’s all crammed into a single line. Parsing what you’re looking at is a massive headache. To get a better idea of what’s happening, I separated each piece of the path onto its own line. As you can see, most of the Alien is made up of curves. Its eyes are almost identical except for the starting point on the X axis.
This has all been a very roundabout way of saying that doing this sort of thing by hand is a recipe for disaster unless you’re defining a simple shape.
For instance…
Say I wanted to have a wallpaper for my Riddler app that’s just increasingly smaller rectangles. Nothing too fancy.
We’ll start off by creating a new drawable resource file.
Call the new file something you’ll remember. I called mine wallpaper. It’s made of 5 quadrangles, each defined by the xy coordinates of their 4 corners. To make it a bit more appealing, I made each shape a little warped and varied the shades of green.
With that in place, I went back over to our fragment_first.xml file in the layout folder. In the Palette, you can drag and drop an ImageView element, which prompts a pop-up where you can select your drawable.
Once that’s done, you might get an error in your component tree for that ImageView. To fix it, you can jump over to code view and specify layout width and height (as well as scaleType to fixXY). That should clear it up.
Lo and behold! Run it on a device and the app has a snazzy new background.
gifGuide2Code 