androidtogglebuttonanimationdrawable

how to set up an animated toggle button in android


I've created an animated toggle button the way someone did in this SO question. It works fine but there's a little problem, when the layout is first created, my toggle button background is first frame of the animationdrawable (it should be its last frame). Once I tap it for the first time, it works correctly.

EDIT: toggle_pause_anim.xml:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true" >

<item
    android:drawable="@drawable/pause1"
    android:duration="50"/>
...
<item
    android:drawable="@drawable/pause20"
    android:duration="50"/>

</animation-list>

toggle_pause_anim.xml:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true" >

<item
    android:drawable="@drawable/play1"
    android:duration="50"/>
...
<item
    android:drawable="@drawable/pause20"
    android:duration="50"/>

</animation-list>

toggle_play_pause_anim.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/toggle_play_anim" android:state_checked="false"/>
<item android:drawable="@drawable/toggle_pause_anim" android:state_checked="true"/>

</selector>

toggle_play_pause_bg:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item
    android:id="@+android:id/background"
    android:drawable="@android:color/transparent"/>
<item
    android:id="@+android:id/toggle"
    android:drawable="@drawable/toggle_play_pause_anim"/>

</layer-list>

ToggleButton in my layout.xml:

<ToggleButton
    android:id="@+id/play_pause"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/toggle_play_pause_bg"
    android:textOff=""
    android:textOn="" />

And no, I do set checked to false in on create.

Here's a video of what I'm getting. The problem is when the layout is first loaded (the icon should be play, not pause). As you see, after first change, it works correctly afterward.


Solution

  • Well, since nobody answered I searched and searched and finally find the solution.

    So here's the trick:

    ToggleButton in my layout.xml:

    <ToggleButton
        android:id="@+id/play_pause"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/toggle_play_pause_anim"
        android:textOff=""
        android:textOn="" />
    

    It turned out that layer drawable was not necessary, and in java code, Iadded these lines in onCreate method:

    toggleBtn = (ToggleButton) findViewById(R.id.play_pause);
    StateListDrawable stateListDrawable = (StateListDrawable) toggleBtn.getBackground();
    AnimationDrawable animationDrawable = (AnimationDrawable) stateListDrawable.getCurrent();
    animationDrawable.selectDrawable(animationDrawable.getNumberOfFrames() - 1);
    

    Now it loads and operates just fine.