title: Youtube Play/pause Animated Vector Drawable on android
body: <p>I'm trying to do an animation like youtube Play/Pause with svgs paths and animated vector.</p>
  
  <p><code>Strings.xml</code></p>
  
  <pre><code>&lt;resources&gt;
    &lt;string name="app_name"&gt;AnimatedSvgTest&lt;/string&gt;
  
    &lt;string name="svg_triangle"&gt;
      M0,0 L0,24 12,12 0,0
    &lt;/string&gt;
    &lt;string name="svg_pause"&gt;
      M0,0 L0,24 M12,0 L12,24
    &lt;/string&gt;
  &lt;/resources&gt;
  </code></pre>
  
  <p><code>anim/path_morph.xml</code>:</p>
  
  <pre><code>&lt;set xmlns:android="http://schemas.android.com/apk/res/android"&gt;
    &lt;objectAnimator
      android:duration="4000"
      android:propertyName="pathData"
      android:valueFrom="@string/svg_triangle"
      android:valueTo="@string/svg_pause"
      android:valueType="pathType" /&gt;
  &lt;/set&gt;
  </code></pre>
  
  <p><code>drawable/avd.xml</code></p>
  
  <pre><code>&lt;animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_play_arrow_24dp"&gt;
    &lt;target
      android:name="play"
      android:animation="@anim/path_morph" /&gt;
  &lt;/animated-vector&gt;
  </code></pre>
  
  <p><code>drawable/ic_pause_arrow.xml</code>:</p>
  
  <pre><code>&lt;vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0"&gt;
    &lt;path
      android:pathData="@string/svg_pause"
      android:strokeColor="#000"
      android:strokeWidth="1.0" /&gt;
  &lt;/vector&gt;
  </code></pre>
  
  <p><code>drawable/ic_play_arrow.xml</code>:</p>
  
  <pre><code>&lt;vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="100dp"
    android:height="100dp"
    android:viewportHeight="100.0"
    android:viewportWidth="100.0"&gt;
    &lt;path
      android:fillColor="#FF000000"
      android:pathData="@string/svg_triangle" /&gt;
  &lt;/vector&gt;
  </code></pre>
  
  <p><code>activity_main.xml</code></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"&gt;
  
    &lt;ImageButton
      android:id="@+id/button"
      style="@style/Widget.AppCompat.Button.Borderless"
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:layout_centerInParent="true"
      android:src="@drawable/avd" /&gt;
  
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p><code>MainActivity.java</code></p>
  
  <pre><code>public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
  
      final ImageButton button = (ImageButton) findViewById(R.id.button);
      button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
          Animatable animatable = (Animatable) button.getDrawable();
          animatable.start();
        }
      });
    }
  }
  </code></pre>
  
  <p>But I still get <code>Caused by: android.view.InflateException: Binary XML file line #2 Can't morph from</code> crash :/</p>