CODEWITHSUNDEEP
androidandroid-animationandroid-buttonandroid-selectorandroid-background
Reid Conner
Reid Conner

Reputation: 233

Android - State Selector Animations - Only animate de-press, NOT press

I have a very basic selector that I am using as the background for some buttons to achieve down states. Here's the xml:

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

With this selector the fade animation will occur every time the button changes state. In other words, the transition will animate both when going from de-pressed to pressed and also when going back from pressed to de-pressed.

Now, my question is: is it possible to make it so that only one of these state changes animates? When a user presses the button, I want the downstate transition to occur immediately without animations. When the button becomes de-pressed, I want the downstate to fade out while the normal state fades back in. Can this be done?

Upvotes: 20

Views: 28810

Answers (3)

maniaq
maniaq

Reputation: 185

<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:enterFadeDuration="@android:integer/config_shortAnimTime"
android:exitFadeDuration="@android:integer/config_longAnimTime">
<item android:state_pressed="true" >
    <shape>
        <gradient
            android:startColor="#ffffff"
            android:endColor="#917777"
            android:angle="270" />
    </shape>
</item>
<item android:state_pressed="false" >
    <shape>
        <gradient
            android:startColor="#ffffff"
            android:endColor="#d2adad"
            android:angle="270" />
    </shape>
</item>
<item android:state_checked="true">
    <color android:color="@color/black"/>
</item>
</selector>

Upvotes: 8

Jakub S.
Jakub S.

Reputation: 6080

Animations on selector : (my drawables were colors )

De-Press (Out)
android:exitFadeDuration="@android:integer/config_shortAnimTime"
Press (In)
android:enterFadeDuration="@android:integer/config_shortAnimTime"

Full example:

<selector xmlns:android="http://schemas.android.com/apk/res/android"
      android:enterFadeDuration="@android:integer/config_shortAnimTime"
      android:exitFadeDuration="@android:integer/config_shortAnimTime">

<item android:state_checked="false" android:drawable="@color/transparent"/>
<item android:state_checked="true"  android:drawable="@drawable/circle_blue"/>
</selector>

Upvotes: 39

Vedant Agarwala
Vedant Agarwala

Reputation: 18819

You can do something like this:

<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/selected"
        android:state_selected="true"
        android:drawable="@color/home_button_blue_down"
        />

    <item android:id="@+id/usual"
        android:drawable="@android:color/transparent"
        />

    <transition
        android:fromId="@+id/usual"
        android:toId="@+id/selected" >
        <animation-list>
            <!--fill in your animation here-->
        </animation-list>
    </transition>
</animated-selector>

Keep in mind animated-selector is available only after API 21.

More info in this official guide

Upvotes: 16

Related Questions