Search code examples
androidandroid-animationandroid-vectordrawable

Vector animation on pre lollipop


I'm trying to animate dot on pre lollipop device but I'm still getting:

java.lang.NullPointerException
at android.animation.PropertyValuesHolder.setupSetterAndGetter(PropertyValuesHolder.java:505)

This is my code:

Activity:

public class MyActivity extends BaseActivity {

static {
  AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.my_activity);
  ImageView androidImageView = (ImageView) findViewById(R.id.animated);
  androidImageView.setOnClickListener(v -> ((Animatable) androidImageView.getDrawable()).start());
}

my_activity layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
    >

<ImageView
        android:id="@+id/animated"
        android:layout_width="wrap_content"
        app:srcCompat="@drawable/animated_dot"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        />
</RelativeLayout>

animated_dot.xml:

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

<target
    android:animation="@anim/dot_animator"
    android:name="dot_name" />
</animated-vector>

dot_animator:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
        android:propertyName="scaleX"
        android:duration="250"
        android:valueFrom="1.0"
        android:valueTo="3.0"
        />
<objectAnimator
        android:propertyName="scaleY"
        android:duration="250"
        android:valueFrom="1.0"
        android:valueTo="3.0"
        />
</set>

and dot_1:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:viewportHeight="81.875"
    android:viewportWidth="65.59"
    android:width="24dp"
    >
<path
        android:fillColor="#FF000000"
        android:pathData="M-0.01,32.82a32.81,32.81 0,1 1,65.61 0c0,28.94 -32.8,49.04 -32.8,49.04S-0.01,61.77 -0.01,32.82Z"
        />
</vector>

This crash is connected with onClickListener from main activity and it happens only on pre lolipop devices. How to create vector scale animation properly on API 16? Also the problem is that on lollipop devices this also doesn't work, just nothing happening when I click it. I'm using library design:23.4.0


Solution

  • I assume this happens because of a "wrong" cast. You'll need to cast the Drawable from your ImageView to an AnimatedVectorDrawable or an AnimatedVectorDrawableCompat.

     androidImageView.setOnClickListener(v -> ((AnimatedVectorDrawable) androidImageView.getDrawable()).start());
    

    You need to surround your path with a group to do animations like scale or rotate, and you need to reference the name from this group in the <target> in your `.

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:viewportHeight="81.875"
    android:viewportWidth="65.59"
    android:width="24dp"
    >
       <group name=""dot_name
              pivotX="viewportHeight / 2"
              pivotY="viewportWidth / 2">  <!--Calculate the values by yourself, write the calucalted values in there. This moves the reference point to the middle --> 
       <path
            android:fillColor="#FF000000"
            android:pathData="M-0.01,32.82a32.81,32.81 0,1 1,65.61 0c0,28.94 -32.8,49.04 -32.8,49.04S-0.01,61.77 -0.01,32.82Z"
        />
        </group>
    </vector>