Android translateanimation move from one location to another view's location

Question

I have 6 imageviews in my layout. 5 of which are source imageview and a target imageview.

I want to move the source imageviews to the exact location of the target imageview.

I have created the following code to do this but it doesn't work somehow.

private void animate(View fromView, View toView) {
    float toX = toView.getLeft();
    float toY = toView.getTop();

    TranslateAnimation move = new TranslateAnimation(0, toX, 0, toY);
    move.setDuration(200);
    move.setStartOffset(offset);
    move.setFillAfter(true);
    fromView.startAnimation(move);

    offset = offset + 200;
}

and here's my xml.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:clipChildren="false"
tools:context="com.sample.myapplication.MyActivity">

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:gravity="center">

        <ImageView
            android:id="@+id/ivLife"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_heart" />

        <TextView
            android:id="@+id/tvLife"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0"
            android:textSize="15dp"
            android:textStyle="bold" />
    </LinearLayout>
</RelativeLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clipChildren="false"
    android:orientation="vertical"
    android:layout_centerInParent="true"
    android:gravity="center">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center">

        <TextView
            android:id="@+id/tvMessage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/llHearts"
        android:clipChildren="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_heart"
            android:padding="10dp"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_heart"
            android:padding="10dp"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_heart"
            android:padding="10dp"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_heart"
            android:padding="10dp"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_heart"
            android:padding="10dp"/>
        </LinearLayout>

</LinearLayout>

</RelativeLayout>

How can I do this?

Answer 1

The translate animation takes in change in x values, not absolute values. Hence you need to get your fromView's x and your toView's x, and put the difference between them in your translate animation (and same with y).

From: http://developer.android.com/reference/android/view/animation/TranslateAnimation.html Parameters fromXDelta: Change in X coordinate to apply at the start of the animation

toXDelta: Change in X coordinate to apply at the end of the animation

fromYDelta: Change in Y coordinate to apply at the start of the animation

toYDelta: Change in Y coordinate to apply at the end of the animation