Ahmed Emad
Ahmed Emad

Reputation: 629

Android TranslateAnimation to Center

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>
-->

Upvotes: 2

Views: 9450

Answers (3)

Wasim K. Memon
Wasim K. Memon

Reputation: 6067

For future updates...

Apply view property animation to move position of widget. Image view in this case

int layoutWidth = parentLayout.getWidth();

layoutWidth = ((int) layoutWidth / 2) - (imageView.getWidth()) ;

Log.d(TAG, " position - " + layoutWidth);

imageView.animate()
    .translationX(-layoutWidth)
    .translationY(0)
    .setDuration(500)
    .setInterpolator(new LinearInterpolator())
    .start();

Upvotes: 3

Nishant Mendiratta
Nishant Mendiratta

Reputation: 749

Try adding delay to this code.

new android.os.Handler().postDelayed(
                    new Runnable() {
                        public void run() {
                            moveViewToScreenCenter( view );
                        }
                    }, 
                1000);

Upvotes: 1

Xavi Gil
Xavi Gil

Reputation: 11568

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).

Upvotes: 3

Related Questions