Animation problem

Question

I'm trying to set up a simple animation that takes an image on the upper right hand side of the screen, moves it to the 30% point, moves in a circle, and them moves back to the edge. See the figure below. However, the current script does strange things, and while it ends up in the right place, almost nothing seems right before that. Also, depending on the Android version and screen size, it might do even more wild things. Any help would be much appreciated. Thanks!

A couple of key points. I want the left edge at the beginning to always be facing the direction of motion. I would like a circular motion where it moves from left to right, but if it can't be done, I'm not set on it, so long as the first part holds true.

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:shareInterpolator="true">
    <set>
        <translate
            android:fromXDelta="0%p" android:toXDelta="0%p"
            android:fromYDelta="00%p" android:toYDelta="20%p"
            android:duration="001" android:startOffset="0"/>
        <translate
            android:fromXDelta="0%p" android:toXDelta="-80%p"
            android:fromYDelta="00%p" android:toYDelta="0%p"
            android:duration="2000" android:startOffset="1"/>
    </set>
    <set>
        <rotate 
            android:fromDegrees="180"
            android:toDegrees="0" 
            android:pivotY="20%p"
            android:duration="1000"
            android:startOffset="2000"/>
        <translate
            android:fromXDelta="0%p" android:toXDelta="70%p"
            android:fromYDelta="00%p" android:toYDelta="0%p"
            android:duration="100" 
            android:startOffset="3000"/>
    </set>
</set>

Answer 1

I did this in a new android project with a button in the main xml layout. It worked. All percentages are of parent size, relative to the view's position.

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate android:fromXDelta="0%p" android:toXDelta="-80%p"
    android:fromYDelta="0%p" android:toYDelta="0%p" 
    android:duration="2000" />

<rotate android:fromDegrees="0" android:toDegrees="-180"
        android:pivotX="-70%p" android:pivotY="10%p" android:duration="1000"
        android:startOffset="2000" />

<translate  
    android:fromXDelta="0%p" android:toXDelta="80%p"
    android:fromYDelta="0%p" android:toYDelta="0%p" android:duration="2000"
    android:startOffset="3000" />

</set>

Answer 2

I tried to create the animation described in your drawing. I split the animation in 2 files left_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:shareInterpolator="true">
    <set>
        <translate
            android:fromXDelta="0%p" android:toXDelta="-80%p"
            android:fromYDelta="00%p" android:toYDelta="0%p"
            android:duration="2000" android:startOffset="0"/>
         <translate
            android:fromXDelta="0%p" android:toXDelta="0%p"
            android:fromYDelta="00%p" android:toYDelta="20%p"
            android:duration="2000" android:startOffset="2000"/>         
    </set>
</set>

right.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android" 
    android:fromXDelta="-80%p" android:toXDelta="0%p" android:fromYDelta="20%p" 
    android:toYDelta="20%p" android:duration="2000" android:fillAfter="true"/>

And this is the code I used in the activity

image = (ImageView)findViewById(R.id.image);

        anim = AnimationUtils.loadAnimation(this, R.anim.left_down);
        goBack = AnimationUtils.loadAnimation(this, R.anim.right);
        anim.setAnimationListener(new AnimationListener() {            
            @Override
            public void onAnimationStart(Animation animation) {}

            @Override
            public void onAnimationRepeat(Animation animation) {}

            @Override
            public void onAnimationEnd(Animation animation) {
                image.startAnimation(goBack);    
            }
        });
image.startAnimation(anim);