How to implement Custom listview text animation

Question

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

If customer select an item, Selected item text moves from listview into shopping cart image. Like below image,

This type of animation is my requirement.

But my animated view stopped at end of custom row.. 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 anybody want more code I post later.. because already this qtn take more length..

My question,

My animated textview cannot exceeds bound of custom row.

so How to move custom row textview into end of the image(Shopping cart image)?

Answer 1

The goal is to animate the view from one location to another location so first we need to get the 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];

Once you have both the starting location of the textview and the location you want it to end at (location of the cartview), we need to animate from one point two the next. We can do this by placing a NEW textview on either the window layer or a framelayout above your listview.

Here we add to the window layer:

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

Next 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

Set android:clipChildren="false" on the TextView's parent view as well as any grandparent view that covers the range you want to animate inside.