Published on | Prototyping: From UX to Front End — Medium Grayhats Courtesy of pexels Images.

Designing to Coding.

Design is not just what it looks like and feels like. Design is how it works.

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.

This results in more space taken up by the applications apk file. Which is a setback to reach your potential customers, as the app size on the play store 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.

Courtesy of Giphy Images.

Scale without loosing quality.

Android uses the VectorDrawable class to create vector images. VectorDrawable can be defined in an XML file with the <vector> element.

Now let’s create a VectorDrawable from our illustrator image .

You can create any illustration of any size from illustrator. I have used the following image as it has different color with various shapes.

After you are done creating your illustration you have to highlight you illustration and Expand the object.

Choose Object > Expand.

If the object has appearance attributes applied to it, the Object > Expand command is dimmed. In this case, choose Object > Expand Appearance and then choose Object > Expand.

Now that you have expanded the required object of your illustration. We can export a SVG ( Scalable Vector Graphics ) directly from illustrator.

Choose Object > File > Export >Export As… >Select .SVG from the drop down > save anywhere on your system. ( or Follow this link ).

Now that you have the SVG file saved, we can convert the SVG to a VectorDrawable by droping the file in svg2android. This creates a VectorDrawable that can be used in Android Studio.

Now open your android studio project and create a New Drawable Resource File.

Right click drawable > New > Drawable Resource File >Select vector from the Root element field > name you file in the File name field > copy the above xml code created using the svg2android in this file.

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.

Courtesy of Giphy Images.

Bonus : We can do a lot with VectorDrawable. Click to explore 🙂

Make sure to click ❤ and share this article. Just follow Gray Hats for some more exciting content.

From Illustrator to Android XML. was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

From Illustrator to Android XML.

Cool stuff, every week

More Articles