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>

Show us what you tried and what exactly the problem is, otherwise none can or will help you. We are not here to do your work for you. — Xaver Kapeller, Jan 13 '16 at 11:25
please check [this](http://stackoverflow.com/a/35738726/2826147) answer. — Amit Vaghela, Mar 02 '16 at 05:28

score 14 · Accepted Answer · answered Feb 14 '16 at 11:35

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>

score 0 · Answer 2 · answered Jan 15 '16 at 15:50

0

One option instead of changing the drawable, is to put two buttons on the same position and only one visible at a time.

When you click play button you hide the play button and make the pause button visible When you click pause button you hide the pause button and make the play button visible.

You can add Alpha animations so they fade into each other

For fade animation you need two XML files like these:

<set xmlns:android="http://schemas.android.com/apk/res/android" 
android:interpolator="@android:anim/linear_interpolator">  
   <alpha  
       android:fromAlpha="0.2"  
       android:toAlpha="1.0"  
       android:duration="500"/>  
</set>

<set xmlns:android="http://schemas.android.com/apk/res/android" 
android:interpolator="@android:anim/linear_interpolator">  
   <alpha  
       android:fromAlpha="1.0"  
       android:toAlpha="0.2"  
       android:duration="500"/>  
</set>

and on each button click you start the fade in or out animations and set visibility accordingly.

answered Jan 15 '16 at 15:50

ilomambo

8,290
12
57
106

Yes, but this old school animation. You have to triggger the fade in/ fade out with OnClick code. I will try to write you a snippet, later. But I am sure if you google it ("android OnClick animation") you will find it faster. – ilomambo Jan 16 '16 at 12:44
But I was looking for something like Youtube's play/pause button. – WideFide Jan 17 '16 at 13:23
Yes, I did understand your question, just offered a simpler alternative – ilomambo Jan 17 '16 at 20:59
Extremely weird and inefficient idea! – Koushik Shom Choudhury Mar 20 '20 at 08:37

Android Material Play/Pause Vector Drawable Animation

2 Answers2