Why Consecutive Animations Intertwine Each Other?

Question

I want to create animations for a reflex test app. Targets I call, are buttons that users can click in 500ms to get a score point. I want my targets to fade in (250ms) and fade out after (250ms). But when I execute the code down below, all of the targets (Button) starts to fade in and out after some time. I am assuming the code can not make targets invisible correctly.

Any help would be appreciated.

Initialization of animations:

     animationFadeIn = AnimationUtils.loadAnimation(this, R.anim.fade_in_250ms);
     animationFadeOut = AnimationUtils.loadAnimation(this, R.anim.fade_out_250ms);

Method: (tempeRand is for not choosing the last target.)

    private void hideTargs() {
        Random rand = new Random();
        int randTarget = rand.nextInt(12);

        Animation.AnimationListener animListener = new Animation.AnimationListener(){
            int randTargetIn = randTarget;

            @Override
            public void onAnimationStart(Animation animation) {
                if (animation == animationFadeIn){
                    buttonArray[randTargetIn].setVisibility(View.VISIBLE);
                }
            }

            @Override
            public void onAnimationRepeat(Animation animation) { }

            @Override
            public void onAnimationEnd(Animation animation) {
                if (animation == animationFadeIn) {
                    buttonArray[randTargetIn].startAnimation(animationFadeOut);
                } else if (animation == animationFadeOut) {
                    buttonArray[randTargetIn].setVisibility(View.INVISIBLE);
                    int temperRand = 0;
                    boolean isDifferentRandom = false;
                    while (!isDifferentRandom){
                        temperRand = rand.nextInt(12);
                        if (temperRand != randTargetIn)
                            isDifferentRandom = true;
                    }
                    randTargetIn = temperRand;
                    buttonArray[temperRand].startAnimation(animationFadeIn);
                }
            }
        };

        // Set listener to animation
        animationFadeIn.setAnimationListener(animListener);
        animationFadeOut.setAnimationListener(animListener);

        // Start fade-in animation
        buttonArray[randTarget].startAnimation(animationFadeIn);
    }

fade_in_250ms.xml

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
        android:fillAfter="true" >
    
        <alpha
            android:duration="250"
            android:fromAlpha="0.0"
            android:interpolator="@android:anim/accelerate_interpolator"
            android:toAlpha="1.0" />
    
    </set>

fade_out_250ms.xml

    <?xml version="1.0" encoding="utf-8"?>
        <set xmlns:android="http://schemas.android.com/apk/res/android"
            android:fillAfter="true" >
        
            <alpha
                android:duration="250"
                android:fromAlpha="1.0"
                android:interpolator="@android:anim/accelerate_interpolator"
                android:toAlpha="0.0" />
        
        </set>

It should be one target visible at a time. But result is this.

Answer 1

In case someone wants to use this method, here is the answer to the question:

This flickering and unwanted animation on multiple Views:

happens because we never stopped or cleared the animation for the last View. Now I added .setAnimation(null) to clear the animations.

Updated code:

private void hideTargs(){
    Random rand = new Random();
    int randTarget = rand.nextInt(12);

    Animation.AnimationListener animListener = new Animation.AnimationListener(){
        int randTargetIn = randTarget;

        @Override
        public void onAnimationStart(Animation animation) {
            if (animation == animationFadeIn){
                buttonArray[randTargetIn].setVisibility(View.VISIBLE);
            }
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            if (animation == animationFadeIn) {
                buttonArray[randTargetIn].setAnimation(null);
                buttonArray[randTargetIn].startAnimation(animationFadeOut);
            } else if (animation == animationFadeOut) {
                buttonArray[randTargetIn].setAnimation(null);
                buttonArray[randTargetIn].setVisibility(View.INVISIBLE);
                int temperRand = 0;
                boolean isDifferentRandom = false;
                while (!isDifferentRandom){
                    temperRand = rand.nextInt(12);
                    if (temperRand != randTargetIn)
                        isDifferentRandom = true;
                }
                randTargetIn = temperRand;
                buttonArray[randTargetIn].startAnimation(animationFadeIn);
            }
        }
    };

    // Set listener to animation
    animationFadeIn.setAnimationListener(animListener);
    animationFadeOut.setAnimationListener(animListener);

    // Start fade-in animation
    buttonArray[randTarget].startAnimation(animationFadeIn);

}