How to animate a 'cloned', duplicate version of existing android View

Question

I have an ImageView that sits in a page of a ViewPager and suppose I'd like to animate it to scale down + fly somewhere off-screen, while the original view is still present in pager, untouched.

What is the best way to create this type of animation on Android 4.0.3+ ? I would like to use the new animation framework, not the old one.

One way I figured is to use the activity's DecorView: create a clone of the ImageView there and do an animation, but I feel like this is a bit hacky - the decor view seems more like a hidden feature and an implementation detail.

Is there a better way maybe?

Answer 1

I think you can get around using a DecorView by setting setClipChildren() to false on all the parents of the ImageView. This allows you to animate a View from your layout even outside of its parent (and even Activity). I mostly use a helper method to do this:

public static void setClipView(View view, boolean clip) {
    if (view != null) {
        ViewParent parent = view.getParent();
        if(parent instanceof ViewGroup) {
            ViewGroup viewGroup = (ViewGroup) view.getParent();
            viewGroup.setClipChildren(clip);
            setClipView(viewGroup, clip);
        }
    }
}

So just use this method on your ImageView like this:

LayoutHelper.setClipView(imageView, false);

To animate the View itself you should use the new animation API introduced with Android 3.0 (Honeycomb - API level 11).

This DevBytes video is also somewhat related to this. It deals with custom Activity animations and they create a duplicate ImageView to animate the transition from one Activity to the next. That is basically the same thing what you are trying to do, just in two different Activities.