Android animation XML issues

Question

I'm trying to use Android's animation framework to have my ImageView move in a diamond pattern. Here's my animation.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="true">
<translate 
    android:fromXDelta="40%p" android:toXDelta="90%p" 
    android:fromYDelta="10%p" android:toYDelta="40%p" 
    android:duration="500" android:startOffset="0"/>
<translate 
    android:fromXDelta="90%p" android:toXDelta="40%p" 
    android:fromYDelta="40%p" android:toYDelta="90%p" 
    android:duration="500" android:startOffset="500"/>
<translate 
    android:fromXDelta="40%p" android:toXDelta="10%p" 
    android:fromYDelta="90%p" android:toYDelta="40%p" 
    android:duration="500" android:startOffset="1000"/>
<translate 
    android:fromXDelta="10%p" android:toXDelta="40%p" 
    android:fromYDelta="40%p" android:toYDelta="10%p" 
    android:duration="500" android:startOffset="1500"/>
</set>

My layout:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">
    <ImageView
        android:id="@+id/img"  
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:src="@drawable/icon"/>
</FrameLayout>

And my onStart:

protected void onStart() {
    super.onStart();

    ImageView img = (ImageView)findViewById(R.id.img);
    Animation a = AnimationUtils.loadAnimation(this, R.anim.diamond);
    img.startAnimation(a);
}

When I start my application all I see is a blank screen for 2 seconds then my image pops into the upper-left corner of the screen. If I remove all but one of the translate animations I will see the image move in a diagonal line.

I would prefer to use XML to define the animation and not Java.

Does anyone have any insight into how I can see the entire animation?

-Dan

Answer 1

Use this animation xml code. It works:

<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="true">
<translate 
    android:fromXDelta="40%" android:toXDelta="90%" 
    android:fromYDelta="10%" android:toYDelta="40%" 
    android:duration="500" android:startOffset="0"/>
<translate 
    android:fromXDelta="90%" android:toXDelta="40%" 
    android:fromYDelta="40%" android:toYDelta="90%" 
    android:duration="500" android:startOffset="500"/>
<translate 
    android:fromXDelta="40%" android:toXDelta="10%" 
    android:fromYDelta="90%" android:toYDelta="40%" 
    android:duration="500" android:startOffset="1000"/>
<translate 
    android:fromXDelta="10%" android:toXDelta="40%" 
    android:fromYDelta="40%" android:toYDelta="10%" 
    android:duration="500" android:startOffset="1500"/>
</set>

Answer 2

Try this:

Animation anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.diamond);
findViewById(R.id.img).setAnimation(anim);
anim.start();

You should also probably change the animations to load one after the other. I think that set you have created will try to play all the animations at once, and that won't work very well.

Use an animationListener like this:

anim.setAnimationListener(new Animation.AnimationListener() {

        public void onAnimationStart(Animation animation) {
        }

        public void onAnimationEnd(Animation animation) {
            Animation anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.diamond2);
            findViewById(R.id.img).setAnimation(anim);
            anim.start();
        }

        public void onAnimationRepeat(Animation animation) {
        }
    });

Answer 3

Use this one it works, i hve tested it

<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="true">
    <translate 
        android:fromXDelta="40%p" android:toXDelta="90%p" 
        android:fromYDelta="10%p" android:toYDelta="40%p" 
        android:duration="500" android:startOffset="0"
        />
    <translate 
        android:fromXDelta="0%p" android:toXDelta="-40%p" 
        android:fromYDelta="0%p" android:toYDelta="40%p" 
        android:duration="500" android:startOffset="500"/>
    <translate 
        android:fromXDelta="0%p" android:toXDelta="-40%p" 
        android:fromYDelta="0%p" android:toYDelta="-40%p" 
        android:duration="500" android:startOffset="1000"/>
    <translate 
        android:fromXDelta="0%p" android:toXDelta="40%p" 
        android:fromYDelta="0%p" android:toYDelta="-40%p" 
        android:duration="500" android:startOffset="1500"/>
    </set>

Answer 4

The animation attributes are relative to where they are when they start. This is probably a lot closer to what you want:

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="true">
<translate 
    android:fromXDelta="40%p" android:toXDelta="90%p" 
    android:fromYDelta="10%p" android:toYDelta="40%p" 
    android:duration="500" android:startOffset="0"/>
<translate 
    android:fromXDelta="0%p" android:toXDelta="-50%p" 
    android:fromYDelta="0%p" android:toYDelta="50%p" 
    android:duration="500" android:startOffset="500"/>
<translate 
    android:fromXDelta="0%p" android:toXDelta="-30%p" 
    android:fromYDelta="0%p" android:toYDelta="-50%p" 
    android:duration="500" android:startOffset="1000"/>
<translate 
    android:fromXDelta="0%p" android:toXDelta="30%p" 
    android:fromYDelta="0%p" android:toYDelta="-30%p" 
    android:duration="500" android:startOffset="1500"/>
</set>