ImageButton using Transitions in Android

Question

I'm trying to create a transparent (no button background) ImageButton that has a custom selector. I have the selector working against the button but I now want the selector drawables to cross-fade into each other. I saw the TransitionDrawable object that can be represented in XML. Is there a way to connect this into my selector?

Below is the XML layout code to create the image button on the screen in the lower left corner of the screen. It currently goes from one image to the next abruptly ignoring the transition XML.

selector_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/transition_normal_to_pressed" /> <!-- pressed -->
    <item android:state_focused="true" android:drawable="@drawable/transition_pressed_to_normal" /> <!-- focused -->
    <item android:drawable="@drawable/menu_normal" /> <!-- default -->
</selector>

transition_normal_to_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/menu_pressed" />
    <item android:drawable="@drawable/menu_normal" />
</transition>

activity.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ImageButton
        android:id="@+id/btnMenu"
        android:background="@android:color/transparent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/selector_button"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true" />
</RelativeLayout>

Answer 1

You need to drop the selector and use the transition directly as the ImageButtons drawable. The animation itself must be applied in code

ImageButton button = (ImageButton) findViewById(R.id.button);
TransitionDrawable drawable = (TransitionDrawable) button.getDrawable();
drawable.startTransition(500);

Where drawable.reverseTransition(500) will reverse the transition from its current state.

See Transition Drawable and also TransitionDrawable.html#reverseTransition(int) for a further explanation.

Answer 2

Using transitions in selectors

ImageButton button = (ImageButton) findViewById(R.id.button);
Drawable d = button.getDrawable.getCurrent(); //or AnyView.getBackground().getCurrent(); for custom background
        if (d instanceof TransitionDrawable) {
            TransitionDrawable t = (TransitionDrawable) d;
            t.startTransition(500);
        }

Answer 3

answers above is too complex, try this

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="240"
android:enterFadeDuration="120" >
<item android:state_pressed="true"
    android:drawable="@color/pressed_bg" />
<item android:state_pressed="false"
    android:drawable="@android:color/transparent" />
</selector>