The first TansitionDrawable element does not disappear

Question

I am trying to use TransitionDrawable to switch between play / pause icons. when I first press the play button, the play icon remains and the pause button is displayed on top of the play icon. when I click again, the pause icon disappears and the play button appears.

code: onClick runs this method

private void startOrPause() {
    TransitionDrawable drawable = (TransitionDrawable) mPlayBtn.getDrawable();
    if (!isPlaying) {
        drawable.startTransition(300);
    } else {
        drawable.reverseTransition(300);
    }

    isPlaying = !isPlaying;

}

XML: Transition

<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_play"/>
    <item android:drawable="@drawable/ic_pause"/>
</transition>

IMAGEBUTTON:

<ImageButton android:id="@+id/audio_layout_play_imageButton"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_centerVertical="true"
             android:src="@drawable/play_pause_transition"
             android:background="@android:color/transparent"
             android:layout_marginLeft="4dp"
        />

I looked at the sample code for Android and several manuals on the Internet, and everyone does it the same way.

Thank you for your help,

Roy

Answer 1

, (32- PNG, GIF). setCrossFadeEnabled:

TransitionDrawable drawable = (TransitionDrawable) mPlayBtn.getDrawable();
drawable.setCrossFadeEnabled(true);