How to move a view to another view using animation in Android?

Question

I have a circle at the center of the screen inside which there's an ImageView + TextView. I have another two ImageView+TextView, one at the top and another at bottom of the screen. My requirement is :

I want a copy of the top ImageView+TextView and a copy of the bottom ImageView+TextView to move in animation into the center of the circle, thereby changing the value of the textView inside the circle.

For example:

Say top textView has value 200 and bottom textview has value 300. I want a portion of those values (say 100 or 150) to animate and move into the circle, but the original values 200 and 300 should remain on the same position.

I've tried using TranslateAnimation. However I face issues finding the x and y coordinates of the center circle. It is not exactly going to the center of the circle. Also original view's position is not retained.

    TranslateAnimation animation = new
TranslateAnimation(startLayout.getX(),endLayout.getX(),
startLayout.getY(),endLayout.getY);
                    animation.setDuration(1000);
                    animation.setFillAfter(false);
                    startView.startAnimation(animation);

startLayout is the linearlayout in which ImageView and TextView reside. Please help! Thanks!

Concessionaire

No answers yet? – Concessionaire

Answer 1

I had the same issue and I fixed by using the next code (sorry is in Kotlin, but works the same in Java).Let's say viewFirst wants to reach viewTwo position:

(DON'T USE):

               viewFirst.animate()
                        .translationX(viewSecond.x)
                        .translationY(viewSecond.y)
                        .setDuration(1000)
                        .withEndAction {
                        //to make sure that it arrives, 
                        //but not needed actually these two lines
                            viewFirst.x = viewSecond.x
                            viewFirst.y = viewSecond.y
                        }
                        .start()

(USE THIS SOLUTION):

               viewFirst.animate()
                        .x(viewSecond.x)
                        .y(viewSecond.y)
                        .setDuration(1000)
                        .withEndAction {
                        //to make sure that it arrives, 
                        //but not needed actually these two lines
                            viewFirst.x = viewSecond.x
                            viewFirst.y = viewSecond.y
                        }
                        .start()

Acetum

Answer 2

Using the getX() and getY() methods define the position of the view in pixels, but the constructor you use defines Float type values that must be values from 0.0f to 1.0f

TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)

This is another option using the view`s position in pixels:

viewFirst.animate()
        .x(viewSecond.getX())
        .y(viewSecond.getY())
        .setDuration(1000).withEndAction(new Runnable() {
    @Override
    public void run() {
        viewFirst.setX(tv2.getX());
        viewFirst.setY(tv2.getY());
    }
}).start();

Spithead

Answer 3

Try this for accurate coordinates

private fun moveView(viewToBeMoved: View, targetView: View) {
val targetX: Float =
    targetView.x + targetView.width / 2 - viewToBeMoved.width / 2
val targetY: Float =
    targetView.y + targetView.height / 2 - viewToBeMoved.height / 2

viewToBeMoved.animate()
    .x(targetX)
    .y(targetY)
    .setDuration(2000)
    .withEndAction {
        targetView.visibility = View.GONE
    }
    .start()

}

Lamprophyre