android ImageView how to move to another Layout

Question

I saw many Library like TransitionManager but can't do what I want to do.

I want to move ImageView Like below animation https://codepen.io/elmahdim/pen/tEeDn

once I click imageView, I want to move that image to button which id is "Cart"

My layout xml is as below

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="10"
    android:id="@+id/mainView"
    android:orientation="vertical"
    tools:context=".MainActivity">

     <ScrollView
        android:layout_weight="8"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="0dp">
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:weightSum="5"
            android:layout_height="match_parent">
            <LinearLayout
                android:id="@+id/first"
                android:background="@color/colorPrimaryDark"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_gravity="center_horizontal|center_vertical"
                android:gravity="center_vertical|center_horizontal"
                android:orientation="vertical"
                android:layout_height="wrap_content">
                <ImageView
                    android:layout_width="90dp"
                    android:layout_height="90dp"
                    android:src="@drawable/americano"
                    />
                <TextView
                    android:textSize="25dp"
                    android:textAlignment="center"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="1번째"
                    />
            </LinearLayout>
                        ..... 

                        .....
      </ScrollView>


<LinearLayout
        android:layout_width="match_parent"
        android:layout_weight="2"
        android:layout_height="0dp">
        <Button
            android:layout_width="wrap_content"
            android:text="Cart"
            android:id="@+id/Cart"
            android:layout_height="wrap_content" />
       .... 
       ....
 </LinearLayout>

On Activity, I tried to use TransitionManager library sample code but It didn't give me effect . What I want to do is to move imageView to Button id "Cart"

first= (LinearLayout)findViewById(R.id.first);
        first.setOnClickListener(new View.OnClickListener() {
            boolean mToRightAnimation;
            @Override
            public void onClick(View v) {
                TransitionManager.beginDelayedTransition(transitionsContainer,
                        new ChangeBounds().setPathMotion(new ArcMotion()).setDuration(500));

                LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) first.getLayoutParams();
                params.gravity =Gravity.RIGHT | Gravity.BOTTOM;

                first.setLayoutParams(params);
            }
        });

Answer 1

You can try https://github.com/matrixdevz/FlyToCartAnimation

You can find more details in here http://codezlab.com/add-to-cart-fly-animation/