How to Animate a View with Translate Animation in Android

How to animate a View with Translate Animation in Android

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.

Animate/translate view from position of other view

Use ConstraintLayout for your layout, put your view constraints to starting position (here I will animate @+id/view after clicking @+id/fab. Animated view has to be VISIBLE or INVISIBLE - GONE will mess up animation.

    <androidx.constraintlayout.widget.ConstraintLayout
             /*constraint stuff*/>       
                <View
                    android:id="@+id/view"
                    android:layout_width="120dp"
                    android:layout_height="120dp"
                    android:visibility="invisible"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent" />

                <com.google.android.material.floatingactionbutton.FloatingActionButton
                    android:id="@+id/fab"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="8dp"
                    android:layout_marginBottom="120dp"
                    app:layout_constraintBottom_toTopOf="@+id/bottom_navigation"
                    app:layout_constraintEnd_toEndOf="@+id/symbolList" />

   </androidx.constraintlayout.widget.ConstraintLayout>

There are few options:

1. Use ObjectAnimator

In your xml file put View that will be animated on fab position:

view = findViewById(R.id.view)
fab = findViewById(R.id.fab)

fab.setOnClickListener {

    view.visibility = View.VISIBLE
    val propertyX = PropertyValuesHolder.ofFloat(View.X, 0f)
    val propertyY = PropertyValuesHolder.ofFloat(View.Y, 0f)
    ObjectAnimator.ofPropertyValuesHolder(view, propertyX, propertyY).apply {
        duration = 2000L
        start()
    }
}

2. Or use ViewPropertyAnimator (same XML as above)

       fab.setOnClickListener {
         view.animate()
               .x(0f)
               .y(0f)
               .setDuration(2000L)
               .start()
       }
   

3. Or use TransitionManager, MotionLayout, scene api or animate ConstraintSet manually.

   private fun startAnimation() {
   
   val animationEndConstraints = ConstraintSet().apply {
       clone(container)
       clear(button.id, ConstraintSet.START)
       clear(button.id, ConstraintSet.TOP)
       // instead of parent you can use fab.id
       connect(button.id, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END, 0)
       connect(button.id, ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM, 0)
   }
   TransitionManager.beginDelayedTransition(container)
   animationEndConstraints.applyTo(container)
   }
   

This approach will allow to specify start state as xml layout and end state as xml layout, but you will have less control.

With other view position:

        fab.setOnClickListener {
            view.animate()
                .x(fab.left.toFloat())
                .y(fab.top.toFloat())
                .setDuration(2000L)
                .start()
        }

Animate a view from one Layout to other Layout

I recently did animation of a similar kind using Animators. In general, views will not display themselves outside of their parents' boundaries, the view will be cut by it's parent's boundaries. That's why, the trick is to place a new view (shuttleView) on top of the origin view (fromView) that you want to animate, align them, and animate scaling/translation of shuttleView into a target view (toView).

This solution supports both scaling and translation, here is sample: https://www.dropbox.com/s/iom95o93076h52f/device-2016-06-03-111557.mp4?dl=0

Here is the code:

activity_main.xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="90dp"
    android:layout_alignParentTop="true"
    android:background="@android:color/holo_blue_dark">

    <TextView
        android:id="@+id/itemTo"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:background="@android:color/holo_blue_bright"
        android:text="to"/>

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="90dp"
    android:layout_alignParentBottom="true"
    android:background="@android:color/holo_blue_dark">

    <TextView
        android:layout_width="90dp"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:background="@android:color/holo_blue_bright" />

    <TextView
        android:id="@+id/itemFrom"
        android:layout_width="90dp"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:text="from"
        android:background="@android:color/holo_blue_bright" />

    <TextView
        android:layout_width="90dp"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:background="@android:color/holo_blue_bright" />
</LinearLayout>

<View
    android:id="@+id/shuttle"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@android:color/holo_blue_bright"/>

Activity class:

public class MainActivity extends AppCompatActivity {
    public static final int ANIMATION_SPEED = 3000;
    private RelativeLayout rootView;
    private View fromView, toView, shuttleView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        rootView = (RelativeLayout) findViewById(R.id.rootView);
        fromView = findViewById(R.id.itemFrom);
        toView = findViewById(R.id.itemTo);
        shuttleView = findViewById(R.id.shuttle);

        fromView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Rect fromRect = new Rect();
                Rect toRect = new Rect();
                fromView.getGlobalVisibleRect(fromRect);
                toView.getGlobalVisibleRect(toRect);

                AnimatorSet animatorSet = getViewToViewScalingAnimator(rootView, shuttleView, fromRect, toRect, ANIMATION_SPEED, 0);

                animatorSet.addListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animation) {
                        shuttleView.setVisibility(View.VISIBLE);
                        fromView.setVisibility(View.INVISIBLE);
                    }

                    @Override
                    public void onAnimationEnd(Animator animation) {
                        shuttleView.setVisibility(View.GONE);
                        fromView.setVisibility(View.VISIBLE);
                    }

                    @Override
                    public void onAnimationCancel(Animator animation) {

                    }

                    @Override
                    public void onAnimationRepeat(Animator animation) {

                    }
                });
                animatorSet.start();
            }
        });
    }

    public static AnimatorSet getViewToViewScalingAnimator(final RelativeLayout parentView,
                                                           final View viewToAnimate,
                                                           final Rect fromViewRect,
                                                           final Rect toViewRect,
                                                           final long duration,
                                                           final long startDelay) {
        // get all coordinates at once
        final Rect parentViewRect = new Rect(), viewToAnimateRect = new Rect();
        parentView.getGlobalVisibleRect(parentViewRect);
        viewToAnimate.getGlobalVisibleRect(viewToAnimateRect);

        viewToAnimate.setScaleX(1f);
        viewToAnimate.setScaleY(1f);

        // rescaling of the object on X-axis
        final ValueAnimator valueAnimatorWidth = ValueAnimator.ofInt(fromViewRect.width(), toViewRect.width());
        valueAnimatorWidth.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // Get animated width value update
                int newWidth = (int) valueAnimatorWidth.getAnimatedValue();

                // Get and update LayoutParams of the animated view
                RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) viewToAnimate.getLayoutParams();

                lp.width = newWidth;
                viewToAnimate.setLayoutParams(lp);
            }
        });

        // rescaling of the object on Y-axis
        final ValueAnimator valueAnimatorHeight = ValueAnimator.ofInt(fromViewRect.height(), toViewRect.height());
        valueAnimatorHeight.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // Get animated width value update
                int newHeight = (int) valueAnimatorHeight.getAnimatedValue();

                // Get and update LayoutParams of the animated view
                RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) viewToAnimate.getLayoutParams();
                lp.height = newHeight;
                viewToAnimate.setLayoutParams(lp);
            }
        });

        // moving of the object on X-axis
        ObjectAnimator translateAnimatorX = ObjectAnimator.ofFloat(viewToAnimate, "X", fromViewRect.left - parentViewRect.left, toViewRect.left - parentViewRect.left);

        // moving of the object on Y-axis
        ObjectAnimator translateAnimatorY = ObjectAnimator.ofFloat(viewToAnimate, "Y", fromViewRect.top - parentViewRect.top, toViewRect.top - parentViewRect.top);

        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setInterpolator(new DecelerateInterpolator(1f));
        animatorSet.setDuration(duration); // can be decoupled for each animator separately
        animatorSet.setStartDelay(startDelay); // can be decoupled for each animator separately
        animatorSet.playTogether(valueAnimatorWidth, valueAnimatorHeight, translateAnimatorX, translateAnimatorY);

        return animatorSet;
    }
}

You can do a whole bunch of customizations in terms of what appears and disappears at different stages of animation in animatorSet listener. Hope it's helpful.

Android translate animation instantly requires full height while animating

    final RelativeLayout parent = null;//parent relative layout
    final View child = null;//parent relative layout child

    final int initParentHeight=parent.getHeight();

    parent.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
        @Override
        public boolean onPreDraw() {
            parent.getViewTreeObserver().removeOnPreDrawListener(this);

            int finalParentHeight = parent.getHeight();//get parent final height
            final ViewGroup.LayoutParams layoutParams = parent.getLayoutParams();
            ValueAnimator animator = ValueAnimator.ofInt(initParentHeight, finalParentHeight);
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    layoutParams.height = (int) animation.getAnimatedValue();
                    parent.requestLayout();//animate height change
                }
            });
            animator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT;//reset parent layoutparams height to wrap_content
                    parent.requestLayout();
                }
            });
            animator.setDuration(250);
            animator.start();
            return true;
        }
    });
    child.setVisibility(View.VISIBLE);

Android translate animation move to absolute position

Judging from official Documentation it is not possible from XML.
However, you can do this in your Java code. Example:

    view.animate().translationX(0f).translationY(0f).setInterpolator(new AccelerateDecelerateInterpolator()).start();

TranslationX and TranslationY animates to an absolute position. There is also TranslationXBy an TranslationYBy that animate relatively.

---

Related Topics