استفاده از کلاس VectorDrawable در اندروید

1. ساخت یک Vector Drawable

<?xml version="1.0" encoding="utf-8"?>
 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path id="cpu" d="
    M341.087,157.478c7.417,0,13.435,6.018,13.435,13.435v170.174 c0,7.417-6.018,13.435-13.435,13.435H170.913 c-7.417,0-13.435-6.018-13.435-13.435V170.913 c0-7.417,6.018-13.435,13.435-13.435H341.087z
    M390.348,157.478 c0-19.785-16.041-35.826-35.826-35.826H157.479c-19.785,0-35.826,16.041-35.826,35.826v197.043 c0,19.785,16.041,35.826,35.826,35.826h197.043c19.785 0,35.826-16.041,35.826-35.826V157.478z
 
    M193.304,408.261V462h-17.913 v-53.739H193.304z
    M264.957,408.261V462h-17.914v-53.739H264.957z
    M300.783,408.261V462h-17.914v-53.739H300.783z
    M229.13,408.261 V462h-17.913v-53.739H229.13z
    M336.609,408.261V462h-17.914v-53.739H336.609z
 
    M193.304,50v53.739h-17.913V50H193.304z
    M264.957,50 v53.739h-17.914V50H264.957z
    M300.783,50v53.739h-17.914V50H300.783z
    M229.13,50v53.739h-17.913V50H229.13z
    M336.609,50v53.739 h-17.914V50H336.609z
 
    M408.261,318.695H462v17.914h-53.739V318.695z
    M408.261,247.043H462v17.914h-53.739V247.043z
    M408.261,211.217 H462v17.913h-53.739V211.217z
    M408.261,282.869H462v17.914h-53.739V282.869z
    M408.261,175.391H462v17.913h-53.739V175.391z
 
    M50,318.695h53.739v17.914H50V318.695z
    M50,247.043h53.739v17.914H50V247.043z
    M50,211.217h53.739v17.913H50V211.217z
    M50,282.869 h53.739v17.914H50V282.869z
    M50,175.391h53.739v17.913H50V175.391z" />
</svg>

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600" >
     
</vector>

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600" >
 
        <path
            android:name="cpu"
            android:fillColor="#000000"
            android:pathData="
                M341.087,157.478 c7.417,0,13.435,6.018,13.435,13.435 v170.174c0,7.417-6.018,13.435-13.435,13.435 H170.913 c-7.417,0-13.435-6.018-13.435-13.435V170.913c0-7.417,6.018-13.435,13.435-13.435H341.087z
                M390.348,157.478 c0-19.785-16.041-35.826-35.826-35.826H157.479c-19.785,0-35.826,16.041-35.826,35.826v197.043 c0,19.785,16.041,35.826,35.826,35.826h197.043c19.785,0,35.826-16.041,35.826-35.826V157.478z"
        />
 
        <path
            android:name="wires_bottom"
            android:fillColor="#000000"
            android:pathData="
                M193.304,408.261V462h-17.913 v-53.739H193.304z
                M264.957,408.261V462h-17.914v-53.739H264.957z
                M300.783,408.261V462h-17.914v-53.739H300.783z
                M229.13,408.261 V462h-17.913v-53.739H229.13z
                M336.609,408.261V462h-17.914v-53.739H336.609z"
        />
 
        <path
            android:name="wires_top"
            android:fillColor="#000000"
            android:pathData="
                M193.304,50v53.739h-17.913V50H193.304z
                M264.957,50 v53.739h-17.914V50H264.957z
                M300.783,50v53.739h-17.914V50H300.783z
                M229.13,50v53.739h-17.913V50H229.13z
                M336.609,50v53.739 h-17.914V50H336.609z"
        />
 
        <path
            android:name="wires_right"
            android:fillColor="#000000"
            android:pathData="
                M408.261,318.695H462v17.914h-53.739V318.695z
                M408.261,247.043H462v17.914h-53.739V247.043z
                M408.261,211.217 H462v17.913h-53.739V211.217z
                M408.261,282.869H462v17.914h-53.739V282.869z
                M408.261,175.391H462v17.913h-53.739V175.391z"
        />
         
        <path
            android:name="wires_left"
            android:fillColor="#000000"
            android:pathData="
                M50,318.695h53.739v17.914H50V318.695z
                M50,247.043h53.739v17.914H50V247.043z
                M50,211.217h53.739v17.913H50V211.217z
                M50,282.869 h53.739v17.914H50V282.869z
                M50,175.391h53.739v17.913H50V175.391z"
        />
 
</vector>

2. دادن انیمیشن به Vector Drawable

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600" >
 
    <group
        android:name="cpu_box">
        <path
            android:name="cpu"
            android:fillColor="#000000"
            android:pathData="
            M341.087,157.478 c7.417,0,13.435,6.018,13.435,13.435 v170.174c0,7.417-6.018,13.435-13.435,13.435 H170.913 c-7.417,0-13.435-6.018-13.435-13.435V170.913c0-7.417,6.018-13.435,13.435-13.435H341.087z
            M390.348,157.478 c0-19.785-16.041-35.826-35.826-35.826H157.479c-19.785,0-35.826,16.041-35.826,35.826v197.043 c0,19.785,16.041,35.826,35.826,35.826h197.043c19.785,0,35.826-16.041,35.826-35.826V157.478z "/>
    </group>
    <group
        android:name="bottom">
        <path
            android:name="wires_bottom"
            android:fillColor="#000000"
            android:pathData="
        M193.304,408.261V462h-17.913 v-53.739H193.304z
        M264.957,408.261V462h-17.914v-53.739H264.957z
        M300.783,408.261V462h-17.914v-53.739H300.783z
        M229.13,408.261 V462h-17.913v-53.739H229.13z
        M336.609,408.261V462h-17.914v-53.739H336.609z" />
    </group>
    <group android:name="top">
        <path
            android:name="wires_top"
            android:fillColor="#000000"
            android:pathData="
        M193.304,50v53.739h-17.913V50H193.304z
        M264.957,50 v53.739h-17.914V50H264.957z
        M300.783,50v53.739h-17.914V50H300.783z
        M229.13,50v53.739h-17.913V50H229.13z
        M336.609,50v53.739 h-17.914V50H336.609z " />
    </group>
    <group android:name="right">
        <path
            android:name="wires_right"
            android:fillColor="#000000"
            android:pathData="
        M408.261,318.695H462v17.914h-53.739V318.695z
        M408.261,247.043H462v17.914h-53.739V247.043z
        M408.261,211.217 H462v17.913h-53.739V211.217z
        M408.261,282.869H462v17.914h-53.739V282.869z
        M408.261,175.391H462v17.913h-53.739V175.391z" />
    </group>
    <group android:name="left">
        <path
            android:name="wires_left"
            android:fillColor="#000000"
            android:pathData="
        M50,318.695h53.739v17.914H50V318.695z
        M50,247.043h53.739v17.914H50V247.043z
        M50,211.217h53.739v17.913H50V211.217z
        M50,282.869 h53.739v17.914H50V282.869z
        M50,175.391h53.739v17.913H50V175.391z" />
    </group>
 
</vector>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:propertyName="translateY"
        android:valueType="floatType"
        android:valueFrom="0"
        android:valueTo="-10"
        android:repeatMode="reverse"
        android:repeatCount="infinite"
        android:duration="250" />
</set>

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_drawable_cpu">
 
    <target
        android:animation="@animator/pulse_top"
        android:name="top" />
 
    <target
        android:animation="@animator/pulse_right"
        android:name="right" />
 
    <target
        android:animation="@animator/pulse_left"
        android:name="left" />
 
    <target
        android:animation="@animator/pulse_bottom"
        android:name="bottom" />
</animated-vector>

<ImageView
    android:id="@+id/cpu"
    android:layout_width="64dp"
    android:layout_height="64dp"
    android:src="@drawable/animated_cpu" />

ImageView mCpuImageView = (ImageView) findViewById( R.id.cpu );
Drawable drawable = mCpuImageView.getDrawable();
if (drawable instanceof Animatable) {
    ((Animatable) drawable).start();
}

3. تغییر شکل دادن Vector Drawables

<string name="left_arrow">M300,70 l 0,70 -70,-70 0,0 70,-70z</string>
<string name="right_arrow">M300,70 l 0,-70 70,70 0,0 -70,70z</string>

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600" >
 
    <path
        android:name="left_arrow"
        android:fillColor="#000000"
        android:pathData="@string/left_arrow"/>
</vector>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
 
    <objectAnimator
        android:duration="1000"
        android:propertyName="pathData"
        android:valueFrom="@string/left_arrow"
        android:valueTo="@string/right_arrow"
        android:valueType="pathType"
        android:repeatMode="reverse"
        android:repeatCount="-1"/>
 
</set>

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_drawable_left_arrow">
 
    <target
        android:name="left_arrow"
        android:animation="@animator/animator_left_right_arrows" />
</animated-vector>

<ImageView
    android:id="@+id/left_right_arrow"
    android:layout_width="64dp"
    android:layout_height="64dp"
    android:layout_below="@+id/cpu"
    android:src="@drawable/animated_arrow" />

mArrowImageView = (ImageView) findViewById( R.id.left_right_arrow );
drawable = mArrowImageView.getDrawable();
if (drawable instanceof Animatable) {
    ((Animatable) drawable).start();
}

نتیجه گیری