How to create an 'add to cart' animation in android?

Question

My app looks somewhat like this (https://dribbble.com/shots/2189587-Add-to-cart)

I want to similarly move a snapshot of the product into the cart below. I have never worked with animations before so I'm struggling a little bit to understand this.

For your answer, assume that the product image is in an ImageView and the cart button is a floating action button in the bottom right.

My code for the page is here:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android">
<data>
<variable name="product" type="com.example.irtazasafi.ilovezappos.Result"/>
</data>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="1"
android:background="@color/cardview_light_background"
android:gravity="center">
<ImageView
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="@color/cardview_light_background"
android:src="@mipmap/zappos"
android:textAlignment="center"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@{product.getProductId()}"
android:textAlignment="center" />
<android.support.design.widget.CoordinatorLayout
android:id="@+id/test"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{product.getPercentOff()}"
android:textSize="20sp"
android:layout_marginRight="250dp"
android:textColor="@color/colorAccent"
android:id="@+id/discountAmount"/>
</android.support.design.widget.CoordinatorLayout>
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="10dp"
android:id="@+id/productImage"
android:scaleType="centerCrop"
android:backgroundTint="@color/cardview_light_background"
android:background="@color/cardview_light_background" />
<TextView
android:layout_marginTop="5dp"
android:layout_width="fill_parent"
android:layout_height="43dp"
android:background="?android:attr/colorPrimary"
android:text="@{product.getBrandName()}"
android:textColor="@android:color/black"
android:textSize="35sp"
android:textAlignment="center"/>
<TextView
android:layout_marginTop="0dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="?android:attr/colorPrimary"
android:text="@{product.getProductName()}"
android:textColor="@android:color/black"
android:textSize="15sp"
android:textAlignment="center"/>
<TextView
android:layout_marginTop="0dp"
android:layout_width="fill_parent"
android:layout_height="25dp"
android:background="?android:attr/colorPrimary"
android:text="@{product.getOriginalPrice()}"
android:textColor="@android:color/black"
android:textSize="20sp"
android:textAlignment="center"
android:id="@+id/origPrice"/>
<TextView
android:layout_marginTop="0dp"
android:layout_width="fill_parent"
android:layout_height="25dp"
android:background="?android:attr/colorPrimary"
android:text="@{product.getPrice()}"
android:textColor="@android:color/black"
android:textSize="15sp"
android:textAlignment="center"
android:id="@+id/currPrice"/>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:layout_width="54dp"
android:layout_height="54dp"
android:layout_gravity="bottom|right"
android:src="@mipmap/ic_add_shopping_cart_black_24dp"
android:layout_marginBottom="40dp"
android:layout_marginRight="30dp"
app:backgroundTint="@android:color/holo_blue_light"
android:id="@+id/cartadd"
android:onClick="addToCart"/>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
layout>

Thanks in advance!

Answer 1

Theoretically, I would try somethink like:

1. Have 2 ImageView: one in your RecyclerView and one at the same hierarchy level than the FAB (in the xml layout). Hide the second one.

2. When the product is clicked, copy the bitmap of your clicked image into the second ImageView

3. Retrieve the X and Y of your product image relative to your FAB container -- recursively getX and getY of your view in its parent until you're in the parent (don't forget to remove the scrollX and scrollY in the RecyclerView)

4. Place your second image to the X and Y retrieved

5. Wait for your image to be layout (getViewTreeObserver().addOnPredrawListener()) and apply the animation to move it to the center of the FAB. You will need to scale down the image and translate it (get the x and y of the FAB to know your destination)

6. Add a onAnimationEndListener which display the +1 on top of the FAB

7. Apply a down translation animation to the +1 view (the +1 will be drawn on top of the FAB but since the icon and the +1 are white, it should be fine)

Good luck, that's a fair amount of work!