Android layout overlay tobe uses instead of Toast

Question

I managed to have a relative layout with an image in the middle over a constraint layout - this image should be shown instead of a Toast-Message (fade in => fade out)

When the app starts - just to prove that it works - it shows that image from the XML settings (thumb up / visibility).

Now I want to use the following function to change the image:

  public void showThumbs(Integer like){
    if (like > 0){
        overlayout.bringToFront();
        overlay.setImageResource(R.drawable.like);
        overlay.bringToFront();
        overlay.animate().alpha(1.0f).setDuration(800);
        overlay.animate().alpha(0.0f).setDuration(800);
    }
    if (like < 0){
        overlayout.bringToFront();
        overlay.setImageResource(R.drawable.dislike);
        overlay.bringToFront();
        overlay.animate().alpha(1.0f).setDuration(800);
        overlay.animate().alpha(0.0f).setDuration(800);
    }
}

I tried to work with visibility which did not work and now I tried the animation fader.

What happens is this:

At the beginning it shows the thumb up as set in the XML-layout itself - OK

When I set like to a negative value it changes the image and fades it out

When I set like to a positive value it uses the thumbs up and fades it out

But it only works fades the image the first time and only the fade out part. As soon as it is gone I can call this function again an again and it will not show any picture anymore.

Any idea where my mistake is?

It should work like a Toast-Message (Fade in => Fade out).

IvBaranov · Accepted Answer · 2017-06-07T12:47:18.427

First of all there should be else between if statements. So you should have if( ){ } else { } instead of if( ) { } if( ) { }

Secondly, this line makes your image invisible permanently:

overlay.animate().alpha(0.0f).setDuration(800);

To make it work you should "chain" you animations. First option is:

if (isLiked) {
    overlay.setImageResource(R.drawable.like);
    // overlay is invisible by default
    overlay.animate()
        .alpha(1.0f)
        .setListener(new AnimatorListenerAdapter() {
          @Override
          public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            overlay.animate().alpha(0.0f).setDuration(800);
          }
        }).setDuration(800);
} else {
    //... 
}

Another option is using AnimatorSet.

ObjectAnimator fadeOut = ObjectAnimator.ofFloat(overlay, "alpha",  1f, 0f);
fadeOut.setDuration(800);
ObjectAnimator fadeIn = ObjectAnimator.ofFloat(overlay, "alpha", 0f, 1f);
fadeIn.setDuration(800);

final AnimatorSet mAnimationSet = new AnimatorSet();

mAnimationSet.play(fadeOut).after(fadeIn);
mAnimationSet.start();

It should work like a Toast-Message: Fade the picture in and fade it out again - I will give your solution a try — Kev, Jun 07 '17 at 12:25
Thanks a lot!!! I went for the first solution since it was clearer to me how it works ;-) BTW the else I did not change since in case like=0 I do not want any animation. — Kev, Jun 07 '17 at 12:54
@Kev I just wanted to point out some good practice, see also: https://stackoverflow.com/a/9169267/2459628 — IvBaranov, Jun 07 '17 at 13:00

Android layout overlay tobe uses instead of Toast

1 Answers1