Animation code starts before first animation is complete

Question

I've tried setting up a simple coin flip animation for a coin flip activity. Therefore, I created two drawables (coin_heads and coin_tails) and set up this piece of code. I'm creating a random value and afterwards I'm having a simple if-statement to deceide whether heads or tails should appear. Depending on that the drawable will be replaced. I already got to know that whenever you replace the drawable with yourobject.setImageDrawable(ContextCompat.getDrawable(this,drawable)); its rotation, scale etc. are being reseted (that's why I want to set the rotation and alpha to the values I animated it to before).

I thought it'd be easier to use the animate() method instead of XML-arguments, that's why I have a problem right now. Whenever I try to run this, it skips my first lines of

cimg.setAlpha(1f);
        cimg.animate().alphaBy(-1f).setDuration(800);

So, to describe what happens: As soon as I press my button to flip the coin, the Image's alpha is being set to 0 immediately and then animated backwards to 1 in time of 800ms. But I want it to animate to Alpha=0 in 800ms first and then animate it to 1 in 800ms again.

Here is the code of the flip method (I've commented out a lot while debugging):

public void flip(View view) {
        TextView coin = (TextView) findViewById(R.id.coinField);
        ImageView cimg = (ImageView) findViewById(R.id.coinimage);


        double flip1 = Math.random();

        //start of animation
        //cimg.animate().scaleXBy(4f).setDuration(1000);
        //cimg.animate().scaleYBy(4f).setDuration(1000);
        //cimg.animate().rotationBy(180f).setDuration(1000);

//first animation
        cimg.setAlpha(1f);
        cimg.animate().alphaBy(-1f).setDuration(800);

//final animation

        if (flip1>=0.5) {
            coin.setText(R.string.heads);
            cimg.setImageDrawable(ContextCompat.getDrawable(this,R.drawable.coin_heads));
            //cimg.setRotation(180f);
            cimg.setAlpha(0f);
            cimg.animate().alpha(1f).setDuration(800);


            //cimg.animate().rotationBy(180f).setDuration(1000);
            //cimg.animate().scaleXBy(0.25f).setDuration(1000);
            //cimg.animate().scaleYBy(0.25f).setDuration(1000);
        }
        else {
            coin.setText(R.string.tails);
            cimg.setImageDrawable(ContextCompat.getDrawable(this,R.drawable.coin_tails));
            //cimg.setRotation(180f);
            cimg.setAlpha(0f);
            cimg.animate().alpha(1f).setDuration(800);
            //cimg.animate().rotationBy(180f).setDuration(1000);
            //cimg.animate().scaleXBy(0.25f).setDuration(1000);
            //cimg.animate().scaleYBy(0.25f).setDuration(1000);
        }


    }

I would be very happy if anybody has a solution for this as I have been struggling with this for hours now. I also tried to use Thread.sleep(1000) to ensure the animation is completed, but when doing so, it still skips the first animation, waits 1 second, and then does it's thing as usual.

Edit:

I've set it up like this. Now, when I press my button, nothing happens:

    public void flip(View view) {
        final TextView coin = (TextView) findViewById(R.id.coinField);
        final ImageView cimg = (ImageView) findViewById(R.id.coinimage);

        final double flip1 = Math.random();

        Animation anim = new Animation() {
            @Override
            protected Animation clone() throws CloneNotSupportedException {
                cimg.setAlpha(1f);
                cimg.animate().alpha(0f).setDuration(800);
                return super.clone();
            }
        };


        final Animation anim2 = new Animation() {
            @Override
            protected Animation clone() throws CloneNotSupportedException {
                if (flip1>=0.5) {
                    coin.setText(R.string.heads);
                    cimg.setImageDrawable(getDrawable(R.drawable.coin_heads));
                    cimg.setAlpha(0f);
                    cimg.animate().alpha(1f).setDuration(800);

                }
                else {
                    coin.setText(R.string.tails);
                    cimg.setImageDrawable(getDrawable(R.drawable.coin_tails));
                    //cimg.setRotation(180f);
                    cimg.setAlpha(0f);
                    cimg.animate().alpha(1f).setDuration(800);
                }
                return super.clone();
            }
        };

        anim2.setAnimationListener(null);


        Animation.AnimationListener list = new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                anim2.start();
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }



        };

        anim.setAnimationListener(list);
    }

Answer 1

Use an animation listener to start your second animation after the first one ends:

    final Animation anim = new SomeTypeOfAnimation();
    anim.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {
             //Start your other animation here...
        }
    });