Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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. Here's the UI mockupMy 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!

like image 710
Rakesh Avatar asked May 27 '17 04:05

Rakesh


People also ask

How do I animate a view in android?

You can use the view animation system to perform tweened animation on Views. Tween animation calculates the animation with information such as the start point, end point, size, rotation, and other common aspects of an animation.

What can be used to animate between two or more views in android?

The transitions framework can run animations between a starting and an ending scene. You can create your scenes from a layout resource file or from a group of views in your code. However, the starting scene for your transition is often determined automatically from the current UI.

What is crossfade animation?

Crossfade animations (also know as dissolve) gradually fade out one UI component while simultaneously fading in another. This animation is useful for situations where you want to switch content or views in your app. Crossfades are very subtle and short but offer a fluid transition from one screen to the next.


1 Answers

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()
like image 104
Fernando Prieto Moyano Avatar answered Sep 27 '22 21:09

Fernando Prieto Moyano