Question

I have a lot of troubles with Android animation API.

I need to animate image (400px * 600px) on screen (600px * 1024px) from left bottom side to top. Also, big part of image should be located outside of the screen on animation start.

Here is my layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/common_background">

<ImageView android:id="@+id/hand"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:scaleType="matrix"
           android:src="@drawable/howto_throw_hand" />

</RelativeLayout>

Activity’s logic:

public class MyActivity extends Activity
{
    ImageView hand;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        hand = (ImageView)findViewById(R.id.hand);
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {

        //initial positioning
        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(
                new ViewGroup.MarginLayoutParams(
                        RelativeLayout.LayoutParams.WRAP_CONTENT,
                        RelativeLayout.LayoutParams.WRAP_CONTENT
                )
        );
        layoutParams.setMargins(400, 600, 0, 0);
        hand.setLayoutParams(layoutParams);

        //making animation
        TranslateAnimation animation = new TranslateAnimation(
            Animation.RELATIVE_TO_SELF, 0, Animation.ABSOLUTE, -100,
            Animation.RELATIVE_TO_SELF, 0, Animation.ABSOLUTE, -1000
        );

        animation.setInterpolator(new LinearInterpolator());
        animation.setDuration(3000);

        //applying animation
        hand.startAnimation(animation);
    }
}

And screenshot with initial state:

The problem is that in the process of animation image is cropped like on this video: video with animation

I missed a lot of time but have not been able to solve the problem =(

What can be done to solve the problem?

Thank you in advance!

~~~~~~~~~~~~~~~~~~ SOLVED ~~~~~~~~~~~~~~~~~~

As ben75 told “… the problem is the initial position. When you do a TranslateAnimation : the image don’t move : it is redraw with a different translation” and “The animation just translate this first cropped image.”

How I solved this:

Layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/common_background">

<ImageView android:id="@+id/hand"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:visibility="invisible"
           android:src="@drawable/howto_throw_hand" />

</RelativeLayout>

Activity’s logic:

public class MyActivity extends Activity
{
    ImageView hand;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        hand = (ImageView)findViewById(R.id.hand);
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {

        //initial positioning — removed

        //making animation
        TranslateAnimation animation = new TranslateAnimation(400, 300, 600, 0);

        animation.setInterpolator(new LinearInterpolator());
        animation.setDuration(3000);

        //applying animation
        hand.startAnimation(animation);
    }
}

BINGO!

Answer 1

I think the problem is the initial position. When you do a TranslateAnimation : the image don’t move : it is redraw with a different translation.
The margins specified in your code are such that the image is initially partially out of the screen and so the image is initially cropped. The animation just translate this first cropped image.

So I would suggest something like this:

    layoutParams.setMargins(0, 0, 0, 0); //left, top are the final position of the image
    hand.setLayoutParams(layoutParams);

    //making animation
    TranslateAnimation animation = new TranslateAnimation(
        Animation.RELATIVE_TO_SELF, 400, Animation.ABSOLUTE, 0,
        Animation.RELATIVE_TO_SELF, 600, Animation.ABSOLUTE, 0
    );