Android fade in and fade out with ImageView

Question

I m having some troubles with a slideshow I m building   I ve created 2 animations in xml for fade in and fade out   fadein xml       lt  xml version  1 0  encoding  UTF-8   gt          lt set xmlns android  http   schemas android com apk res android  gt            lt alpha android fromAlpha  0 0  android toAlpha  1 0             android interpolator   android anim accelerate interpolator             android duration  2000   gt        lt  set gt    fadeout xml       lt  xml version  1 0  encoding  UTF-8   gt          lt set xmlns android  http   schemas android com apk res android  gt            lt alpha android fromAlpha  1 0  android toAlpha  0 0             android interpolator   android anim accelerate interpolator             android duration  2000   gt        lt  set gt    What Im trying to do  is to change images from an ImageView using the fade effect  so the currently displayed image will fade out  and another one will fade in  Considering that I have an image already set  I can fadeout this Image without problem  with this       Animation fadeInAnimation   AnimationUtils loadAnimation this  R anim your fade in anim       imageView startAnimation fadeoutAnim     But then  I set the next image to be displayed       imageView setImageBitmap secondImage     It just shows up in the imageView  and when i set the animation it hides the image  the fade it in    Is there any way to fix that  I mean  when I do imageView setImageBitmap secondImage   command  the image do not shows up immediately  and only when the fade in animation is executed

User · Answer

you can do it by two simple point and change in your code

1.In your xml in anim folder of your project, Set the fade in and fade out duration time not equal

2.In you java class before the start of fade out animation, set second imageView visibility Gone then after fade out animation started set second imageView visibility which you want to fade in visible

fadeout.xml

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

fadein.xml

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

In you java class

Animation animFadeOut = AnimationUtils.loadAnimation(this, R.anim.fade_out);
    ImageView iv = (ImageView) findViewById(R.id.imageView1);
    ImageView iv2 = (ImageView) findViewById(R.id.imageView2);
    iv.setVisibility(View.VISIBLE);
    iv2.setVisibility(View.GONE);
    animFadeOut.reset();
    iv.clearAnimation();
    iv.startAnimation(animFadeOut);

    Animation animFadeIn = AnimationUtils.loadAnimation(this, R.anim.fade_in);
    iv2.setVisibility(View.VISIBLE);
    animFadeIn.reset();
    iv2.clearAnimation();
    iv2.startAnimation(animFadeIn);

User · Answer

Have you thought of using TransitionDrawable instead of custom animations  https   developer android com reference android graphics drawable TransitionDrawable html  One way to achieve what you are looking for is      create the transition layers Drawable   layers   new Drawable 2   layers 0    new BitmapDrawable getResources    firstBitmap   layers 1    new BitmapDrawable getResources    secondBitmap    TransitionDrawable transitionDrawable   new TransitionDrawable layers   imageView setImageDrawable transitionDrawable   transitionDrawable startTransition FADE DURATION

User · Answer

I wanted to achieve the same goal as you  so I wrote the following method which does exactly that if you pass it an ImageView and a list of references to image drawables   ImageView demoImage    ImageView  findViewById R id DemoImage   int imagesToShow       R drawable image1  R drawable image2 R drawable image3     animate demoImage  imagesToShow  0 false          private void animate final ImageView imageView  final int images    final int imageIndex  final boolean forever         imageView  lt -- The View which displays the images     images    lt -- Holds R references to the images to display     imageIndex  lt -- index of the first image to show in images        forever  lt -- If equals true then after the last image it starts all over again with the first image resulting in an infinite loop  You have been warned       int fadeInDuration   500     Configure time values here     int timeBetween   3000      int fadeOutDuration   1000       imageView setVisibility View INVISIBLE        Visible or invisible by default - this will apply when the animation ends     imageView setImageResource images imageIndex         Animation fadeIn   new AlphaAnimation 0  1       fadeIn setInterpolator new DecelerateInterpolator        add this     fadeIn setDuration fadeInDuration        Animation fadeOut   new AlphaAnimation 1  0       fadeOut setInterpolator new AccelerateInterpolator        and this     fadeOut setStartOffset fadeInDuration   timeBetween       fadeOut setDuration fadeOutDuration        AnimationSet animation   new AnimationSet false      change to false     animation addAnimation fadeIn       animation addAnimation fadeOut       animation setRepeatCount 1       imageView setAnimation animation        animation setAnimationListener new AnimationListener             public void onAnimationEnd Animation animation                if  images length - 1  gt  imageIndex                    animate imageView  images  imageIndex   1 forever     Calls itself until it gets to the end of the array                           else                   if  forever                   animate imageView  images  0 forever      Calls itself to start the animation all over again in a loop if forever   true                                                   public void onAnimationRepeat Animation animation                   TODO Auto-generated method stub                   public void onAnimationStart Animation animation                   TODO Auto-generated method stub

User · Answer

To implement this the way you have started  you ll need to add an AnimationListener so that you can detect the beginning and ending of an animation  When onAnimationEnd   for the fade out is called  you can set the visibility of your ImageView object to View INVISIBLE  switch the images and start your fade in animation - you ll need another AnimationListener here too  When you receive onAnimationEnd   for your fade in animation  set the ImageView to be View VISIBLE and that should give you the effect you re looking for   I ve implemented a similar effect before  but I used a ViewSwitcher with 2 ImageViews rather than a single ImageView  You can set the  in  and  out  animations for the ViewSwitcher with your fade in and fade out so it can manage the AnimationListener implementation  Then all you need to do is alternate between the 2 ImageViews   Edit  To be a bit more useful  here is a quick example of how to use the ViewSwitcher  I have included the full source at https   github com aldryd imageswitcher   activity main xml       lt ViewSwitcher         android id    id switcher          android layout width  match parent          android layout height  wrap content          android layout alignParentTop  true          android layout centerHorizontal  true          android inAnimation   anim fade in          android outAnimation   anim fade out   gt            lt ImageView             android layout width  match parent              android layout height  wrap content              android scaleType  fitCenter              android src   drawable sunset    gt            lt ImageView             android layout width  match parent              android layout height  wrap content              android scaleType  fitCenter              android src   drawable clouds    gt       lt  ViewSwitcher gt    MainActivity java         Let the ViewSwitcher do the animation listening for you       ViewSwitcher  findViewById R id switcher   setOnClickListener new View OnClickListener               Override         public void onClick View v                ViewSwitcher switcher    ViewSwitcher  v               if  switcher getDisplayedChild      0                    switcher showNext                  else                   switcher showPrevious

User · Answer

I used used fadeIn animation to replace new image for old one  ObjectAnimator ofFloat imageView  View ALPHA  0 2f  1 0f  setDuration 1000  start

User · Answer

Based on Aladin Q s solution  here is a helper function that I wrote  that will change the image in an imageview while running a little fade out   fade in animation   public static void ImageViewAnimatedChange Context c  final ImageView v  final Bitmap new image            final Animation anim out   AnimationUtils loadAnimation c  android R anim fade out            final Animation anim in    AnimationUtils loadAnimation c  android R anim fade in            anim out setAnimationListener new AnimationListener                          Override public void onAnimationStart Animation animation                  Override public void onAnimationRepeat Animation animation                  Override public void onAnimationEnd Animation animation                                v setImageBitmap new image                    anim in setAnimationListener new AnimationListener                          Override public void onAnimationStart Animation animation                          Override public void onAnimationRepeat Animation animation                          Override public void onAnimationEnd Animation animation                                         v startAnimation anim in                                     v startAnimation anim out

User · Answer

For infinite Fade In and Out  AlphaAnimation fadeIn new AlphaAnimation 0 1    AlphaAnimation fadeOut new AlphaAnimation 1 0     final AnimationSet set   new AnimationSet false    set addAnimation fadeIn   set addAnimation fadeOut   fadeOut setStartOffset 2000   set setDuration 2000   imageView startAnimation set    set setAnimationListener new Animation AnimationListener          Override     public void onAnimationStart Animation animation           Override     public void onAnimationRepeat Animation animation           Override     public void onAnimationEnd Animation animation            imageView startAnimation set

User · Answer

This is probably the best solution you ll get  Simple and Easy  I learned it on udemy  Suppose you have two images having image id s id1 and id2 respectively and currently the image view is set as id1 and you want to change it to the other image everytime someone clicks in  So this is the basic code in MainActivity java File  int clickNum 0  public void click View view   clickNum    ImageView a  ImageView findViewById R id id1   ImageView b  ImageView findViewById R id id2   if clickNum 2  1     a animate   alpha 0f  setDuration 2000     alpha controls the transpiracy   else if clickNum 2  0     b animate   alpha 0f  setDuration 2000     alpha controls the transpiracy        I hope this will surely help

User · Answer

The best and the easiest way  for me was this    - Simply create a thread with Handler containing sleep      private ImageView myImageView   Override protected void onCreate Bundle savedInstanceState        super onCreate savedInstanceState       setContentView R layout activity shape count   myImageView   ImageView findViewById R id shape1       Animation myFadeInAnimation   AnimationUtils loadAnimation this  R anim fadein       myImageView startAnimation myFadeInAnimation        new Thread new Runnable             private Handler handler   new Handler                 Override             public void handleMessage Message msg                    Log w  hendler    recived                        Animation myFadeOutAnimation   AnimationUtils loadAnimation getBaseContext    R anim fadeout                       myImageView startAnimation myFadeOutAnimation                       myImageView setVisibility View INVISIBLE                                      Override         public void run                 try                  Thread sleep 2000      your fadein duration              catch  Exception e                             handler sendEmptyMessage 1                     start

User · Answer

I m using this kind of routine for programmatically chaining animations       final Animation anim out   AnimationUtils loadAnimation context  android R anim fade out        final Animation anim in    AnimationUtils loadAnimation context  android R anim fade in         anim out setAnimationListener new AnimationListener                  Override         public void onAnimationStart Animation animation               Override         public void onAnimationRepeat Animation animation               Override         public void onAnimationEnd Animation animation                                                                                HERE YOU CHANGE YOUR IMAGE CONTENT                                                                       ui image setImage                 anim in setAnimationListener new AnimationListener                                  Override                 public void onAnimationStart Animation animation                       Override                 public void onAnimationRepeat Animation animation                       Override                 public void onAnimationEnd Animation animation                                  ui image startAnimation anim in                          ui image startAnimation anim out

[android] Android fade in and fade out with ImageView

Examples related to android

Examples related to animation

Examples related to imageview

Examples related to fadein

Examples related to fadeout