Error while trying to create circular reveal: IllegalStateException: cannot start this animation on a detached view

Question

So, I'm experimenting trying to create a circular reveal on API level 21 on a TextView but I keep getting this error. At first I thought it had something to do with the lifecycle of the fragment I was attempting it but then I just tried the same thing in an activity and it still wouldn't work.

Here's the code:

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Window w = getWindow();
        w.setFlags(
                WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS,
                WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        w.setStatusBarColor(Color.parseColor("#0277bd"));


        setContentView(R.layout.activity_main);


        TextView tv = (TextView) findViewById(R.id.text);



        int a = (tv.getLeft() + tv.getRight()) / 2;
        int b = (tv.getTop() + tv.getBottom()) / 2;

        int radius = tv.getWidth();

        Animator anim = ViewAnimationUtils.createCircularReveal(tv, a, b, 0, radius);

        anim.start();





    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        return super.onCreateOptionsMenu(menu);
    }
}

It's still early days so I can't really find any answers about this. Any ideas?

Answer 1

You're getting the error because the view you passed in hasn't been measured and laid out on the screen yet. ViewAnimationUtils.createCircularReveal needs the target view to be measured to calculate the animation. You'll also find that your variables a and b are always 0.

If you want to experiment, create the animation and start it within a button click listener. Here's an example using your code:

Button button = (Button) findViewById(R.id.your_button);
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        TextView tv = (TextView) findViewById(R.id.text);

        int a = (tv.getLeft() + tv.getRight()) / 2;
        int b = (tv.getTop() + tv.getBottom()) / 2;

        int radius = tv.getWidth();

        Animator anim = ViewAnimationUtils.createCircularReveal(tv, a, b, 0, radius);

        anim.start();
    }
});

Answer 2

You can use Runnable to do the animation. The Runnable will run after the view's creation. No need to post delay.

view.post(new Runnable()
{ 
       @Override 
       public void run(){ 
           //create your anim here
       } 
});

Answer 3

Or you can do this.

 tv.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            if (android.os.Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                tv.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            } else {
                tv.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            }
            Animator anim = ViewAnimationUtils.createCircularReveal(tv, a, b, 0, radius);
            anim.start();
        }
    });

Adding GlobalLayoutListener to wait for the view to be inflated worked for me.