Fade in Fade Out Android Animation in Java

Fade In Fade Out Android Animation in Java

Figured out my own problem. The solution ended up being based in interpolators.

Animation fadeIn = new AlphaAnimation(0, 1);
fadeIn.setInterpolator(new DecelerateInterpolator()); //add this
fadeIn.setDuration(1000);

Animation fadeOut = new AlphaAnimation(1, 0);
fadeOut.setInterpolator(new AccelerateInterpolator()); //and this
fadeOut.setStartOffset(1000);
fadeOut.setDuration(1000);

AnimationSet animation = new AnimationSet(false); //change to false
animation.addAnimation(fadeIn);
animation.addAnimation(fadeOut);
this.setAnimation(animation);

If you are using Kotlin

val fadeIn = AlphaAnimation(0f, 1f)
fadeIn.interpolator = DecelerateInterpolator() //add this
fadeIn.duration = 1000

val fadeOut = AlphaAnimation(1f, 0f)
fadeOut.interpolator = AccelerateInterpolator() //and this
fadeOut.startOffset = 1000
fadeOut.duration = 1000

val animation = AnimationSet(false) //change to false
animation.addAnimation(fadeIn)
animation.addAnimation(fadeOut)
this.setAnimation(animation)

Android animation fade in / fade out is not setting the visibility of the view in the callback function

remove this line may help u

android:visibility="gone"

visibility is gone that's why your view is not visible

    android:visibility="gone"

Android making a button fade in and out continuously

You can do this:

private void fadeIn() {
    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(mButton, "alpha", 0f, 1f);
    objectAnimator.setDuration(500L);
    objectAnimator.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            fadeOut();
        }
    });
    objectAnimator.start();
}

private void fadeOut() {
    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(mButton, "alpha", 1f, 0f);
    objectAnimator.setDuration(500L);
    objectAnimator.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            fadeIn();
        }
    });
    objectAnimator.start();
}

You can improve by consolidating both methods into a single one by keeping track of the state (fading in, fading out). You should also add a function to cancel the animation (you can return the animator from these functions and then call cancel on it).

Edit: to cancel, you can do this - create a member variable that holds your current animator, then simply can cancel on it:

private ObjectAnimator objectAnimator;

private void fadeOut() {
    objectAnimator = ObjectAnimator.ofFloat(mButton, "alpha", 1f, 0f);
    objectAnimator.setDuration(500L);
    objectAnimator.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            fadeIn();
        }
    });
    objectAnimator.start();
}

private void cancelAnimator() {
    if (objectAnimator != null) {
        objectAnimator.cancel();
        objectAnimator = null;
    }
}

How to loop the fade in and fade out animation for multiple images?

Add a count variable and use this variable in onAnimationEnd() to change image when previous image animation ends.

Here is the working code:

{
    final ImageView image = (ImageView)findViewById(R.id.imageView2);
    final Animation animationFadeIn = AnimationUtils.loadAnimation(this, R.anim.fade_in);
    final Animation animationFadeOut = AnimationUtils.loadAnimation(this, R.anim.fade_out);

    Animation.AnimationListener animListener = new Animation.AnimationListener(){

        // Required to change the image
        int count = 0;

        @Override
        public void onAnimationStart(Animation animation) {
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {

            if (animation == animationFadeIn) {

                // Start fade-out animation
                image.startAnimation(animationFadeOut);

            } else if (animation == animationFadeOut) {

                count++;

                // Set next image after fading out previous image
                switch (count) {
                    case 1:
                        image.setImageResource(R.drawable.picture002);
                        image.startAnimation(animationFadeIn);
                        break;
                    case 2:
                        image.setImageResource(R.drawable.picture003);
                        image.startAnimation(animationFadeIn);
                        break;
                    case 3:
                        image.setImageResource(R.drawable.picture004);
                        image.startAnimation(animationFadeIn);
                        break;
                    default:
                        break;
                }
            }
        }
    };

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

    // Start fade-in animation
    image.setImageResource(R.drawable.picture001);
    image.startAnimation(animationFadeIn);

}

activity.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

fade_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >

    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0" />

</set>

fade_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >

    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="0.0" />

</set>

Hope this will help~

How to make a single TextView fade in and out with new text

To use a single TextView for the fade in and fade out animation you have to create two different Runnable End Actions one for fadeInEndAction and one for fadeOutEndAction and from each Runnable get the correct ViewPropertyAnimator to start the fade in or fade out.

Based on your example you can achieve this effect using a single TextView like below:

TextView tv;
String[] stringMessages = {"Welcome", "How are you?", "How old are you?"};
int i = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_layout);

    tv = findViewById(R.id.textView);
    setText();
    getFadeOutViewPropertyAnimator().start();
}

private ViewPropertyAnimator getFadeInViewPropertyAnimator(){
    return tv.animate().alpha(1).setDuration(1000).setStartDelay(2000).withEndAction(fadeInEndAction);
}

private ViewPropertyAnimator getFadeOutViewPropertyAnimator(){
    return tv.animate().alpha(0).setDuration(1000).setStartDelay(2000).withEndAction(fadeOutEndAction);
}

private final Runnable fadeInEndAction = new Runnable() {
    @Override
    public void run() {
        //no more strings to show stop the fade-in/out loop here
        if(i == stringMessages.length){
            return;
        }
        getFadeOutViewPropertyAnimator().start();
    }
};

private final Runnable fadeOutEndAction = new Runnable() {
    @Override
    public void run() {
        setText();
        getFadeInViewPropertyAnimator().start();
    }
};

private void setText(){
    tv.setText(stringMessages[i++]);
}

Result:

---

Related Topics