Animate Vector Drawables (AnimatedVectorDrawable) example

Vector Drawables are scalable without losing definition. The AnimatedVectorDrawable class lets you animate the properties of a vector drawable. (ref: http://developer.android.com/training/material/animations.html#AnimVector)

drawable/vectordrawable.xml

<!-- res/drawable/vectordrawable.xml -->
<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="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

drawable/animvectordrawable.xml

<!-- res/drawable/animvectordrawable.xml -->
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@anim/rotation" />
    <target
        android:name="v"
        android:animation="@anim/path_morph" />
</animated-vector>

anim/rotation.xml

<!-- res/anim/rotation.xml -->
<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

anim/path_morph.xml

<!-- res/anim/path_morph.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>

Edit layout file, layout/activity_main.xml, to include ImageViews with android:src="@drawable/animvectordrawable".

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imageview1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/animvectordrawable"
            android:background="#D0D0D0"/>
        <ImageView
            android:id="@+id/imageview2"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:src="@drawable/animvectordrawable"
            android:background="#B0B0B0"/>
        <ImageView
            android:id="@+id/imageview3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/animvectordrawable"
            android:background="#909090"/>
    </LinearLayout>

</LinearLayout>

Edit MainActivity.java to start animation once clicked.

package com.blogspot.android_er.androidanimatedvectordrawable;

import android.app.Activity;
import android.graphics.drawable.Animatable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView imageView1 = (ImageView)findViewById(R.id.imageview1);
        imageView1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Drawable drawable = ((ImageView) v).getDrawable();
                ((Animatable) drawable).start();
            }
        });

        ImageView imageView2 = (ImageView)findViewById(R.id.imageview2);
        imageView2.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                Drawable drawable = ((ImageView)v).getDrawable();
                ((Animatable) drawable).start();
            }
        });

        ImageView imageView3 = (ImageView)findViewById(R.id.imageview3);
        imageView3.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                Drawable drawable = ((ImageView)v).getDrawable();
                ((Animatable) drawable).start();
            }
        });
    }

}

Related:
- Vector Drawable example

Vector Drawable example

In Android 5.0 (API Level 21) and above, you can define vector drawables, which scale without losing definition.
(ref: http://developer.android.com/training/material/drawables.html#VectorDrawables)

Create vector image with the shape of a heart, drawable/heart.xml.

<!-- res/drawable/heart.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="256dp"
    android:width="56dp"
    android:viewportWidth="32"
    android:viewportHeight="32">

    <path android:fillColor="#8f00"
        android:pathData="M20.5,9.5
        c-1.955,0,-3.83,1.268,-4.5,3
        c-0.67,-1.732,-2.547,-3,-4.5,-3
        C8.957,9.5,7,11.432,7,14
        c0,3.53,3.793,6.257,9,11.5
        c5.207,-5.242,9,-7.97,9,-11.5
        C25,11.432,23.043,9.5,20.5,9.5z" />
</vector>

Use it on layout xml, layout/activity_main.xml.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/heart"
            android:background="#D0D0D0"/>

        <ImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:src="@drawable/heart"
            android:background="#B0B0B0"/>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:src="@drawable/heart"
            android:background="#909090"/>

    </LinearLayout>

</LinearLayout>

next:
- Animate Vector Drawables (AnimatedVectorDrawable) example