Android - Animated ImageView with fading

Question

I have created the following method to animate multiple images in a single ImageView. My problem is that the image transitions are abrupt, so what I would now like to do is make it so that the images fade from one to the next.

So how could I achieve that (without creating additional images)?

protected static void setAnimatedImagesForImageView(Context context, ImageView imageView, Uri[] imageUris, int durationMillis) {

    AnimationDrawable animation = new AnimationDrawable();
    boolean imageAdded = false;
    Drawable drawable;
    for (int i = 0; i < imageUris.length; i++) {
        if (imageUris[i] != null) {
            drawable = getDrawable(context, imageUris[i]);
            if (drawable != null) {
                animation.addFrame(drawable, durationMillis);
                imageAdded = true;
            }
        }
    }
    if (imageAdded) {
        animation.setOneShot(false);
        imageView.setImageDrawable(animation);
        animation.start();
    }

}

public static Drawable getDrawable(Context context, Uri drawableUri) {

    if (drawableUri == null) {
        return null;
    }
    else {
        try {
            InputStream inputStream = context.getContentResolver().openInputStream(drawableUri);
            return Drawable.createFromStream(inputStream, drawableUri.toString());
        } catch (Exception e) {
            Log.e(LOG_TAG, "Could not get Drawable for Uri", e);
            return null;
        }
    }

}

score 1 · Answer 1 · edited Jun 13 '17 at 10:36

The problem is that you are loading all images all together and not giving delay between them to show the animation. Put this method in your class and call it for your first image manually "loadImage(images[0]);", here images is an array containing all your images:

public void loadImage(int position) {

    Animation a = new AlphaAnimation(1.00f, 0.00f);

    a.setDuration(1000);
    a.setAnimationListener(new AnimationListener() {

        public void onAnimationStart(Animation animation) {

            // TODO Auto-generated method stub

        }

        public void onAnimationRepeat(Animation animation) {

            // TODO Auto-generated method stub

        }

        public void onAnimationEnd(Animation animation) {

            yourView.setBackgroundResource(images[position]);

            // Call your new created method again for your next image here.

            if(position < images.length() -1) {
                loadImage(position + 1);
            }

        }

    });

    yourView.startAnimation(a);

}

I hope it will work for you!

ban-geoengineering · Answer 2 · 2017-06-13T10:52:52.213

I found quite a simply solution in the end - by adding:

animation.setEnterFadeDuration(fadeImageDurationMillis);
animation.setExitFadeDuration(fadeImageDurationMillis);

So my initial method is now:

protected static void setAnimatedImagesForImageView(final Context context, ImageView imageView, Uri[] imageUris, int showImageDurationMillis, int fadeImageDurationMillis) {

    AnimationDrawable animation = new AnimationDrawable();
    animation.setEnterFadeDuration(fadeImageDurationMillis);
    animation.setExitFadeDuration(fadeImageDurationMillis);

    boolean imageAdded = false;
    for (int i = 0; i < imageUris.length; i++) {
        if (imageUris[i] != null) {
            Drawable drawable = getDrawable(context, imageUris[i]);
            animation.addFrame(drawable, showImageDurationMillis);
            imageAdded = true;
        }
    }

    if (imageAdded) {
        animation.setOneShot(false);
        imageView.setImageDrawable(animation);
        animation.start();
    }

}

Android - Animated ImageView with fading

2 Answers2