Work with animation. AnimatedVectorDrawableCompat

In this article, I would like to tell everyone and show in practice how you can make animation in an Android application using AnimatedVectorDrawableCompat, for example, your custom buttons, ImageView, FloatingActionButton.



To date, there is not much information on this subject in the network; more precisely, it is not at all. All I’ve been able to find is the recent innovations introduced by Google, namely:
')
Article from Android Developer Blog
Video from Google I / O 2016
Android Reference

This is essentially not enough to figure out how to practice AnimatedVectorDrawableCompat.

Now proceed directly to the application.

At the first stage, we need to get rid of the fact that the framework turns the icon into .png. From version 23.3.0 you can use .xml and for this you need to add the following flag to the Gradle app level:

android { ... defaultConfig { ... vectorDrawables.useSupportLibrary = true } } 

And in dependence to connect the latest version of AppComapt:

 dependencies { ... compile 'com.android.support:appcompat-v7:23.4.0' } 

Further, in the example I will use a square (blue), which will cover the circle (red) with its corners a little.
At the exit, we must use 2 objects and make them move continuously along the X axis (square) and Y (circle), respectively.

Steps:

one)

Create a Drawable Resource File, name the file - icon.xml and put in the drawable folder:

 <?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="120dp" android:height="120dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <group android:name="circle" android:scaleX=".7" android:scaleY=".7" android:pivotX="12" android:pivotY="12"> <path android:fillColor="#ff0000 " android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"/> </group> <group android:name="square" android:scaleX="1" android:scaleY="1" android:pivotX="12" android:pivotY="12"> <path android:fillColor="#FF0000ff" android:pathData="M6,6h12v12H6z"/> </group> </vector> 

2)

To store the animation in your project, we create a folder animator - res / animator
In it, we put two objects and name them accordingly:

a) circle.xml:

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

b) square.xml

 <?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="5" android:repeatMode="reverse" android:repeatCount="infinite" android:duration="250" /> </set> 

Here we also indicated that the objects will move along the X and Y axis, from where they will begin the movement, as well as the infinity of the movements.

If you have more named groups that need to be animated, then in this directory you need to create them, respectively, and more groups will be in the main file - icon.xml

3)

Now we create an animated file directly, which we will refer to in layout or in code - res / drawable / anim_icon:

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

Note: Android Studio underlines with a red animated-vector (if the min version of the project is less than 21), but if you hooked up the flag, as indicated at the beginning, everything will work.

four)

Now we can access animated vectors in xml. This could be - ImageView, ImageButton, FloatingActinonButton:

 <LinearLayout ... xmlns:app="http://schemas.android.com/apk/res-auto"/> <ImageView app:srcCompat="@drawable/anim_icon" ... /> </LinearLayout> 

five)

We address from the code to vectors. Here I also hung OnClickListener and saved the state during the coup:

 static final String STATE_ANIM = "isAnim"; boolean mIsAnim; AnimatedVectorDrawableCompat avd; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ImageView imageView = (ImageView) findViewById(R.id.imageView); if (imageView != null) { Drawable drawable = imageView.getDrawable(); avd = (AnimatedVectorDrawableCompat) drawable; if (savedInstanceState != null) { mIsAnim = savedInstanceState.getBoolean(STATE_ANIM); if (mIsAnim) { avd.start(); } } imageView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (avd.isRunning()) { avd.stop(); mIsAnim = false; } avd.start(); mIsAnim = true; } }); } } @Override public void onSaveInstanceState(Bundle outState) { super.onSaveInstanceState(outState); outState.putBoolean(STATE_ANIM, mIsAnim); } } 

Note: do not forget to tighten the dependency:

 import android.support.graphics.drawable.AnimatedVectorDrawableCompat; 

The result of the work done:



PS

Recently, it became possible to merge the my_vector.xml and anim_vector files into one anim_vector (now a separate res / drawable / my_vector.xml file is not needed), and also add animators (objectAnimator) to this way to make one file for the entire animation.

Google submitted this to I / O, but unfortunately it does not work. On the video from 14 minutes talk about it.