Animate a ListView to remove

Question

Below my ListView, I have a panel with a basket.

When some action is performed, suppose it just clicks on an element, I would like the element to animate to the garbage container. This means that both move down and contract horizontally to a width of 0.

How can this be achieved? I suspect that this has to do with creating a bitmap and then animating that bitmap down and down. This also means that depending on where the list item refers to the screen, it may need to be reduced faster than other times (for example: if the list item is already close to the bottom of the screen and not to the top). I just don’t know how to achieve this.

The only animation I made includes a panel view at the bottom of the screen. I have no experience moving around a freely floating object and resizing it.

Can someone provide me a good referral?

Answer 1

To achieve this goal, follow these steps:

First, you need to create a “charred” copy of your list item. To do this, you need to inflate a new view that has the same structure as the list items in your list. After that, you need to add this to the window manager, for example:

WindowManager.LayoutParams windowParams = new WindowManager.LayoutParams(); windowParams.gravity = Gravity.TOP | Gravity.RIGHT; windowParams.x = item.getLeft(); windowParams.y = item.getTop(); windowParams.height = item.getHeight(); windowParams.width = item.getWidth(); windowParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE | WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE | WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON | WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN | WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS; windowParams.format = PixelFormat.TRANSLUCENT; windowParams.windowAnimations = 0; View hooveredView = getClonedView(item); // Add the hoovered view to the window manager, as a new view in the screen WindowManager mWindowManager = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE); mWindowManager.addView(hooveredView, windowParams); 

Now create a new Animation class that gets WindowParams, and change the x and y coordinates to move the object processed with hoovered to the bottom bin. Update the new view position using this code:

  mWindowManager.updateViewLayout(mViewToAnimate, mWindowParams); 

You can also play with width and height to simulate the compression of the view.

To animate the empty space left on the list, you can use my ExpandAnimation described on my blog: http://udinic.wordpress.com/2011/09/03/expanding-listview-items/

This is pretty much the case. If you need more information, just ask.

Answer 2

For animation, see Animation . It looks like you will want to build an AnimationSet consisting of ScaleAnimation , AlphaAnimation and TranslateAnimation . Then you apply this animation to what you create to move around the list. At the top of my head, I would probably approach this aspect by creating a copy of the item that will be deleted, animating it into garbage, and then deleting the original item. But this approach can be more complex / less efficient than creating a bitmap image.