Tutorial by Examples

A VectorDrawable should consist of at least one <path> tag defining a shape <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24.0" android:viewpor...

A <clip-path> defines a shape which acts as a window, only allowing parts of a <path> to show if they are within the <clip-path> shape and cutting off the rest. <vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.an...

A <group> tag allows the scaling, rotation, and position of one or more elements of a VectorDrawable to be adjusted: <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24...

An AnimatedVectorDrawable requires at least 3 components: A VectorDrawable which will be manipulated An objectAnimator which defines what property to change and how The AnimatedVectorDrawable itself which connects the objectAnimator to the VectorDrawable to create the animation The following...

Using SVG stroke makes it easier to create a Vector drawable with unified stroke length, as per Material Design guidelines: Consistent stroke weights are key to unifying the overall system icon family. Maintain a 2dp width for all stroke instances, including curves, angles, and both interior and ...

A few pre-requisites in the build.gradle for vectors to work all the way down to API 7 for VectorDrawables and API 13 for AnimatedVectorDrawables (with some caveats currently): //Build Tools has to be 24+ buildToolsVersion '24.0.0' defaultConfig { vectorDrawables.useSupportLibrary = true ...