Android selector with fade in / fade out duration initially invisible

Question

I'm trying to achieve that an icon in ActionBar will not change states discretely, but by fading animation. When I add android:enterFadeDuration and android:exitFadeDuration to the selector tag, my drawable is initially invisible - when I tap it, it changes state to state_pressed (properly with enter fade duration) and when I release it, it turns back to its normal visible unselected state.

I must be missing something obvious, or is this a bug of some kind?

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="150" android:exitFadeDuration="150">
    <item android:drawable="@drawable/filters_toggle_icon_selected" android:state_focused="true"/>
    <item android:drawable="@drawable/filters_toggle_icon_selected" android:state_pressed="true"/>
    <item android:drawable="@drawable/filters_toggle_icon" android:state_focused="false" android:state_pressed="false"/>
</selector>

Answer 1

I had a similar problem, with my code looking like this:

<selector xmlns:android="http://schemas.android.com/apk/res/android" 
          android:enterFadeDuration="@android:integer/config_mediumAnimTime"
          android:exitFadeDuration="@android:integer/config_mediumAnimTime" >
    <item android:state_pressed="true" android:drawable="@color/pressed" />
    <item android:drawable="@color/default" />
</selector>

At first, I found a hint to get rid of enterFadeDuration and only use exitFadeDuration. That solved the problem with initial invisibility, but the view still faded into invisibility during the first interraction.

Then, I modified my structure as follows:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/default" />
    <item>
        <selector android:enterFadeDuration="@android:integer/config_mediumAnimTime"
                  android:exitFadeDuration="@android:integer/config_mediumAnimTime" >
            <item android:state_pressed="true" android:drawable="@color/pressed" />
        </selector>
    </item>
</layer-list>

Basically, I just pushed the default drawable out of the selector. It's a workaround and it also works for selectors with multiple states, but has some notable limitations:

• The default drawable is always visible as a bottom layer. It works for opaque colors, but transparency may cause undesirable results.
• If the view starts in one of the states tested by selector, in still displays as default, because the selector still starts as invisible.

It might not be applicable to the original problem, but it's something to consider for overcoming this behaviour of selectors.

Answer 2

Use android:enterFadeDuration="@android:integer/config_mediumAnimTime" and android:exitFadeDuration="@android:integer/config_mediumAnimTime".

Answer 3

This seems to be a bug that happens on specific Android versions. You can turn off the android:enterFadeDuration programmatically in Java code, by accessing the Selector with a StateListDrawable:

// Disable android:enterFadeDuration/exitFadeDuration on Android 4.2 only
if (Build.VERSION.SDK_INT == Build.VERSION_CODES.JELLY_BEAN_MR1) {
    StateListDrawable stateListDrawable =
            (StateListDrawable) animatedButton.getBackground();
    stateListDrawable.setEnterFadeDuration(0);
    stateListDrawable.setExitFadeDuration(0);
}