Display ImagesViews with animation issue

Question

I want to display ImageViews in GridView using animation. I can display them and apply animation correctly.

But issue is that, if I apply animation on ImageView1 and then to ImageView2 (before animation on ImageView1 is ended) then animation on ImageView1 gets interrupted and ImageView1 is directly set to final state.

Note that I download image using ThreadPoolExecutor with 2 threads. Whenever an image is done downloading, I call addImage(image) method of below ImageAdapter which in turn adds image in GridView and GridView is refreshed to display latest set of images. And Here, while rendering, new image is displayed with animation and this animation(I guess) interrupts animation of currently animating images.

ImageAdapter :

public class ImageAdapter extends BaseAdapter {
    private Context mContext;
    private List<Bitmap> images;
    private ArrayList<Integer> colors;
    private boolean[] alreadyLoadedIndexes;
    Animation animation;
    AnimatorSet animator;

    public void addImage(Bitmap img) {
        images.add(img);
        notifyDataSetChanged();
    }

    public void setAnimation(Animation animation) {
        this.animator = null;
        this.animation = animation;
    }

    public void setAnimator(AnimatorSet animation) {
        this.animation = null;
        this.animator = animation;
    }

    public void resetImages() {
        images.clear();
        notifyDataSetChanged();
        alreadyLoadedIndexes = null;
        alreadyLoadedIndexes = new boolean[20];
    }

    // Constructor
    public ImageAdapter(Context c) {
        mContext = c;
        images = new ArrayList<Bitmap>();
        colors = new ArrayList<Integer>();
        colors.add(Color.CYAN);
        colors.add(Color.BLUE);
        colors.add(Color.GRAY);
        colors.add(Color.YELLOW);
        colors.add(Color.MAGENTA);
        alreadyLoadedIndexes = new boolean[20];
    }

    @Override
    public int getCount() {
        return 20;
    }

    @Override
    public Object getItem(int position) {
        return 20;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView = new ImageView(mContext);

        imageView
                .setBackgroundColor(colors.get((int) ((Math.sqrt(position) + 2 * position) % 5)));

        // If image at index 'position' is available
        if (images.size() > position) {

            // If loading this image first time then only apply animation
            if (!alreadyLoadedIndexes[position]) {

                // If animation is specified
                if (this.animation != null) {
                    imageView.setImageBitmap(images.get(position));
                    imageView.startAnimation(animation);

                }
                // If animator set is specified
                else if (this.animator != null) {
                    imageView.setImageBitmap(null);
                    imageView.setBackgroundColor(colors.get((int) ((Math
                            .sqrt(position) + 2 * position) % 5)));
                    animator.setTarget(imageView);
                    animator.start();
                    Log.e("", "setting image after " + animator.getDuration()
                            / 2);
                    new Handler().postDelayed(
                            new runnable(imageView, images.get(position)), 500);

                } else {
                    // Use default animation if nothing is specified.
                    imageView.setImageBitmap(images.get(position));
                    animation = AnimationUtils.loadAnimation(mContext,
                            R.anim.fade_in);
                    imageView.startAnimation(animation);
                }

            } else {
                imageView.setImageBitmap(images.get(position));
            }

            alreadyLoadedIndexes[position] = true;

        }

        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setLayoutParams(new GridView.LayoutParams(150, 150));
        return imageView;
    }

    class runnable implements Runnable {

        ImageView image;
        Bitmap bitmap;

        public runnable(ImageView img, Bitmap bitmap) {
            this.image = img;
            this.bitmap = bitmap;
        }

        @Override
        public void run() {
            Log.e("", "setting image.");
            image.setImageBitmap(bitmap);
        }

    }

}

Answer 1

try layout animation controlor for GridView, it will animate the views item by item with respect to time duration. check this link ,