The following is the first few sections of a chapter from The Busy Coder's Guide to Android Development, plus headings for the remaining major sections, to give you an idea about the content of the chapter.

Vector Drawables

Android 5.0 added native support for a VectorDrawable, which uses the SVG path specification to represent vector art. However, unless your minSdkVersion was 21 or higher, vector drawable resources were not that useful, as there was no good way to support the same artwork on older devices. You could somehow arrange to have PNGs for the same artwork, but then, why bother with the vector artwork in the first place?

Nowadays, vector drawable resources are more practical. Not only do more devices run Android 5.0+, but we have better tool support. Android Studio offers a Vector Asset wizard that helps you add vector drawable resources to your project, and the build system can automatically generate PNG files at various densities to be used on older devices.

As a result, vector drawables have been gaining in popularity, particularly for action bar icons.

Getting the Artwork

You have two major sources of vector drawable artwork: XML files already in the vector drawable XML format, or SVG files that you wish to convert to vector drawable XML format. Since writing the vector drawable XML by hand will be difficult at best, most vector drawable XML will start from an SVG file. Whether you do the conversion, or whether somebody else did the conversion for you, is the major difference.

For SVG that you wish to try to convert to vector drawable XML, the simpler the SVG is, the more likely it is that you will have success. In particular, SVG features like gradients, patterns, and text are not supported. The apparent vision is for vector drawable artwork to be used mostly for things like action bar icons, where things like gradients and patterns are not necessary.

Android Studio Vector Asset Wizard

The primary way most developers will get vector drawable XML into their projects is via the Android Studio Vector Asset wizard. You can bring this up by right-clicking over the res/ directory of your desired source set, and choosing New > Vector Asset from the context menu:

Android Studio Vector Asset Wizard
Figure 216: Android Studio Vector Asset Wizard

The “Asset Type” radio group gives you two sources of imagery: a subset of the official Material Design icons, or your own SVG or PSD file.

By default, the Material Icon radio button is selected. You can choose which icon to display by tapping the “Icon” button, which by default shows a rendition of the Android mascot. Tapping that button brings up a grid of icons for you to choose from:

Android Studio Vector Asset Wizard, Material Icon Selector
Figure 217: Android Studio Vector Asset Wizard, Material Icon Selector

You can browse by category or search by name to try to find the icon that you want from the library of available icons.

If you switch to the “Local file” radio button, the “Icon” button is replaced by a “Path” field, where you can pick the file that you wish to use.

By default, the Vector Asset wizard is trying to make action bar icon-sized images, 24dp square. You can override this by checking the “Override” checkbox and specifying your own size. The opacity slider allows you to indicate whether non-transparent pixels should be translucent (value from 0-99) or solid (100). If the image contains text or otherwise needs to be inverted for RTL languages, there is a checkbox to enable auto-mirroring support for that.

Also note that you can define the resource name, below where you chose the icon or SVG/PSD file. When importing a file, by default, the resource name will be the same as the base name of the file.

Clicking the “Next” button brings up a confirmation screen, where you can also change the module and source set if you perhaps brought up the wizard in the wrong spot:

Android Studio Vector Asset Wizard, Confirmation Screen
Figure 218: Android Studio Vector Asset Wizard, Confirmation Screen

Clicking Finish will import the resource and add it to res/drawable/ in your project. When you build your project, if your minSdkVersion is below 21, the Android Gradle Plugin will generate PNG files to be used for those older devices. Note that these generated PNG files show up in your build/ tree, not as part of your project source code.

The preview shown in the wizard should give you an indication if your SVG is being imported properly:

Android Studio Vector Asset Wizard, Showing Failed SVG Import
Figure 219: Android Studio Vector Asset Wizard, Showing Failed SVG Import

However, even if the preview turned out OK, be sure to test your app, both on Android 5.0+ and (if relevant) Android 4.4-and-older devices, to ensure that your artwork looks the way you want it to.

Other Tools

Juraj Novák maintains a separate Android SVG to vector drawable XML converter as a Web page. If you are running into problems with the Vector Asset wizard’s import support, you might consider trying this site. It may give you better vector drawables directly, and it definitely gives you more indications about why your SVG may not convert properly.

Using the Artwork

You use vector drawable resources the same way that you use any other drawable resource. Under the covers, the Java class that handles rendering the artwork is VectorDrawable… on Android 5.0+.

If your minSdkVersion is below 21, and you want to use generated PNG files for the older devices, you need to add a line to the defaultConfig closure in your android closure in your module’s build.gradle file:

apply plugin: ''

android {
    compileSdkVersion 24
    buildToolsVersion "24.0.1"

    defaultConfig {
        minSdkVersion 15
        targetSdkVersion 24
        vectorDrawables.generatedDensities = ['hdpi','xxhdpi']

Specifically, you need to set the generatedDensities property on the vectorDrawables object to an array of strings, identifying the densities for which you want PNGs generated. As with other drawable resources, devices operating on other densities than those in your chosen list will re-sample icons from one of your provided densities. If you have few vector drawables, you could list more densities and not consume much APK space. The sample shown above settles for two: hdpi for mid-range devices and xxhdpi for high-end devices.

If your minSdkVersion is 21 or higher, though, you do not need the generated PNG files, as all devices that will run your app will be capable of using the vector drawables natively.


The preview of this section is en route to Mars.