How to implement custom text list animation

Question

I am creating a shopping application in android. In my application, I show a list of items from a custom list.

If the customer selects an item, the selected item text is moved from the list to the shopping cart image. As shown below

This type of animation is my requirement.

But my animated view stopped at the end of the user line .. like this image.

My animation.xml code,

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator" android:fillAfter="true" > <translate android:fromYDelta="0%p" android:toYDelta="100%p" android:fromXDelta="0%p" android:toXDelta="100%p" android:duration="1000" /> <alpha android:duration="500" android:fromAlpha="1.0" android:interpolator="@android:anim/accelerate_interpolator" android:toAlpha="0.0" /> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:duration="3500" android:fromXScale="1.0" android:fromYScale="1.0" android:toXScale="0.0" android:toYScale="0.2" > </scale> </set> 

Note: If someone wants more code, I post later .. because already this qtn takes longer.

My question is

My animated text view cannot exceed the bounds of the user line.

so How to transfer custom line text to the end of the image (shopping cart image)?

Answer 1

The goal is to animate the view from one place to another, so first we need to get two points. You can do the following:

 int[] screenLocation = new int[2]; textView.getLocationOnScreen(screenLocation); int startX = screenLocation[0]; int startY = screenLocation[1]; int[] screenLocationB = new int[2]; cartView.getLocationOnScreen(screenLocationB); int endX = screenLocationB[0]; int endY = screenLocationB[1]; 

As soon as you have both the original location of the text field and the location you want it to end (the location of the viewer), we need to animate one point from the next two. We can do this by placing the NEW textview on the window layer or in the frame above your list.

Here we add the windows to the layer:

 WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams(); layoutParams.width = view.getMeasuredWidth(); layoutParams.height = view.getMeasuredHeight(); activity.addContentView(newTextView, layoutParams); 

Then we set the starting position.

  newTextView.setTranslationX(startX); newTextView.setTranslationY(startY); 

Finally, we animate.

  newTextView.animate().setDuration(300) .translationX(endX).translationY(endX).start() 

Answer 2

I believe that this is what you care. You can use something called View Overlay . What you need is like the first animation in which a button falls from its frame to the bottom of the screen.

Summary below

  final Button button = (Button) findViewById(R.id.button); button.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { // Our button is added to the parent of its parent, the most top-level layout final ViewGroup container = (ViewGroup) button.getParent().getParent(); container.getOverlay().add(button); ObjectAnimator anim = ObjectAnimator.ofFloat(button, "translationY", container.getHeight()); //You dont need rotation ObjectAnimator rotate = ObjectAnimator.ofFloat(button, "rotation", 0, 360); rotate.setRepeatCount(Animation.INFINITE); rotate.setRepeatMode(Animation.REVERSE); rotate.setDuration(350); /* * Button needs to be removed after animation ending * When we have added the view to the ViewOverlay, * it was removed from its original parent. */ anim.addListener(new AnimatorListener() { @Override public void onAnimationStart(Animator arg0) { } @Override public void onAnimationRepeat(Animator arg0) { } @Override public void onAnimationEnd(Animator arg0) { container.getOverlay().remove(button); } @Override public void onAnimationCancel(Animator arg0) { container.getOverlay().remove(button); } }); anim.setDuration(2000); AnimatorSet set = new AnimatorSet(); set.playTogether(anim, rotate); set.start(); } }); 

In your case, you need to correctly identify the container. This should be the root activity. Also the button in the example is the view that you will be animating (song name). Finally, do the translation as per your requirement.

Answer 3

Set android:clipChildren="false" in the parent view of the TextView, as well as in any grandparents view that covers the range in which you want to animate inside.