Animate A View From One Layout To Other Layout

Check attached image for easy explanation. Translate animation works but it animates inside the same view. I want view to fly out from one layout to other. I tried this from anot

Solution 1:

I recently did animation of a similar kind using Animators. In general, views will not display themselves outside of their parents' boundaries, the view will be cut by it's parent's boundaries. That's why, the trick is to place a new view (shuttleView) on top of the origin view (fromView) that you want to animate, align them, and animate scaling/translation of shuttleView into a target view (toView).

This solution supports both scaling and translation, here is sample: https://www.dropbox.com/s/iom95o93076h52f/device-2016-06-03-111557.mp4?dl=0

Here is the code:

activity_main.xml

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="90dp"android:layout_alignParentTop="true"android:background="@android:color/holo_blue_dark"><TextViewandroid:id="@+id/itemTo"android:layout_width="50dp"android:layout_height="50dp"android:layout_margin="10dp"android:background="@android:color/holo_blue_bright"android:text="to"/></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="90dp"android:layout_alignParentBottom="true"android:background="@android:color/holo_blue_dark"><TextViewandroid:layout_width="90dp"android:layout_height="match_parent"android:layout_margin="10dp"android:background="@android:color/holo_blue_bright" /><TextViewandroid:id="@+id/itemFrom"android:layout_width="90dp"android:layout_height="match_parent"android:layout_margin="10dp"android:text="from"android:background="@android:color/holo_blue_bright" /><TextViewandroid:layout_width="90dp"android:layout_height="match_parent"android:layout_margin="10dp"android:background="@android:color/holo_blue_bright" /></LinearLayout><Viewandroid:id="@+id/shuttle"android:layout_width="0dp"android:layout_height="0dp"android:background="@android:color/holo_blue_bright"/>

Activity class:

publicclassMainActivityextendsAppCompatActivity {
    publicstaticfinalintANIMATION_SPEED=3000;
    private RelativeLayout rootView;
    private View fromView, toView, shuttleView;

    @OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        rootView = (RelativeLayout) findViewById(R.id.rootView);
        fromView = findViewById(R.id.itemFrom);
        toView = findViewById(R.id.itemTo);
        shuttleView = findViewById(R.id.shuttle);

        fromView.setOnClickListener(newView.OnClickListener() {
            @OverridepublicvoidonClick(View v) {
                RectfromRect=newRect();
                RecttoRect=newRect();
                fromView.getGlobalVisibleRect(fromRect);
                toView.getGlobalVisibleRect(toRect);

                AnimatorSetanimatorSet= getViewToViewScalingAnimator(rootView, shuttleView, fromRect, toRect, ANIMATION_SPEED, 0);

                animatorSet.addListener(newAnimator.AnimatorListener() {
                    @OverridepublicvoidonAnimationStart(Animator animation) {
                        shuttleView.setVisibility(View.VISIBLE);
                        fromView.setVisibility(View.INVISIBLE);
                    }

                    @OverridepublicvoidonAnimationEnd(Animator animation) {
                        shuttleView.setVisibility(View.GONE);
                        fromView.setVisibility(View.VISIBLE);
                    }

                    @OverridepublicvoidonAnimationCancel(Animator animation) {

                    }

                    @OverridepublicvoidonAnimationRepeat(Animator animation) {

                    }
                });
                animatorSet.start();
            }
        });
    }


    publicstatic AnimatorSet getViewToViewScalingAnimator(final RelativeLayout parentView,
                                                           final View viewToAnimate,
                                                           final Rect fromViewRect,
                                                           final Rect toViewRect,
                                                           finallong duration,
                                                           finallong startDelay) {
        // get all coordinates at oncefinalRectparentViewRect=newRect(), viewToAnimateRect = newRect();
        parentView.getGlobalVisibleRect(parentViewRect);
        viewToAnimate.getGlobalVisibleRect(viewToAnimateRect);

        viewToAnimate.setScaleX(1f);
        viewToAnimate.setScaleY(1f);

        // rescaling of the object on X-axisfinalValueAnimatorvalueAnimatorWidth= ValueAnimator.ofInt(fromViewRect.width(), toViewRect.width());
        valueAnimatorWidth.addUpdateListener(newValueAnimator.AnimatorUpdateListener() {
            @OverridepublicvoidonAnimationUpdate(ValueAnimator animation) {
                // Get animated width value updateintnewWidth= (int) valueAnimatorWidth.getAnimatedValue();

                // Get and update LayoutParams of the animated view
                RelativeLayout.LayoutParamslp= (RelativeLayout.LayoutParams) viewToAnimate.getLayoutParams();

                lp.width = newWidth;
                viewToAnimate.setLayoutParams(lp);
            }
        });

        // rescaling of the object on Y-axisfinalValueAnimatorvalueAnimatorHeight= ValueAnimator.ofInt(fromViewRect.height(), toViewRect.height());
        valueAnimatorHeight.addUpdateListener(newValueAnimator.AnimatorUpdateListener() {
            @OverridepublicvoidonAnimationUpdate(ValueAnimator animation) {
                // Get animated width value updateintnewHeight= (int) valueAnimatorHeight.getAnimatedValue();

                // Get and update LayoutParams of the animated view
                RelativeLayout.LayoutParamslp= (RelativeLayout.LayoutParams) viewToAnimate.getLayoutParams();
                lp.height = newHeight;
                viewToAnimate.setLayoutParams(lp);
            }
        });

        // moving of the object on X-axisObjectAnimatortranslateAnimatorX= ObjectAnimator.ofFloat(viewToAnimate, "X", fromViewRect.left - parentViewRect.left, toViewRect.left - parentViewRect.left);

        // moving of the object on Y-axisObjectAnimatortranslateAnimatorY= ObjectAnimator.ofFloat(viewToAnimate, "Y", fromViewRect.top - parentViewRect.top, toViewRect.top - parentViewRect.top);

        AnimatorSetanimatorSet=newAnimatorSet();
        animatorSet.setInterpolator(newDecelerateInterpolator(1f));
        animatorSet.setDuration(duration); // can be decoupled for each animator separately
        animatorSet.setStartDelay(startDelay); // can be decoupled for each animator separately
        animatorSet.playTogether(valueAnimatorWidth, valueAnimatorHeight, translateAnimatorX, translateAnimatorY);

        return animatorSet;
    }
}

You can do a whole bunch of customizations in terms of what appears and disappears at different stages of animation in animatorSet listener. Hope it's helpful.

Solution 2:

If someone is looking for simpler solution, you can use transitions framework: https://developer.android.com/training/transitions/index.html

To animate translation from one parent view to another, there is special transition ChangeTransform: https://developer.android.com/reference/android/transition/ChangeTransform.html

And a small example:

animatedView = View.inflate(ActivityMain.this, R.layout.item, firstParent);
animatedView.setLayoutParams(newLinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
Transitionmove=newChangeTransform()
                        .addTarget(animatedView)
                        .setDuration(2000));
TransitionManager.beginDelayedTransition(rootParent, move);
firstParent.removeView(animatedView);
animatedView.setPadding(2,2,2,2);
animatedView.setElevation(4);
secondParent.addView(animatedView, 0);