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>

I would also be curious if you found a solution. My best workaround so far is to remove all `fadeDuration` parameters. — Brian, Jul 14 '16 at 08:26
The problem seems to exist **only on API 23** when using fade animations. I am having the same problem (I'm using a selector as compound drawable for a `TextView`) and ended up using a selector without animations on API 23. I tested the behaviour on versions 21-27. — Markus Penguin, Dec 21 '17 at 10:22

score 7 · Answer 1 · answered Dec 08 '16 at 23:04

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.

score 3 · Answer 2 · edited Jun 04 '15 at 19:49

3

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

edited Jun 04 '15 at 19:49

Stephen Kennedy

20,585
22
95
108

answered Jun 04 '15 at 19:36

Ashik Rahman

47
2

score 3 · Answer 3 · answered Jan 17 '20 at 11:00

My problem was similar as well, the issue was that after setting a background drawable on my view, it was in the wrong state (sometimes it even mixed the stroke and solid of two states...). This was only before the first interaction, like receiving focus or changing enabled state.

I've found that if you call jumpToCurrentState() on the drawable (which has the fade duration properties) after setting it on the view, it will be set on the correct state, and you can keep on using the enter / exit fade duration properties. Here's how I did it:

val stateList = (darkBackground as? RippleDrawable)?.findDrawableByLayerId(android.R.id.background) as? StateListDrawable
background = darkBackground
stateList?.jumpToCurrentState()

In this example I had a ripple drawable which contained the selector which had the fade properties (I had to add an ID to the selector so I could look it up using the ID).

score -1 · Answer 4 · answered Jun 29 '18 at 09:50

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);
}

Android selector with fade in / fade out duration initially invisible

4 Answers4

Linked