Android Fade In, Fade Out animation issue

Question

I am trying to create a simple program that has a button and a hidden button directly below it. When the user clicks on the first button, the second button appears using a smooth animation. When the user clicks the first button again, the second button smoothly disappears, etc. I am using an Alpha Animation to animate the appearing and disappearing actions, but I am running into the following issue:

The first time I click the button, nothing happens. When I click the button again, it appears and then disappears instantly. When I click the button a third time, it smoothly animates the "fade-in" motion. And then when I click it a fourth time, it smoothly animates the "fade-out" motion, etc...

Below is the code in this simple program:

public class MainActivity extends AppCompatActivity {
public Button toggleButton;
public Button helloButton;
public boolean isVisible = false;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    helloButton = (Button)findViewById(R.id.helloButton);

    toggleButton = (Button)findViewById(R.id.toggleButton);
    toggleButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (!isVisible) {
                //helloButton.setVisibility(View.VISIBLE);
                AlphaAnimation fadeInAnimation = new AlphaAnimation(0, 1); // start alpha, end alpha
                fadeInAnimation.setDuration(250); // time for animation in milliseconds
                fadeInAnimation.setFillAfter(true); // make the transformation persist
                fadeInAnimation.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationEnd(Animation animation) {
                        helloButton.setVisibility(View.VISIBLE);
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) { }

                    @Override
                    public void onAnimationStart(Animation animation) {
                        helloButton.setVisibility(View.GONE);
                    }
                });
                helloButton.startAnimation(fadeInAnimation);
                isVisible = true;
                System.out.println("Button is invisible... Time to Fade IN");
            }
            else {
                //helloButton.setVisibility(View.GONE);
                AlphaAnimation fadeOutAnimation = new AlphaAnimation(1, 0); // start alpha, end alpha
                fadeOutAnimation.setDuration(250); // time for animation in milliseconds
                fadeOutAnimation.setFillAfter(true); // make the transformation persist
                fadeOutAnimation.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationEnd(Animation animation) {
                        helloButton.setVisibility(View.GONE);
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) { }

                    @Override
                    public void onAnimationStart(Animation animation) {
                        helloButton.setVisibility(View.VISIBLE);
                    }
                });
                helloButton.startAnimation(fadeOutAnimation);
                isVisible = false;
                System.out.println("Button is visible... Time to Fade OUT");
            }
        }
    });

  }
}

I feel like this is something very simple; however, this is the first time I have ever encountered animations in android development. Any suggestions and advice would greatly be appreciated!

Answer 1

You don't need the variable isVisible, just check if the button is visible or not.
To see the fadeInAnimation first you need to make the view VISIBLE.

Also I changed the duration of both animations, check this code:

helloButton = findViewById(R.id.helloButton);
toggleButton = findViewById(R.id.toggleButton);
toggleButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        if (helloButton.getVisibility() == View.GONE) {
            AlphaAnimation fadeInAnimation = new AlphaAnimation(0, 1);
            fadeInAnimation.setDuration(2500); 
            fadeInAnimation.setFillAfter(true);
            fadeInAnimation.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationEnd(Animation animation) {
                }

                @Override
                public void onAnimationRepeat(Animation animation) { }

                @Override
                public void onAnimationStart(Animation animation) {
                    helloButton.setVisibility(View.VISIBLE);
                }
            });
            helloButton.startAnimation(fadeInAnimation);
        } else {
            AlphaAnimation fadeOutAnimation = new AlphaAnimation(1, 0); 
            fadeOutAnimation.setDuration(2500); 
            fadeOutAnimation.setFillAfter(true); 
            fadeOutAnimation.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationEnd(Animation animation) {
                    helloButton.setVisibility(View.GONE);
                }

                @Override
                public void onAnimationRepeat(Animation animation) { }

                @Override
                public void onAnimationStart(Animation animation) {
                }
            });
            helloButton.startAnimation(fadeOutAnimation);
        }
    }
});