View images View with animation

Question

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

But the problem is that if I applied animation on ImageView1, and then on ImageView2 (before the animation on ImageView1 is completed), the animation on ImageView1 will be interrupted and ImageView1 will be directly set to the final state.

Please note that I am loading an image using ThreadPoolExecutor with two threads. Whenever the image is loaded, I call the addImage(image) method below the ImageAdapter , which in turn adds the image to the GridView , and the GridView updated to display the last set of images. And here, while rendering, a new image is displayed with animation, and this animation (I think) interrupts the animation of the animated images at present.

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 the layout layout layout mechanism for the GridView, it will animate the elements of the presentation by elements with respect to the length of time. check the link

Answer 2

You tried to apply the getView method to an external adapter, for example:

 mGridView.getChildAt(childIndexNeededToAnimate).startAnimation(animation); 

These child views are independent and are no longer processed as they are already drawn.

Answer 3

You have an alternative.

You can use the Animation in your adapter class first if you do not want to modify your code. To do this, check it out .

In your adapter class inside getView you need to call the animation like this:

  Animation animation = null; animation = AnimationUtils.loadAnimation(context, R.anim.push_left_in); animation.setDuration(500); convertView.startAnimation(animation); return convertView; 

Secondly, you should use the GridLayoutAnimationController , in which the layout animation controller is used to animate the children of the grid layout.

• Example 1
• Example 2

Answer 4

Just to guess. I am not sure if this will help, and if I read your code correctly. I suppose the problem is more complicated than I guess. However, you are using the same animation object for each element. You may need to create a new animation for each element. This may be the reason your animation stops when you start a new one, because the new call is simply reused and restarts it.

Good luck.

Answer 5

You have a problem notifyDataSetChanged(); interrupt the animation. Try calling it when the animation is finished.