Android TranslateAnimation to Center

Question

I need to apply a translation animation to an ImageView, this ImageView is positioned at certain place and i need to animate it to the center of the screen. Here is my translate xml code, but it doesn't animate the ImageView to the center.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromXDelta="0%p"
        android:fromYDelta="0%p"
        android:toXDelta="50%p"
        android:toYDelta="50%p" />
</set>

This is the XML where the ImageView is:

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/WelcomeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/welcome_background"
android:orientation="vertical" >

<ImageView
    android:id="@+id/welcome_innovaLogo"
    android:layout_width="300dp"
    android:layout_height="150dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="1dp"
    android:layout_marginTop="5dp"
    android:contentDescription="@string/welcome_innovaLogoString"
    android:scaleType="fitXY"
    android:src="@drawable/innova_logo" >
</ImageView>

<TextView
    android:id="@+id/welcome_innovaInfo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/welcome_innovaLogo"
    android:layout_marginTop="20dp"
    android:layout_toRightOf="@+id/welcome_innovaLogo"
    android:text="@string/welcome_innovaInfoString"
    android:textColor="#9acd32"
    android:textStyle="bold" />

<TextView
    android:id="@+id/welcome_innovaHeader"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@+id/welcome_innovaInfo"
    android:layout_marginRight="20dp"
    android:text="@string/welcome_innovaHeaderString"
    android:textColor="#9acd32"
    android:textSize="20sp"
    android:textStyle="italic" />

<ListView
    android:id="@+id/welcome_commandsListView"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:layout_below="@+id/welcome_innovaLogo"
    android:layout_marginTop="40dp"
    android:cacheColorHint="#00000000" />

<LinearLayout
    android:id="@+id/welcome_loadingLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="450dp"
    android:orientation="horizontal"
    android:visibility="invisible" >

    <ProgressBar
        style="?android:attr/progressBarStyleSmall"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:indeterminateDrawable="@drawable/progress_large" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_marginLeft="10dp"
        android:gravity="center_vertical"
        android:text="Loading Data..."
        android:textColor="@color/green_color"
        android:textSize="19sp" >
    </TextView>
</LinearLayout>

<!--
     <fragment
    android:id="@+id/welcome_facebookFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/welcome_innovaLogo"
    android:layout_marginLeft="20dp"
    android:layout_marginTop="?android:attr/actionBarSize"
    android:layout_toRightOf="@+id/welcome_commandsListView"
    class="innovaEgypt.com.Welcome.FacebookFragment" >
</fragment>
-->

Answer 1

Have a look at this question. I gave a similar answer but the animation is not from an xml but from code. Hope it helps.

---

EDIT:

Your problem is that the animation doesn't take into account the image dimensions. The animation is centering the origin coordinate of your ImageView.

I still suggest my solution.

I tried the code in the answer that I linked and it works. Just copy this function:

private void moveViewToScreenCenter( View view )
{
    RelativeLayout root = (RelativeLayout) findViewById( R.id.WelcomeLayout );
    DisplayMetrics dm = new DisplayMetrics();
    this.getWindowManager().getDefaultDisplay().getMetrics( dm );
    int statusBarOffset = dm.heightPixels - root.getMeasuredHeight();

    int originalPos[] = new int[2];
    view.getLocationOnScreen( originalPos );

    int xDest = dm.widthPixels/2;
    xDest -= (view.getMeasuredWidth()/2);
    int yDest = dm.heightPixels/2 - (view.getMeasuredHeight()/2) - statusBarOffset;

    TranslateAnimation anim = new TranslateAnimation( 0, xDest - originalPos[0] , 0, yDest - originalPos[1] );
    anim.setDuration(1000);
    anim.setFillAfter( true );
    view.startAnimation(anim);
}

and call it passing your view as the parameter:

    ImageView img1 = (ImageView) findViewById( R.id.welcome_innovaLogo );
    moveViewToScreenCenter(img1);

If your image still disappear, maybe is because it is behind your other widgets, like the ListView. If that is the case, reestructure your xml layout definig the ImageView at the end, just after the Listview (just cut and paste the ImageView).