title: Android objectanimator not animating
body: <p>I have designed today two drawable's of the classic <code>arrow</code> and <code>hamburger</code> icon to recreate and understand <code>objectAnimator</code> in android. The problem occurs when no animation is played but the drawable is changed.</p>
  
  <p>I have created <code>ic_backarrow.xml</code>:</p>
  
  <pre><code>&lt;vector xmlns:android="http://schemas.android.com/apk/res/android"
      android:height="48dp"
      android:width="48dp"
      android:viewportWidth="24"
      android:viewportHeight="24"&gt;
  
      &lt;path android:strokeColor="@color/blue_ripple"
          android:fillColor="@color/blue_ripple"
          android:pathData="@string/arrow" /&gt;
  
  &lt;/vector&gt;
  </code></pre>
  
  <p>Followed by <code>ic_menu.xml</code>:</p>
  
  <pre><code>&lt;vector xmlns:android="http://schemas.android.com/apk/res/android"
      android:height="48dp"
      android:width="48dp"
      android:viewportWidth="24"
      android:viewportHeight="24"&gt;
  
      &lt;path android:fillColor="@color/blue_ripple"
          android:pathData="@string/menu" /&gt;
  
  &lt;/vector&gt;
  </code></pre>
  
  <p>In <code>strings.xml</code> I have defined my path's to be more easy to follow:</p>
  
  <pre><code>&lt;string name="arrow"&gt;M4,11 H20 V13 H4 V11 M4,11 L12,4 L13.5,5.5 L5.5,12.5 L4,11 M4,13 L12,20 L13.5,18.5 L7.2,13 L4,13&lt;/string&gt;
  &lt;string name="menu"&gt;M3,6 H21 V8 H3 V6 M3,11 L21,11 L21,13 L3,13 L3,11 M3,16 L21,16 L21,18 L3,18 L3,16&lt;/string&gt;
  </code></pre>
  
  <p>I also modified the paths to be able to animate the drawable's: arrow to menu and menu to arrow.</p>
  
  <p>After I have created the <code>arrow_to_menu.xml</code> where I define the <code>objectAnimator</code>:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  
  &lt;objectAnimator
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:propertyName="pathData"
      android:valueFrom="@string/arrow"
      android:valueTo="@string/menu"
      android:duration="@integer/duration"
      android:interpolator="@android:interpolator/fast_out_slow_in"
      android:valueType="pathType" /&gt;
  </code></pre>
  
  <p>and the <code>menu_to_arrow.xml</code>:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  
  &lt;objectAnimator
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:propertyName="pathData"
      android:valueFrom="@string/menu"
      android:valueTo="@string/arrow"
      android:duration="@integer/duration"
      android:interpolator="@android:interpolator/fast_out_slow_in"
      android:valueType="pathType" /&gt;
  </code></pre>
  
  <p>In drawable's I also defined the <code>animated-vector</code> with the initial <code>drawable</code> and the target <code>objectAnimator</code>:</p>
  
  <p>File: <code>avd_arrow_to_menu.xml</code>:</p>
  
  <pre><code>&lt;animated-vector
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:drawable="@drawable/ic_backarrow"&gt;
  
      &lt;target
          android:name="@string/tick"
          android:animation="@animator/arrow_to_menu" /&gt;
  
  &lt;/animated-vector&gt;
  </code></pre>
  
  <p>And also <code>avd_menu_to_arrow.xml</code>:</p>
  
  <pre><code>&lt;animated-vector
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:drawable="@drawable/ic_menu"&gt;
  
      &lt;target
          android:name="@string/cross"
          android:animation="@animator/menu_to_arrow" /&gt;
  
  &lt;/animated-vector&gt;
  </code></pre>
  
  <p>In the project <code>layout</code> I have created an <code>ImageView</code>:</p>
  
  <pre><code>&lt;ImageView
      android:id="@+id/tick_cross"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:src="@drawable/ic_menu"
      android:layout_margin="50dp"
      android:layout_alignParentBottom="true"
      android:layout_alignParentEnd="true" /&gt;
  </code></pre>
  
  <p>In the <code>class</code> file I look-up for the <code>ImageView</code> and import the <code>AnimatedVectorDrawable's</code> </p>
  
  <pre><code>arrowMenu = (ImageView) findViewById(R.id.tick_cross);
  menuToArrow = (AnimatedVectorDrawable) getDrawable(R.drawable.avd_menu_to_arrow);
  arrowToMenu = (AnimatedVectorDrawable) getDrawable(R.drawable.avd_arrow_to_menu);
  
  arrowMenu.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
          animate(arrowMenu);
      }
  });
  </code></pre>
  
  <p>And when the <code>ImageView</code> is clicked, it should animate between <code>hamburger</code> icon and <code>arrow</code> icon:</p>
  
  <pre><code>public void animate(View view) {
      AnimatedVectorDrawable drawable = menu ? menuToArrow : arrowToMenu;
      arrowMenu.setImageDrawable(drawable);
      drawable.start();
      menu = !menu;
  }
  </code></pre>
  
  <p>As I said before, there is no animation between arrow and hamburger icon. I tried to change <code>android:duration</code> to something bigger like 1000 or something small like 400 but I have the same result. </p>
  
  <p>Sorry for the long post, I really needed to explain every step I done.</p>