Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to animate a View with Translate Animation in Android

I have one ImageView in my application which can be situated anywhere on screen

On touch I want to move this view at the center of the Screen. I tried this functionality with Translate Animation and its RELATIVE_TO_PARENT functionality as follows

TranslateAnimation translateAnimation1 = new TranslateAnimation(       TranslateAnimation.RELATIVE_TO_PARENT,0.0f,       TranslateAnimation.RELATIVE_TO_PARENT,0.5f,       TranslateAnimation.RELATIVE_TO_PARENT,0.0f,       TranslateAnimation.RELATIVE_TO_PARENT,0.5f); 

but ImageView moves 50% (of the screen) down from its current position.

Is there any way to move this view to the center of the screen regardless of its current position?

like image 844
silwar Avatar asked Apr 23 '12 07:04

silwar


People also ask

What is translate animation in Android?

Translate Animation can change the visual appearance of an object, but they cannot change the objects themselves. That is, if you apply a translate animation to a view, it would move to a new position, but its click events would not get fired; the click events would still get fired at its previous position.

How do you animate a view?

Create ImageView in the activity_main. xml along with buttons that will add animation to the view. Navigate to the app > res > layout > activity_main. xml.


1 Answers

In order to move a View anywhere on the screen, I would recommend placing it in a full screen layout. By doing so, you won't have to worry about clippings or relative coordinates.

You can try this sample code:

main.xml

<?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:orientation="vertical" android:id="@+id/rootLayout">      <Button         android:id="@+id/btn1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="MOVE" android:layout_centerHorizontal="true"/>      <ImageView         android:id="@+id/img1"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:src="@drawable/ic_launcher" android:layout_marginLeft="10dip"/>     <ImageView         android:id="@+id/img2"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:src="@drawable/ic_launcher" android:layout_centerVertical="true" android:layout_alignParentRight="true"/>     <ImageView         android:id="@+id/img3"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:src="@drawable/ic_launcher" android:layout_marginLeft="60dip" android:layout_alignParentBottom="true" android:layout_marginBottom="100dip"/>      <LinearLayout         android:layout_width="fill_parent"         android:layout_height="fill_parent"         android:orientation="vertical" android:clipChildren="false" android:clipToPadding="false">          <ImageView             android:id="@+id/img4"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:src="@drawable/ic_launcher" android:layout_marginLeft="60dip" android:layout_marginTop="150dip"/>     </LinearLayout>  </RelativeLayout> 

Your activity

@Override public void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.main);      ((Button) findViewById( R.id.btn1 )).setOnClickListener( new OnClickListener()     {         @Override         public void onClick(View v)         {             ImageView img = (ImageView) findViewById( R.id.img1 );                           moveViewToScreenCenter( img );             img = (ImageView) findViewById( R.id.img2 );             moveViewToScreenCenter( img );             img = (ImageView) findViewById( R.id.img3 );                             moveViewToScreenCenter( img );             img = (ImageView) findViewById( R.id.img4 );             moveViewToScreenCenter( img );         }     }); }  private void moveViewToScreenCenter( View view ) {     RelativeLayout root = (RelativeLayout) findViewById( R.id.rootLayout );     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); } 

The method moveViewToScreenCenter gets the View's absolute coordinates and calculates how much distance has to move from its current position to reach the center of the screen. The statusBarOffset variable measures the status bar height.

I hope you can keep going with this example. Remember that after the animation your view's position is still the initial one. If you tap the MOVE button again and again the same movement will repeat. If you want to change your view's position do it after the animation is finished.

like image 92
Xavi Gil Avatar answered Sep 20 '22 18:09

Xavi Gil