Translate Animation incorrect view move

Question

I have 3 view objects(essentially ImageView's) with in a LinearLayout that in turn is within a RelativeLayout , The views are aligned within the LinearLayout as follows:

---

---

1 - 2 - 3 - -

---

---

The 3 views are wrapped under the Linear layout as demonstrated above.

Basically the idea is to get the side views(1st and 3rd views) move with animation to the place of the middle view onClick() . (so if 3rd view is clicked it should move to middle view's place and the middle moves right to the 3rd view's place.)

I implemented the translate animation as such that the 3rd view when clicked over 100dp to left and 2nd view moves to right, happens fine, but when I apply the translate animation on the onClick() of 1st view to make it move to right and 2nd to move to left then the 2nd and 3rd views both move collectively!! , This means the views are mapped next to each other automatically by the Android!!(note: that's why I used a LinearLayout so that alignment problems don't occur like 2nd view is aligned_below 1st view and aligned_left of 3rd view problems. )

also another problem is that though the views make a move land on another position that was originally belonging to the other view before the animated movement they still maintain the original view ID ?? For.Example that when 3rd view moves left to 2nd views place and 2nd mvoes to 3rd views place the onClick() still is mapped to their original location's?

XML file:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
</LinearLayout>

<RelativeLayout
    android:id="@+id/Container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#138AF8" >

    <RelativeLayout
        android:id="@+id/RelativeLayout01"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:background="#138AF8" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/ImageView01"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/cost" />

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/cost" />

            <ImageView
                android:id="@+id/ImageView02"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/cost" />
        </LinearLayout>

    </RelativeLayout>
</RelativeLayout>

</LinearLayout>

Those 3 ImageViews with the names of ImageView1, ImageView01, ImageView02 are the one's I'm trying to animate.

Animation code:

final TranslateAnimation moveLefttoRight = new TranslateAnimation(0,
            100, 0, 0);
    final TranslateAnimation moveRightToLeft = new TranslateAnimation(0,
            -100, 0, 0);
    moveRightToLeft.setDuration(1000);
    moveLefttoRight.setDuration(1000);
    moveRightToLeft.setFillAfter(true);
    moveLefttoRight.setFillAfter(true);
    final ImageView image1 = (ImageView) findViewById(R.id.imageView1);
    final ImageView image2 = (ImageView) findViewById(R.id.ImageView01);
    final ImageView image3 = (ImageView) findViewById(R.id.ImageView02);



        image1.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            // Perform action on click
            Toast.makeText(getApplicationContext(), "image1 clicked",
                    Toast.LENGTH_SHORT).show();
        }
    });
    image2.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            // Perform action on click
            Toast.makeText(getApplicationContext(), "image2 clicked",
                    Toast.LENGTH_SHORT).show();
            image2.startAnimation(moveLefttoRight);
            image1.startAnimation(moveRightToLeft);
        }
    });
    image3.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            // Perform action on click
            Toast.makeText(getApplicationContext(), "image3 clicked",
                    Toast.LENGTH_SHORT).show();
            image2.startAnimation(moveLefttoRight);
            image3.startAnimation(moveRightToLeft);
        }
    });

Answer 1

Translate animation doesn't actually move the view, it just makes it look like that. You have to set the params before the end of the animation so that the button moves as well. example

with the other issue can you post your xml layout file? do you use weights in the imageviews?

Answer 2

I ended up using ObjectAnimator builtin animating API and this moves the view's position permanently to the co-ords. requested.