TansitionDrawable first element does not disappear

Question

I'm trying to use TransitionDrawable in order to switch between play/pause icons. when i first click the play button, the play icon stays and the pause button appear on top of the play icon. when i click again the pause icon disappear and the play button is there.

the 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've looked over the android sample code and some guides on the internet and everyone doing it the same.

Thanks for your help,

Roy

Answer 1

I had exactly the same problem, which only occured with transparent images (32bit PNG, GIF). Try using setCrossFadeEnabled:

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