Animate Alpha ImageView Fade In Fade Out

Question

In the observe method of a view model, a new Observer is listening for an API response which is working correctly. However based on the response, it is calling the following code to show a success or failure image.

This code is inside its own method, called each time that the image should be shown:

1. I can only get the image to show once, subsequent method calls do not show any image, even though during debugging we are reaching every line.

2. The imageView box is correctly aligned in the XML and set to gone initially. (Tried invisible too).

        imageView.setVisibility(View.VISIBLE);
   
        //Fade in
        imageView.animate().alpha(1).setDuration(1000);
   
        if(!successful) {
            imageView.setImageDrawable(getResources().getDrawable(R.drawable.failed_img));
        } else {
            imageView.setImageDrawable(getResources().getDrawable(R.drawable.success_img));
        }
   
        //Fade out
        imageView.animate().alpha(0).setDuration(1500).setStartDelay(1000);
   

Answer 1

I find your second animation effects the first animation. You can see below, the second animation should wait the fist animation finished.

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    lifecycleScope.launch {
        for (i in 0 until 10) {
            changeView()

            withContext(Dispatchers.IO) {
                delay(10_000)
            }
        }
    }
}

private fun changeView() {
    binding.apply {
        // avoid abruptly appears
        imageView.alpha = 0f

        imageView.isVisible = true
        imageView.animate()
            .alpha(1f)
            .setDuration(3000)
            .start()

        /**
         * IMPORTANT:
         *  You should wait the first animation finished,
         *  then start the second animation.
         *  Because imageView.animate() method return the SAME Object.
         *
         *  You can add a delay to wait the first animation finished.
         *  If you don't add a delay, the second config will effect the first animation.
         */
        lifecycleScope.launch {
            delay(3000)
            imageView.animate()
                .alpha(0f)
                .setDuration(2000)
                .start()
        }
    }
}

Answer 2

Simply does not appear again, possibly because under the hood, it called onAnimationRepeat when called the second time. So the best solution was to use an Animation class directly in this instance. If anybody can answer why the original code does not work, I would be very interested in learning why.

    Animation a = new AlphaAnimation(1.00f, 0.00f);

    a.setDuration(3000);
    a.setAnimationListener(new Animation.AnimationListener() {

        public void onAnimationStart(Animation animation) {
            // TODO Auto-generated method stub

        }

        public void onAnimationRepeat(Animation animation) {
            // TODO Auto-generated method stub

        }

        public void onAnimationEnd(Animation animation) {
            imageView.setVisibility(View.GONE);

        }
    });

    imageView.startAnimation(a);