Animate selector/state transitions

Question

I have a simple selector for my ListView

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/yellow_arc" android:state_activated="true"/>
    <item android:drawable="@drawable/yellow_nonarc" android:state_activated="false"/>

</selector>

I want to animate the transition between these drawables when the state of the views are changed from activated to not-activated and vica versa.

If you run the example in API demos you will see an obvious fade-in/fade-out animation while the activated state of the view is changed.

So what I want is a custom animation while the state of the view is changed. I think it should be done via xml but I couldn't find a way.

Thanks in advance.

EDIT:

I guess I have found something useful there's a activated_background.xml in \Android\android-sdk\platforms\android-API_VERSION\data\res\drawable which includes

<selector xmlns:android="http://schemas.android.com/apk/res/android"
        android:exitFadeDuration="@android:integer/config_mediumAnimTime">
    <item android:state_activated="true" android:drawable="@android:drawable/list_selector_background_selected" />
    <item android:drawable="@color/transparent" />
</selector>

So the example in API-demos achieveing this fade-out animation by declaring an exitFadeDuration. However, this is not exactly what I want.. I want to declare custom animations for the transition between the state drawables since the fade-in/fade-out animation does not look good for my drawables.

score 7 · Answer 1 · answered Nov 06 '15 at 00:35

7

Added in api 21 "StateListAnimator"

http://developer.android.com/reference/android/animation/StateListAnimator.html

I know this is an old question but this may help future people looking to do this.

answered Nov 06 '15 at 00:35

Larry McKenzie

3,253
25
22

score 3 · Answer 2 · edited May 23 '17 at 11:54

3

I guess TransitionDrawable could help you to accomplish this.

You can check the answer here: Animate change of view background color on Android

edited May 23 '17 at 11:54

Community

1
1

answered May 23 '14 at 09:04

HatemTmi

1,068
9
16

score 2 · Answer 3 · answered Dec 23 '20 at 14:54

The modern way (since api 21) of doing it with example:

 <?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/checked"
        android:drawable="@drawable/check_box_on"
        app:check="true" />  <!-- this is custom state. You can use android:state_checked="true"-->
    <item
        android:id="@+id/unchecked"
        android:drawable="@drawable/check_box_off"
        app:check="false" />
    <transition
        android:drawable="@drawable/toggle_checkbox_unchecked_checked"
        android:fromId="@+id/unchecked"
        android:toId="@+id/checked" />
    <transition
        android:drawable="@drawable/toggle_checkbox_checked_unchecked"
        android:fromId="@+id/checked"
        android:toId="@+id/unchecked" />
</animated-selector>

documentation for animated-selector: link

where transition drawable is for example this:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:drawable="@drawable/check_box_on">
    <target android:name="check_box_on_path">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:duration="@android:integer/config_shortAnimTime"
                android:interpolator="@android:interpolator/decelerate_cubic"
                android:propertyName="trimPathEnd"
                android:valueFrom="1"
                android:valueTo="0"
                android:valueType="floatType" />
        </aapt:attr>
    </target>
</animated-vector>

documentation for animated-vector: link

score 0 · Answer 4 · answered Feb 10 '12 at 01:42

0

Is it the fade you want?

I guess it would be the same as how a textSwitcher works, maybe you want to change it to a ViewSwitcher instead, the fade is done pro-grammatically

Animation in = AnimationUtils.loadAnimation(this,
                android.R.anim.fade_in);
        Animation out = AnimationUtils.loadAnimation(this,
                android.R.anim.fade_out);

        mSwitcher1.setInAnimation(in);
        mSwitcher1.setOutAnimation(out);

answered Feb 10 '12 at 01:42

FabianCook

20,269
16
67
115

A **TextSwitcher** wouldn't be a good solution. If I use it I have to handle the view recycling mechanism inside the **ListView** too because every list item will have an **separate** switcher. So it would be an overkill. I have tried something similar to this and it's hard to handle. I believe it's better to use the selectors since they are available and handling the selected/not-selected mechanism by itself. – C.d. Feb 10 '12 at 01:48

Animate selector/state transitions

4 Answers4

Linked