Whether you are a seasoned Android developer or a newbie, there is one thing that everyone despises: image adaptation (especially when the design team is lacking)! Why do Android phones have so many different resolutions? Why does my image display perfectly on one phone according to the design specifications, but looks distorted on another? Oh my god!
In the past, to solve the problem of inconsistent image display across different resolution screens, we usually adopted two approaches: one was to create different resource packages for different resolutions, requiring each image resource to be made in multiple sizes to adapt to different resolutions; the other was to simply use a high-resolution image and force the size of the ImageView, cramming the image in—due to the high resolution, it still looks fine on most models. However, both methods have their issues. First, they inevitably lead to an increase in the APK size, which might not interfere with the product when the app is relatively small, but as it grows larger, this becomes a significant headache. Moreover, those who have used the first method to adapt images know that renaming different-sized images to conform to the same naming convention and placing them in the appropriate folders is nothing short of torture…
When will this painful experience come to an end?
Embrace SVG.
PS: I wrote an SVG animation similar to the clock at Google I/O 2016, which should be a good resource for learning how to use SVG in Android. You can check it out at GoogleClock, here’s a screenshot:
SVG stands for Scalable Vector Graphics. Unlike traditional bitmap images, which store pixel values for each point in the image, SVG defines graphics using XML files, drawing the desired image through specific syntax and rules. With SVG, we define how to draw the image in advance and then render it when needed, whereas traditional bitmap images are already drawn and simply retrieved for use. This leads us to easily analyze the pros and cons of the two methods:
-
SVG renders the image when needed, which naturally consumes more time and resources during display.
-
Due to the previous reason, SVG is not suitable for images with overly complex details.
-
Bitmap images are pre-drawn, so they are less adaptable than SVG; the same image will display differently at different resolutions.
-
SVG files store information about how to draw the image, allowing for a clear perception of the lines, which is particularly useful for animations.
-
SVG does not store any pixel information, so its file size is much smaller than that of traditional bitmap files.
-
SVG images are vector graphics, so there is no distortion issue, and they theoretically support any level of scaling.
From the analysis above, we can see that the many advantages of SVG far outweigh its drawbacks (as long as its resource consumption does not significantly impact user experience)—hence the title of this article, “Embrace SVG.”
Since SVG is so good, why are there not many Android applications using SVG images? Because of the market. Support for SVG in Android began with Android L, which introduced classes like VectorDrawable and AnimatedVectorDrawable in its SDK to help us construct SVG graphics and animations. You can directly use the
However, please note that there is currently no official support package to help us maintain compatibility with devices running versions prior to Android L. Some open-source community solutions exist, but none provide a perfect solution, and there are always some issues—this means that if you don’t want to compromise, you can only wait until the market is predominantly Android L or higher before you can fully replace bitmap images with SVG in production. As of fall 2016, according to Umeng statistics, the market share of devices running Android L or above is only 43.27%, not even half—but clearly, the time for SVG to take off in Android is near, as most Android phones sold today are already equipped with Android L or above, just waiting for older devices to be phased out.
To use SVG, we first need to have an SVG file. We generally have two ways to obtain an SVG file: writing one ourselves or exporting it from software like AI or some websites.
As mentioned earlier, SVG files store information on how to draw the target image, so theoretically, we can write our own SVG file from scratch—as long as we know the rules for drawing the file, anything can be drawn. Let’s take a look at a simple SVG file:
This file draws the following shape (yes, Android Studio can preview the SVG XML file while writing it, which is quite powerful):
Overall, the carrier for SVG files in Android is the
vector:
| Attribute |
Parameter Type |
Default Value | Description |
| width | dimen | Required |
The actual width of the graphic, which can be redefined as needed when used. |
| height | dimen | Required | The actual height of the graphic, which can be redefined as needed when used. |
| viewportHeight | float | Required | Defines the size of the canvas. |
| viewportWidth | float | Required | Defines the size of the canvas. |
The commonly used attributes in the
Next, let’s look at the commonly used attributes of the
| Attribute | Parameter Type | Default Value |
Description |
| pathData | String | None |
The core of drawing, it has specific syntax to draw the target graphic. |
| strokeColor | color | Transparent | The color of the pen. |
| name | String | None | The name of this path, which can be referenced elsewhere. |
| strokeWidth | float | 0.0 | The width of the pen. |
| fillColor | color | Transparent | Fills the drawn area with color; if the shape is closed, it fills directly; if not, it connects the start and end points to close the shape and then fills it. |
Knowing these attributes allows us to assign values to pathData and draw some common shapes. Next, I will explain the basic syntax for drawing shapes in pathData:
-
M = moveto(M X,Y): Moves the pen to the specified coordinate without drawing.
-
L = lineto(L X,Y): Draws a straight line to the specified coordinate.
-
H = horizontal lineto(H X): Draws a horizontal line to the specified X coordinate.
-
V = vertical lineto(V Y): Draws a vertical line to the specified Y coordinate.
-
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY): Cubic Bezier curve.
-
S = smooth curveto(S X2,Y2,ENDX,ENDY): Smooth cubic Bezier curve.
-
Q = quadratic Belzier curveto(Q X,Y,ENDX,ENDY): Quadratic Bezier curve.
-
T = smooth quadratic Belzier curveto(T ENDX,ENDY): Maps to the endpoint of the previous path.
-
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y): Arc.
-
Z = closepath(): Closes the path.
Additionally, all the aforementioned commands can be in either uppercase or lowercase. Uppercase denotes absolute positioning, referring to the global coordinate system; lowercase denotes relative positioning, referring to the parent container’s coordinate system. Spaces between commands and data can be omitted, and the same command can appear multiple times using just one.
Now we can interpret what the pathData in the previous example means. The data is:
According to our syntax, this means:
-
M 50,2: Move the pen to the coordinate (50,2).
-
L 80.813,2: Draw a straight line from (50,2) to (80.813,2).
-
L 80.813,130: Draw a straight line from (80.813,2) to (80.813,130).
-
L 50,130: Draw a straight line from (80.813,130) to (50,130).
-
L 50,2: Draw a straight line from (50,130) to (50,2).
-
Z: End this stroke.
We can see that the drawing process is quite simple, and the final result forms a closed rectangle—consistent with our intended image.
I won’t introduce more commands here; you can refer to this article: Detailed Explanation of PathData Drawing with Android Vector Tags. However, I believe it’s unnecessary to memorize all these commands, as we rarely write SVG files manually. The two commands we need to master are M and Z, as they signify the start and end of a stroke, allowing us to control M and Z reasonably for quick results in path-related operations.
To add an SVG file, right-click in the desired location, then select new -> Vector Asset:
Clicking on Vector Asset will bring up a new dialog that looks like this:
The image has two white boxes. The top one is a radio button that clearly indicates that selecting the first option is for Material Icons (yes, Android Studio includes all MD icons as SVG files), and the second is for selecting local SVG files. After selecting the first box, you can choose which specific file to use in the box below—this way, we successfully obtain an SVG XML file in Android Studio.
Many may wonder: We just discussed how to import local SVG files into Android Studio, but how do we obtain local SVG files? Ideally, this should be provided by the designers, and we should just use it. However, if we are working on something small without a professional designer, what can we do? You could learn to use software like AI or GIMP to create graphics and export them as SVG, but this has a steep learning curve. Fortunately, there’s a low-cost alternative: Method Draw. This is an online vector graphic editor that allows you to create shapes and easily export them as SVG files, with a low learning cost, and it meets most of our needs.
If we have completed the previous steps, we should now have an SVG XML file. The next step is naturally to use it where we need it. How do we do that?
What I want to say is that you can treat it as an image resource in your project. For example:
The image above shows how to directly reference the SVG XML file in the layout file, where ic_android_black_24dp is the SVG file we created. You can see that it can be used just like a regular image. Of course, we can also use the SVG file in Java code, like this:
At this point, we can use SVG as an image resource in Android. This not only greatly reduces the APK size but also allows our images to be stretched without distortion, and we no longer have to endure the painful renaming and repackaging of images.
Overall, I believe that SVG has the potential to replace traditional bitmap images in most application scenarios, at least in Android. However, many Android developers have indefinitely postponed learning about SVG due to the prevalence of devices running versions prior to Android L. But, in fact, now is the time.
Additionally, this article is more of an educational blog, mainly introducing some information about SVG, including its benefits, how to obtain it in Android Studio, etc. The use of SVG in Android only touches on superficial aspects, and more in-depth topics will be elaborated in future articles, so stay tuned.
Author: lypeer, Source Code:
https://github.com/lypeer/GoogleClock
The author created an SVG animation similar to the clock seen at Google I/O 2016. Interested readers can check out the GitHub source code, feel free to star & fork, and raise issues. If you find this article useful, please share it with your friends, and support the author with a +1 below. For submissions, questions, or concerns, feel free to leave a message below, and the author will get back to you as soon as possible!
About the Java and Android Expert Channel
The Java and Android Expert Channel is a WeChat public account with thousands of followers discussing Java and Android development, sharing and creating the most valuable articles to help you become an expert in this field!
We discuss cutting-edge technologies in Android and Java development: android performance optimization, pluginization, cross-platform, dynamic, reinforcement, and anti-cracking, etc., as well as design patterns/software architecture. The team consists of engineers from BAT.
Follow us for a red packet, reply with “Baidu”, “Alibaba”, or “Tencent” for surprises! After following, you can join our WeChat group, where experts from Baidu, Alibaba, and Tencent are present.
We welcome you to follow us and discuss technology together. Scan or press and hold the QR code below to quickly follow us. Or search for the WeChat public account: JANiubility.
Public Account:JANiubility
