Published on <a href="https://blog.prototypr.io/from-illustrator-to-android-xml-47e25b713e6b?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Grayhats <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tnhCnwzTmsxx38dBx_3u4Q.jpeg">Courtesy of pexels Images.
<h3>Designing to Coding.</h3>
<blockquote>Design is not just what it looks like and feels like. Design is how it works.</blockquote>
As a developer, we always struggle to keep the Android app size to the minimum. But, we have to support the graphics of the app across all the mobile devices. This adds to the number of various dpi (dots per inch) images required across all devices. As you can see in the snippet below.
<img alt="" src="https://cdn-images-1.medium.com/max/276/1*d-zOouInbzb0jiK4QtwFRA.png">
This results in more space taken up by the applications <a href="https://en.wikipedia.org/wiki/Android_application_package">apk</a> file. Which is a setback to reach your potential customers, as the app size on the <a href="https://play.google.com/store?hl=en">play store</a> is usually more than 30 Mb.
With Android Lollipop (API v21), google supported vector image assets. This allows for images to be represented geometrically as a set of points, lines, and curves, as well as their associated color information. This solves the problem as you only need to create your image once in an XML file and take advantage of its scalability across all display densities for different devices.
<img alt="" src="https://cdn-images-1.medium.com/max/337/1*0NNEKC2pDeXwqgHoLamt-g.gif">Courtesy of Giphy Images.
<h3>Scale without loosing quality.</h3>
Android uses the <a href="https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html">VectorDrawable</a> class to create vector images. VectorDrawable can be defined in an XML file with the &lt;vector&gt; element.
<h4>Now let’s create a VectorDrawable from our illustrator image .</h4>
You can create any illustration of any size from illustrator. I have used the following image as it has different color with various shapes.
<img alt="" src="https://cdn-images-1.medium.com/max/743/1*BpCgbz_ZMOb-EuoNkUUItw.png">
After you are done creating your illustration you have to highlight you illustration and <a href="https://helpx.adobe.com/illustrator/using/grouping-expanding-objects.html">Expand</a> the object.
Choose Object &gt; Expand.
If the object has appearance attributes applied to it, the Object &gt; Expand command is dimmed. In this case, choose Object &gt; Expand Appearance and then choose Object &gt; Expand.
Now that you have expanded the required object of your illustration. We can export a <a href="https://en.wikipedia.org/wiki/Scalable_Vector_Graphics">SVG</a> ( Scalable Vector Graphics ) directly from illustrator.
Choose Object &gt; File &gt; Export &gt;Export As… &gt;Select .SVG from the drop down &gt; save anywhere on your system. ( <a href="https://helpx.adobe.com/illustrator/how-to/export-svg.html">or Follow this link</a> ).
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*oWRkhKMARz-HCf70rSGtMQ.png">
Now that you have the SVG file saved, we can convert the SVG to a VectorDrawable by droping the file in <a href="http://inloop.github.io/svg2android/">svg2android</a>. This creates a VectorDrawable that can be used in Android Studio.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*on_1tqUVJ17lh1G-ydC-jw.png">
Now open your android studio project and create a New Drawable Resource File.
Right click drawable &gt; New &gt; Drawable Resource File &gt;Select vector from the Root element field &gt; name you file in the File name field &gt; copy the above xml code created using the <a href="http://inloop.github.io/svg2android/">svg2android</a> in this file.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BsnDVkB254kkCw8FufFUGA.png">
As you can see above i have named my file as a.xml. We can alter the size of the file by editing the
android:width=”838.05dp” android:height=”512dp”
depending on the devices you are targeting.
Now you can use this xml file in any drawable that you use. Like i have done below.
<img alt="" src="https://cdn-images-1.medium.com/max/787/1*ZTL6N14VW0Mnn75c4GLPrQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/504/1*5hVDI1CgvGxiC-eyFrKlkA.gif">Courtesy of Giphy Images.
<blockquote>Bonus : We can do a lot with VectorDrawable. <a href="https://github.com/harjot-oberai/VectorMaster">Click to explore</a> 🙂</blockquote>
<h4>Make sure to click ❤ and share this article. Just follow <a href="https://medium.com/@Gray_Hats_">Gray Hats</a> for some more exciting content.</h4>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=47e25b713e6b" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/from-illustrator-to-android-xml-47e25b713e6b">From Illustrator to Android XML.</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

From Illustrator to Android XML.

Designing to Coding.

Top Stories