androidandroid-vectordrawableanimatedvectordrawable

How to add Animated Vector Drawable Animation?


I am trying to animate a vector path to a different path in my android app for testing but its not working properly . no animation is displayed on screen and neither any animation is shown.

My vector file is:

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="8dp"
    android:height="5dp"
    android:viewportWidth="8"
    android:viewportHeight="5">
  <path
      android:name="redot"
      android:pathData="M2.5,2.5L6,2.5"
      android:strokeWidth="4"
      android:fillColor="#00000000"
      android:strokeColor="#E61B1B"
      android:fillType="evenOdd"
      android:strokeLineCap="round"/>
</vector>

And my VectorAnimation file is:

    <?xml version="1.0" encoding="utf-8"?>
    <animated-vector xmlns:tools="http://schemas.android.com/tools"
        xmlns:android="http://schemas.android.com/apk/res/android"
        tools:targetApi="lollipop"
        android:drawable="@drawable/ic_reddot">


        <target
            android:animation="@anim/redanim"
            android:name="redot"/>

    </animated-vector>

My Animation file in anim folder is:

<?xml version="1.0" encoding="utf-8"?>

    <set xmlns:android="http://schemas.android.com/apk/res/android">

        <objectAnimator
            android:duration="10000"
            android:propertyName="pathData"
            android:valueFrom="M2.5,2.5L6,2.5"
            android:valueTo="M2.5,2.5L31,2.5"
            android:valueType="pathType" />

    </set>

And finally my MainActivityCode is as following:

    public class MainActivity extends AppCompatActivity {
    private TextView testObj;
    private ImageView reddot;
    private AnimatedVectorDrawable animation;

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
      // testObj = (TextView) findViewById(R.id.testObj);
     // testObj.setVisibility(View.INVISIBLE);
    reddot = (ImageView) findViewById(R.id.reddot);

               Drawable d =  reddot.getBackground();
            if (d instanceof AnimatedVectorDrawable) {
                Log.d("testanim", "onCreate: instancefound" );
                animation = (AnimatedVectorDrawable) d;
                animation.start();
            }

        }
    }

Solution

  • Use Shape Shifter tool and than export the animated vector drawable file generated by shape shifter . add this file in your drawable folder and than add this as background to your imageview which you want to animate

    my avd_anim.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:name="vector"
            android:width="80dp"
            android:height="12dp"
            android:viewportWidth="80"
            android:viewportHeight="12">
            <path
                android:name="path"
                android:pathData="M 6 6 L 74 6"
                android:strokeColor="#e61b1b"
                android:strokeWidth="12"
                android:strokeLineCap="round"
                android:fillType="evenOdd"/>
        </vector>
    </aapt:attr>
    <target android:name="path">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:duration="1000"
                android:valueFrom="M 6 6 L 74 6"
                android:valueTo="M 6 6 L 1 6"
                android:valueType="pathType"
                android:interpolator="@android:anim/linear_interpolator"/>
        </aapt:attr>
    </target>
    

    My activity_main.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
       <ImageView
           android:id="@+id/object"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginStart="8dp"
           android:layout_marginTop="8dp"
           android:layout_marginEnd="8dp"
           android:layout_marginBottom="8dp"
           android:src="@drawable/avd_anim"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent" />
    
    </android.support.constraint.ConstraintLayout>
    

    and finally my MainActivity.class

    public class MainActivity extends AppCompatActivity {
    private ImageView image;
    private AnimatedVectorDrawable animation;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            image = (ImageView) findViewById(R.id.object);
        }
    
        @Override
        protected void onStart() {
            super.onStart();
            Drawable d = image.getDrawable();
            if (d instanceof AnimatedVectorDrawable) {
                Log.d("testanim", "onCreate: instancefound" + d.toString());
                animation = (AnimatedVectorDrawable) d;
                animation.start();
            }
        }
    
    }