Animation in Android for image transition

Question

I have twenty images and do transition one after another. Transition is implemented in the following loop together with a timer.

    final Runnable mUpdateResults = new Runnable() {
        public void run() {
            AnimateandSlideShow();
        }
    };

    final int delay = 2000; 
    final long period = 2000;
    final Timer timer = new Timer();
    final Handler mHandler = new Handler();

    timer.scheduleAtFixedRate(new TimerTask() {
        public void run() {
             mHandler.post(mUpdateResults);
        }
    }, delay, period);

    private void AnimateandSlideShow() {
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), IMAGE_IDS[currentimageindex%IMAGE_IDS.length]);
        slidingimage = (ImageView)findViewById(R.id.mainImageView);
        int imViewheight = 400;
        int imViewwidth = 600;
        Bitmap scaledBitmap = Bitmap.createScaledBitmap(bitmap, imViewwidth, imViewheight, true);              
        slidingimage.setImageBitmap(convertColorIntoBlackAndWhiteImage(scaledBitmap));
        currentimageindex++; 

        slidingimage.startAnimation(fadeInAnimation);
        slidingimage.startAnimation(fadeOutAnimation);
    }

I like to do transition fade in, display for 1000ms, fade out. It is implemented as

    Animation fadeOutAnimation = new AlphaAnimation(1.0f, 0.0f);
    Animation fadeInAnimation = new AlphaAnimation(0.0f, 1.0f);
    fadeInAnimation.setDuration(2000);
    fadeOutAnimation.setDuration(2000);

Now what is happening is only fade in or fade out. Only one of them. How can I make such that the image fade in first, then display for 1000ms and fade out.

Answer 1

I can achieve it using AnimationSet, like the following:

animationSet.addAnimation(fadeInAnimation);
animationSet.addAnimation(fadeOutAnimation);
fadeInAnimation.setDuration(2000);
fadeInAnimation.setStartOffset(0);
fadeOutAnimation.setDuration(2000);
fadeOutAnimation.setStartOffset(2000 + 1000);

slidingImage.startAnimation(animationSet);

Looks like current timer logic is a bit complex for the task You're trying to complete. I would suggest to rely on animation for timing (below is just a draft code):

ImageView slidingImage;
final static int[] IMAGE_IDS = new int[] {
        // some ids
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
        R.drawable.ic_launcher,
};

int currentImageIndex = 0;

final Animation.AnimationListener animationListener = new Animation.AnimationListener() {
    @Override
    public void onAnimationStart(final Animation animation) {
        // nothing to do here
    }

    @Override
    public void onAnimationEnd(final Animation animation) {
        // launch showing of next image on the end of the animation
        animateAndSlideShow();
    }

    @Override
    public void onAnimationRepeat(final Animation animation) {
        // nothing to do here
    }
};

private void animateAndSlideShow() {
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), IMAGE_IDS[currentImageIndex % IMAGE_IDS.length]);

    slidingImage = (ImageView)findViewById(R.id.mainImageView);
    int imViewheight = 400;
    int imViewwidth = 600;
    Bitmap scaledBitmap = Bitmap.createScaledBitmap(bitmap, imViewwidth, imViewheight, true);
    //slidingImage.setImageBitmap(convertColorIntoBlackAndWhiteImage(scaledBitmap));
    slidingImage.setImageBitmap(bitmap);
    currentImageIndex++;

    // TODO: it's not needed to create new AnimationSet every time.
    final AnimationSet animationSet = new AnimationSet(true);
    final Animation fadeOutAnimation = new AlphaAnimation(1.0f, 0.0f);
    final Animation fadeInAnimation = new AlphaAnimation(0.0f, 1.0f);

    animationSet.addAnimation(fadeInAnimation);
    animationSet.addAnimation(fadeOutAnimation);
    fadeInAnimation.setDuration(2000);
    fadeInAnimation.setStartOffset(0);
    fadeOutAnimation.setDuration(2000);
    fadeOutAnimation.setStartOffset(2000 + 1000);

    animationSet.setAnimationListener(animationListener);
    slidingImage.startAnimation(animationSet);
}

Answer 2

try like that

fadein.xml

<?xml version="1.0" encoding="UTF-8"?>
       <set xmlns:android="http://schemas.android.com/apk/res/android">
         <alpha android:fromAlpha="0.0" android:toAlpha="1.0" 
          android:interpolator="@android:anim/accelerate_interpolator" 
          android:duration="2000"/>
     </set>

fadeout.xml

<?xml version="1.0" encoding="UTF-8"?>
       <set xmlns:android="http://schemas.android.com/apk/res/android">
         <alpha android:fromAlpha="1.0" android:toAlpha="0.0" 
          android:interpolator="@android:anim/accelerate_interpolator" 
          android:duration="2000"/>
     </set>

and load the animation like that

    Animation fadeInAnimation = AnimationUtils.loadAnimation(this, R.anim.your_fade_in_anim);
   Animation fadeoutAnimation = AnimationUtils.loadAnimation(this, R.anim.your_fade_out_anim);
   imageView.startAnimation(fadeinAnim);
    imageView.startAnimation(fadeoutAnim);