About design and nearby

How to create Android VectorDrawables from Illustrator and use in your app

Posted: April 15th, 2016 | Author: | Filed under: Mobile Design and Development, Tips and Tricks | Tags: , , , , | No Comments »

Vector graphics native support is a dream :) for developers who have to export resources as a rasterized *.png file for each different device resolution which scale without losing definition. The Android SDK now has native support for basic vector graphics – since the release of API 21 (Android 5.0) we have VectorDrawable:

  1. android.graphics.drawable.VectorDrawable

A VectorDrawable is specified through XML with the format of the path data. And we can to reformat the vector images in some SVG files to convert them into a VectorDrawable XML file (the details of the shape are defined inside a XML element).

After you create your vector picture (I use Adobe Illustrator), save it as *.svg file:

How to create Vector Drawables

To convert the file into *.xml, I use online converter tool (there is a similar option in my favorite Android Studio.)

Place the final XML file into the ‘res/drawable’ directory of your app and reference to it in XML or Java code as to ordinary drawables:

How to addVectorDrawables in AndroidStudio

The source of my swd_icon.xml file after converting is

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <vector xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:viewportWidth="500"
  4.     android:viewportHeight="500"
  5.     android:width="500dp"
  6.     android:height="500dp">
  7.     <path
  8.         android:pathData="M394.781 341.242l0 57.039 -53.496 0 0 14.719 71.215 0 0 -71.758z"
  9.         android:fillColor="#263238" />
  10.     <path
  11.         android:pathData="M341.285 106.418l53.496 0 0 55.43 17.719 0 0 -72.848 -71.215 0z"
  12.         android:fillColor="#263238" />
  13.     <path
  14.         android:pathData="M159.715 398.281l-56.797 0 0 -57.039 -14.418 0 0 71.758 71.215 0z"
  15.         android:fillColor="#263238" />
  16.     <path
  17.         android:pathData="M102.918 161.848l0 -55.43 56.797 0 0 -17.418 -71.215 0 0 72.848z"
  18.         android:fillColor="#263238" />
  19.     <path
  20.         android:pathData="M168.57 292.18c8.719 -6.211 17.859 -11.305 26.773 -17.027 5.227 -3.352 10.965 -5.848 16.84 -7.848 4.926 -1.668 11.039 -4.188 16.254 -4.105 4.992 0.059 7.734 -0.422 4.477 -5.543 -3.336 -5.273 -8.699 -10.258 -13.09 -14.703 -4.168 -4.219 -8.73 -8.031 -13.289 -11.832 -4.098 -3.422 -8.832 -5.707 -12.973 -9.027 -2.344 -1.883 -4.938 -3.332 -7.602 -4.945 -8.203 -4.941 -16.805 -8.078 -26.039 -10.563 -8.344 -2.246 -17.004 -3.27 -25.629 -3.496 -5.684 -0.145 -12.527 -0.484 -18.055 0.789 -3.379 0.773 -6.801 1.379 -10.098 2.465 -6.207 2.063 -11.992 6.133 -8.211 13.242 1.813 3.402 5.813 5.477 8.52 8.156 2.836 2.816 5.734 5.266 9.254 7.164 2.938 1.59 5.625 3.684 8.348 5.613 3.402 2.41 2.293 3.668 2.59 7.656 0.184 2.262 0.352 4.449 0.656 6.68 0.656 4.781 2.039 9.234 4.461 13.605 2.547 4.594 7.352 4.992 8.336 10.219 0.797 4.23 0.215 10.25 2.664 13.906 2.727 4.063 8.391 5.18 12.703 4.574 2.234 -0.324 4.324 -0.363 6.586 -0.988 2.985 -0.817 4.138 -2.293 6.524 -3.992z"
  21.         android:fillColor="#d32f2f" />
  22.     <path
  23.         android:pathData="M265.094 210.984c-1.223 5.813 -2.441 11.621 -3.109 17.523 -0.695 6.203 -1.816 13.43 -1.184 19.645 0.613 6.047 3.059 4.734 6.941 1.59 4.051 -3.293 10.406 -5.086 15.324 -6.832 5.836 -2.074 11.887 -3.66 18.07 -4.258 10.547 -1.035 20.879 -2.684 31.582 -3.211 2.918 -0.141 4.734 0.313 7.594 -0.887 2.156 -0.922 3.82 -2.18 5.766 -3.316 3.773 -2.191 7.531 -6.574 7.156 -11.457 -0.344 -4.379 -4.52 -8.75 -6.512 -12.57 -2.461 -4.699 1.066 -8.004 0.223 -13.172 -0.82 -4.945 -2.484 -9.301 -4.922 -13.457 -1.141 -1.934 -2.367 -3.758 -3.625 -5.645 -2.223 -3.324 -3.875 -3.629 -2.695 -7.621 0.938 -3.195 1.75 -6.512 3.078 -9.574 1.59 -3.672 2.344 -7.391 2.832 -11.359 0.469 -3.773 2.32 -7.879 1.641 -11.672 -1.43 -7.93 -8.488 -7.543 -14.637 -5.32 -3.273 1.184 -6.34 2.824 -9.469 4.313 -5.125 2.422 -10.281 6.922 -14.66 10.559 -6.637 5.512 -12.816 11.672 -17.965 18.602 -5.719 7.668 -10.535 15.465 -13.914 24.414 -1.098 2.918 -2.234 5.664 -2.914 8.594 -1.203 5.166 -3.492 9.9 -4.601 15.111z"
  24.         android:fillColor="#d32f2f" />
  25.     <path
  26.         android:pathData="M244.117 290.141c-3.121 -9.012 -4.57 -22.227 -17.004 -19.688 -7.477 1.535 -14.262 5.719 -20.898 9.176 -9.457 4.934 -17.68 12.902 -26.066 19.59 -7.816 6.227 -15.355 12.613 -19.883 21.969 -2.512 5.188 -2.023 9.336 1.316 14.035 1.508 2.133 2.848 4.129 3.023 6.867 0.156 2.566 -1.066 5.027 0 7.57 1.969 4.699 9.363 2.648 9.84 7.219 0.238 2.273 -0.98 4.078 -0.121 6.539 0.578 1.688 2.5 5.004 4.02 6.184 3.75 2.898 10.477 -1.426 11.758 5.148 1.668 8.52 -12.188 17.711 -0.367 23.859 6.281 3.27 5.152 -4.98 5.238 -9.078 0.176 -7.598 -0.449 -24.977 11.758 -19.305 2.27 1.063 4.617 3.633 7.25 4.043 4.047 0.621 6.063 -3.422 9.113 -5.285 2.191 -1.328 4.77 -0.996 7.184 -1.898 2.246 -0.852 6.543 -2.133 7.758 -4.266 1.395 -2.469 -0.465 -4.758 -1.105 -6.938 -1.262 -4.348 -1.859 -10.629 -0.344 -15.047 1.98 -5.852 7.406 -8.965 10.414 -14.063 3.285 -5.566 2.066 -10.391 0.918 -16.188 -1.372 -6.932 -1.442 -13.623 -3.802 -20.443z"
  27.         android:fillColor="#d32f2f" />
  28.     <path
  29.         android:pathData="M365.016 314.281c-3.07 -5.965 4.887 -6.715 6.047 -11.32 0.469 -1.875 -0.082 -5.66 -0.664 -7.348 -0.859 -2.465 -2.934 -3.129 -4.141 -5.059 -2.453 -3.883 4.609 -6.859 3.246 -11.77 -0.727 -2.648 -3.215 -3.82 -4.688 -5.934 -1.559 -2.258 -1.734 -4.664 -1.863 -7.266 -0.289 -5.762 -2.473 -9.324 -7.652 -11.844 -9.348 -4.547 -19.23 -4.898 -29.227 -4.945 -10.723 -0.059 -22.121 -1.227 -32.598 0.75 -7.352 1.391 -15.262 2.305 -22.086 5.73 -11.34 5.707 -4.305 16.969 -1.172 25.98 2.359 6.828 6.461 12.117 9.684 18.41 2.676 5.27 4.691 9.809 10.734 12.152 5.512 2.145 11.695 1.219 16.887 4.586 3.902 2.551 7.344 7.844 9.035 12.039 0.844 2.113 0.809 5.066 3.426 6.133 2.27 0.926 6.441 -0.727 8.738 -1.453 2.457 -0.785 4.27 -2.637 6.809 -2.945 3.551 -0.43 7.641 1.5 10.43 -1.496 1.816 -1.957 2.07 -5.434 3.199 -7.664 6.082 -12.012 16.34 2.027 21.176 7.887 2.613 3.164 6.828 10.336 9.738 3.879 5.473 -12.138 -11.086 -10.783 -15.058 -18.502z"
  30.         android:fillColor="#d32f2f" />
  31.     <path
  32.         android:pathData="M268.219 301.688c0.352 -8.84 -6.316 -17.383 -10.773 -24.906l-2.914 -6.715c-3.492 -10.594 -4.094 -21.543 -6.016 -32.039 -0.797 -4.117 -2.371 -8.09 -4.633 -11.621 -2.078 -3.242 -6.844 -6.172 -6.52 -10.273 0.289 -3.496 1.57 -4.168 -0.41 -7.695 -1.039 -1.875 -3.785 -4.328 -3.93 -6.543 -0.719 -10.625 2.703 -20.707 4.633 -32.25 1.531 -6.668 3.051 -15.402 8.402 -20.254 4.496 -4.094 10.055 -0.34 12.281 4.5 1.793 3.891 2.168 9.512 0.254 13.438 -0.582 1.188 -4.414 1.531 -4.445 -1.414 -0.031 -2.371 1.016 -5.891 0.207 -8.133 -1.379 -3.836 -5.188 -2.996 -6.387 0.406 -1.484 4.203 1.727 10.172 4.172 13.352 2.988 2.922 8.285 1.078 10.32 -1.598 3.73 -9.199 0.332 -21.863 -9.18 -26.469 -4.754 -2.305 -11.508 1.023 -13.805 5.777 -6 16.898 -9.051 33.77 -8.934 51.199l0.043 0.168c-0.352 -0.059 -0.781 -0.031 -1.242 0.082 -1.016 0.176 -2.23 0.621 -3.188 1.121 -0.184 0.086 -0.34 0.188 -0.492 0.289 -0.137 0.078 -0.305 0.172 -0.422 0.25l-0.023 -0.07c-10.695 -13.758 -23.539 -25.109 -38.707 -34.68 -4.754 -2.305 -12.109 -0.738 -14.426 4.012 -4.609 9.504 0.559 21.555 9.18 26.473 3.262 0.844 8.551 -0.992 9.09 -5.133 -0.043 -4.016 -1.219 -10.688 -4.973 -13.066 -3.063 -1.938 -6.57 -0.242 -5.277 3.629 0.754 2.254 3.758 4.379 5.195 6.254 1.789 2.336 -1.426 4.445 -2.621 3.867 -3.93 -1.902 -7.109 -6.555 -8.113 -10.715 -1.242 -5.172 0.801 -11.563 6.863 -11.137 7.199 0.508 13.813 6.418 19.141 10.711 8.66 7.871 17.582 13.668 23.594 22.453 1.25 1.844 0.617 5.465 0.949 7.578 0.645 3.996 2.07 3.73 4.453 6.301 2.801 3.016 0.859 8.27 1.242 12.102 0.41 4.172 1.637 8.266 3.551 11.988 5 9.457 11.328 18.445 15.125 28.965l1.848 6.965c1.168 8.672 1.195 19.547 6.973 26.293l0.078 0.297c0.547 1.172 4.234 4.113 6.426 4.184 0.199 0.012 0.402 0.023 0.59 -0.051 0.195 -0.055 0.336 -0.195 0.484 -0.324 1.691 -1.406 2.758 -6 2.461 -7.27l-0.124 -0.298zm-42.817 -99.383c-0.043 0.035 -0.094 0.063 -0.137 0.098l-0.023 -0.043 0.16 -0.055z"
  33.         android:fillColor="#d32f2f" />
  34. </vector>

We can use this like any drawable now:

VectorDrawableresources: AndroidStudio source

We can reduce our *.apk size if we use VectorDrawables where appropriate and it’s much easier to maintain the app – no need to add new assets when we have to support additional screen densities.

The source code for the post above is available here.

Share Button

Check Related Posts:


Leave a Reply


  • 9 × six =

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now