Question

I have a very strange problem with Android animations, I tried many different approaches and components, and still couldn’t find any explanation.

I have a FrameLayout which is a container for views, and a Button.

This FrameLayout should display only one view at a time, and when I click on the Button, I want the FrameLayout to display another view, and start an animation on the view that is removed from the FrameLayout.

The specificity here is that I only use two views, and I want to switch between these two views.

The problem:

When I click the button multiple times really fast, and then stop clicking, the two views are shown at the same time one on top off the other, and won’t disappear. The container still contains only one view though… definitely strange!

error screenshot http://i.minus.com/jDXyvUsE1LCOx.png

I was able to reproduce this with a simple example:

public class TestAnimActivity extends Activity implements OnClickListener {

private FrameLayout container;

private TextView current;
private TextView next;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    current = new TextView(this);
    current.setText("View 1 YEAH");
    next = new TextView(this);
    next.setText("       View 2 DOH");

    container = (FrameLayout) findViewById(R.id.container);
    container.addView(current);

    findViewById(R.id.button).setOnClickListener(this);
}

public void onClick(View v) {
    Animation outAnimation = AnimationUtils.loadAnimation(this, android.R.anim.fade_out);
    current.startAnimation(outAnimation);
    container.addView(next);
    container.removeView(current);

    TextView temp = current;
    current = next;
    next = temp;
}
}

As you can see the animations are being started on the views while previous ones are still running, and the way I do that may somehow be the source of the problem.

If I comment the animation related code, it works perfectly:

// Animation outAnimation = AnimationUtils.loadAnimation(this, android.R.anim.fade_out);
// current.startAnimation(outAnimation);

If I stop reusing views and create new views instead, it also works perfectly:

// next = temp;
next = new TextView(this);
next.setText("View: " + new Random().nextInt());

But I don’t want to create new views 🙂 .

It seems that the problem is related to starting animations several times on a view while adding / removing this view from its parent.

I first tried with a ViewFlipper, then a ViewAnimator, then looked up the Android source code and ended up doing this manually to reproduce the problem.

If you want the layout to be able to test by yourself, here is my main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Click me fast" />

</LinearLayout>

Thank you for your time!

Answer 1

I finally found a way to fix the issue.

When we remove a view from a ViewGroup, if there is an animation running on this view, it is automatically added to the “disappearing children” list of the ViewGroup.

The issue seemed to appear when we tried to add to the ViewGroup a view that has been removed from it but was still in its disappearing children.

There’s an easy way to fix that : viewGroup.clearDisappearingChildren();

Here would be the new implementation of the onClick() method :

public void onClick(View v) {

    next.clearAnimation();
    container.clearDisappearingChildren();

    Animation outAnimation = AnimationUtils.loadAnimation(this, android.R.anim.fade_out);
    current.startAnimation(outAnimation);
    container.addView(next);
    container.removeView(current);

    TextView temp = current;
    current = next;
    next = temp;
}