Android Material Play/Pause Vector Drawable Animation

Question

How can I implement play/pause animation like many music players in my Android app? I have tried a lot of solutions but none worked.

This is what I have done so far: MainActivity.java:

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageButton = (ImageButton) findViewById(R.id.imageView);
        imageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Animatable animatable = (Animatable) imageButton.getDrawable();
                animatable.start();
            }
        });
    }

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<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="widefide.com.vectoranimation01.MainActivity">


    <ImageButton
        android:layout_width="wrap_content"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:id="@+id/imageView"
        android:src="@drawable/play_pause"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

play_pause.xml:

<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android"
android:constantSize="true">
<item
    android:drawable="@drawable/pause_ic"
    android:state_checked="true"
    android:id="@+id/pause_state" />
<item
    android:drawable="@drawable/play_ic"
    android:id="@+id/play_state" />
<transition android:fromId="@id/play_state" android:toId="@id/pause_state" android:reversible="true">
    <animated-vector android:drawable="@drawable/play_ic">
        <target android:name="d" android:animation="@anim/path_morph" />
    </animated-vector>
</transition>
</animated-selector>

path_morph.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="4000"
        android:propertyName="pathData"
        android:valueFrom="@string/ic_play_string"
        android:valueTo="@string/ic_pause_string"
        android:valueType="pathType" />
</set>

Answer 1

You have to define the play and pause icon as vector image instead of png and then use a AnimatedVectorDrawable for the transition between the two.

See the tickCross example of the udacity course for more informations: https://www.udacity.com/course/viewer#!/c-ud862/l-4969789009/m-4908328939 for the explanation and https://github.com/udacity/ud862-samples/tree/master/TickCross/app/src/main for the code

You just have to replace the tick and cross path by (48dp):

<string name="path_play">M16,24L38,24L27.3,30.8L16,38ZM16,10L27.3,17.2L38,24L16,24Z</string>
<string name="path_pause">M12,10L20,10L20,38L12,38ZM28,10L36,10L36,38L28,38Z</string>