Skip to content

Most visited

Recently visited

Results for

navigation

Vector Drawable

A VectorDrawable is a vector graphic defined in an XML file as a set of points, lines, and curves along with its associated color information. The major advantage of using a vector drawable is image scalability. It can be scaled without loss of display quality, which means the same file is resized for different screen densities without loss of image quality. This results in smaller APK files and less developer maintenance. You can also use vector images for animation by using multiple XML files instead of multiple images for each display resolution.

Let's go through an example to understand the benefits. An image of size 100 x 100 dp may render good quality on a smaller display resolution. On larger devices, the app might want to use a 400 x 400 dp version of the image. Normally, developers create multiple versions of an asset to cater to different screen densities. This approach consumes more development efforts, and results in a larger APK, which takes more space on the device.

As of Android 5.0 (API level 21), there are two classes that support vector graphics as a drawable resource: VectorDrawable and AnimatedVectorDrawable. For more information about using the VectorDrawable and the AnimatedVectorDrawable classes, read the About VectorDrawable class and About AnimatedVectorDrawable class sections.

Support Library 23.2 or higher provides full support to Vector Drawables and Animated Vector Drawables on devices running Android 5.0 (API level 21) or lower. For more information about using the support library, go to the Vector Drawables Backward Compatibility Solution section.

About VectorDrawable class

VectorDrawable defines a static drawable object. Similar to the SVG format, each vector graphic is defined as a tree hierachy, which is made up of path and group objects. Each path contains the geometry of the object's outline and group contains details for transformation. All paths are drawn in the same order as they appear in the XML file.

Figure 1. Sample hierarchy of a vector drawable asset

The Vector Asset Studio tool offers a simple way to add a vector graphic to the project as an XML file.

Example XML

Here is a sample VectorDrawable XML file that renders an image of a battery in the charging mode. 

<!-- res/drawable/battery_charging.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    <!-- intrinsic size of the drawable -->
    android:height="24dp"
    android:width="24dp"
    <!-- size of the virtual canvas -->
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
   <group
         android:name="rotationGroup"
         android:pivotX="10.0"
         android:pivotY="10.0"
         android:rotation="15.0" >
      <path
        android:name="vect"
        android:fillColor="#FF000000"
        android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z"
        android:fillAlpha=".3"/>
      <path
        android:name="draw"
        android:fillColor="#FF000000"
        android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/>
   </group>
</vector>

This XML renders the following image:

About AnimatedVectorDrawable class

AnimatedVectorDrawable adds animation to the properties of a vector graphic. You can define an animated vector graphic as three separate resource files or as a single XML file defining the entire drawable. Let's look at both the approaches for better understanding: Multiple XML files and Single XML file.

Multiple XML files

By using this approach, you can define three separate XML files:

Example of multiple XML files

The following XML files demonstrate the animation of a vector graphic.

Single XML file

By using this approach, you can merge the related XML files into a single XML file through the XML Bundle Format. At the time of building the app, the aapt tag creates separate resources and references them in the animated vector. This approach requires Build Tools 24 or higher, and the output is backward compatible.

Example of a single XML file 
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="root"
                android:strokeWidth="2"
                android:strokeLineCap="square"
                android:strokeColor="?android:colorControlNormal"
                android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" />
        </vector>
    </aapt:attr>
    <target android:name="root">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7"
                android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4"
                android:duration="300"
                android:interpolator="@android:interpolator/fast_out_slow_in"
                android:valueType="pathType" />
        </aapt:attr>
    </target>
</animated-vector>

Vector Drawables Backward Compatibility Solution

To support vector drawable and animated vector drawable on devices running platform versions lower than Android 5.0 (API level 21), VectorDrawableCompat and AnimatedVectorDrawableCompat are available through two new support libraries: support-vector-drawable and animated-vector-drawable, respectively.

Android Studio 1.4 introduced limited compatibility support for vector drawables by generating PNG files at build time. However, the vector drawable and animated vector drawable support Libraries offer both flexibility and broad compatibility — it's a support library, so you can use it with all Android platform versions back to Android 2.1 (API level 7+). To configure your app to use vector support libraries, add the vectorDrawables element to your build.gradle file in the app module.

Use the following code snippet to configure the vectorDrawables element: 

//For Gradle Plugin 2.0+
 android {
   defaultConfig {
     vectorDrawables.useSupportLibrary = true
    }
 }

//For Gradle Plugin 1.5 or below
android {
  defaultConfig {
    // Stops the Gradle plugin’s automatic rasterization of vectors
    generatedDensities = []
  }
  // Flag notifies aapt to keep the attribute IDs around
  aaptOptions {
    additionalParameters "--no-version-vectors"
  }
}

You can use VectorDrawableCompat back to API level 7 and AnimatedVectorDrawableCompat on all devices running Android 5.0 (API level 11) and higher. The way Android loads drawables, not every place that accepts a drawable ID, such as in an XML file, supports loading vector drawables. The android.support.v7.appcompat package has added a number of features to make it easy to use vector drawables. Firstly, when you use android.support.v7.appcompat package with ImageView or with subclasses such as ImageButton and FloatingActionButton, you can use the new app:srcCompat attribute to reference vector drawables as well as any other drawable available to android:src: 

<ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_add" />

To change drawables at runtime, you can use the setImageResource() method as before. Using AppCompat and app:srcCompat is the most foolproof method of integrating vector drawables into your app.

Support Library 25.4.0 and higher supports the following features:

Support Library 26.0.0-beta1 and higher supports the following features:

Example of multiple XML files using the support library

The following XML files demonstrate the approach of using multiple XML files to animate a vector graphic.

Single XML file

The following XML file demonstrates the approach of using a single XML file to animate a vector graphic. At the time of building the app, the aapt tag creates separate resources and references them in the animated vector. This approach requires Build Tools 24 or higher, and the output is backward compatible.

Example of a single XML file using the support library 
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="64dp"
            android:height="64dp"
            android:viewportWidth="600"
            android:viewportHeight="600">
            <group
                android:name="rotationGroup"
                android:pivotX="300"
                android:pivotY="300"
                android:roation="45.0" >
                <path
                    android:name="vectorPath"
                    android:fillColor="#000000"
                    android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
            </group>
        </vector>
    </aapt:attr>
    <target android:name="rotationGroup">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="rotation"
                android:valueFrom="0"
                android:valueTo="360"
                android:duration="6000"
                android:interpolator="@android:interpolator/fast_out_slow_in" />
        </aapt:attr>
    </target>
</animated-vector>
This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a one-minute survey?
Help us improve Android tools and documentation.
Sure No thanks