Animate Vector Drawables (Animatedvectordrawable) Representative

Posted on

Vector Drawables are scalable without losing definition. The AnimatedVectorDrawable shape lets yous 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 50 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 50 0,-70 70,70 0,0   -70,70z"         android:valueTo="M300,70 50 0,-70 70,0  0,140 -70,0 z"         android:valueType="pathType" /> </set> 

Edit layout file, layout/activity_main.xml, to include ImageViews amongst 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="https://rootandroid.org//"         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 showtime animation i time 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;  populace shape 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             populace 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             populace 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             populace void onClick(View v) {                 Drawable drawable = ((ImageView)v).getDrawable();                 ((Animatable) drawable).start();             }         });     }  }  

Related:
– Vector Drawable example