Convert the SVG and PSD image file into png or VectorDrawables for android studio

As an Android developer, we are faced with so many technical stuff while building an awesome application in terms of less APK size.  So all the technical stuck is actually part of developer life.  In this tutorial, I am trying to explain about the vector drawable which is the frequently used in android application development.

In Android, a vector file is an XML file in the format of binary which works well in all android screen size device.  We need to store the vector file inside the drawable folder to reflect in the user interface. But the problem comes here when your client has provided the SVG  or PSD file format for image and icon for your android application.

Generally, an android studio is not supported the SVG and PSD file to keep in your drawable folder to load an icon or image. In that case, we need to convert the SVG and PSD file into either PNG file or Vector Drawables file. But the question is how to convert into vector Drawable file?

Convert into Vector Drawables:

We can convert the SVG and PSD file in many ways. Either you can use the online website to convert. But we need to make much better way then I would be recommended two different methods to convert into vector drawable file.

  1. Android Studio Vector Asset.
  2. Using by a command in Android Framework

Ok, Let’s explore by the first method to convert the SVG or PSD file into vector Drawable file.

Android Studio Vector Asset.

Android Studio has an option to convert the SVG file into vector formate. You need to right click on the drawable folder of your android studio project and click the new option and then select the Vector Asset. For your reference, I am giving the snapshot below.


Please select the SVG file from the directory path and convert.

But the problem here is that what will happen if you have a big number of icons and images, then it is very difficult to convert all the icons one by one is not realistic. So, in this case, we need to find the way that all images can convert in a single command.

That’s great. Now let’s see the use the second option by convert by using the command. It is a little bit difficult but good to explore the code which is provided by the Android framework.

Using by a command in Android Framework:

Before we explore the android framework base code, we can use the exiting tools to use for conversion. And I am really thankful to Nick Butcher. He has provided and shared SVG to vector drawable tool into zip format into Google Drive. What you need to just download the file and unzip it and run the below command.

The following command will convert all SVGs in a directory called svgs/, convert them all into VectorDrawables, and write them to a directory called vectors/. Note that both directories must exist beforehand.

That’s was great. Now question that how to get the tools from the Android repository and build it? So I would say do not worry we will sync the android repository to use the framework tool to run and execute the code.

To download the Android open source code you need to first install the repo and git version control in your system. Once you have done the steps now you can use below git command to initialize the repo and sync.

Repo command:

It will download the master branch code of android source. Now if you have any latest branch of the android studio then you can download that branch also by using the -b option with the branch name.

You can check what is the current and lasted brach is available to download the google source code. So from the above command, you had initialized the repository and now you can sync the code.
It will take a longer time because by default max four thread is running to download the source code. You need to add a few more threads to download source fast. So here I am running the 8 threads to download.
After a few minutes, it will download completely. Now you need to go to the tools directory and run the Gradle command to build the project.
Once it completes, you should find the binaries in a <root>/out/build/base/vector-drawable-tool/build/distributions/vd-tool.zip file. Unzip it and it will extract a /bin directory that contains binaries compatible with Mac OS X, Linux, and Windows.
I hope it works and uses the tool for converting the image into vector drawable formate. For more detail please check this original author post as a reference.

Summary:

Now we have a good understanding about to convert the SVG and PSD file into png or vector drawable file formate by using the android studio or by using tools provided by the Android framework.

If you are wondering to learn Android then Please Learn from Android category and wondering to lean Kotlin then Kotlin Category will help you. If you want to learn all the python article, then learn from the python category.

Please do subscribe your email to get the newsletter on this blog on below and if you like this post then do not forget to share like and comment on the below section.

Happy Coding

Sunil Gupta

I am a very enthusiastic Android developer to build solid Android apps. I have a keen interest in developing for Android and have published apps to the Google Play Store. I always open to learning new technologies. For any help drop us a line anytime at contact@mobologicplus.com

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.