Move an ImageView to different a position using animation in Android

Question

I have several ImageViews in a RelativeLayout.

When the user taps any of the ImageViews, I want the ImageView to be moved to a specified location using a subtle animation.

Eg; I have initially set margins for LayoutParams associated with an ImageView as layoutparams1.setMargins(90,70,0,0); and I have then added it to the layout.

When the ImageView is tapped, I'd like its new location to be 200,200, done with animation.

So, is it possible? if yes, then how?

Note that I have both RelativeLayout and all of its child ImageViews created programmatically.

And I'm new to Android development so an elaborative answer is expected.

Answer 1

TranslateAnimation animation = new TranslateAnimation(0, 50, 0, 100);
animation.setDuration(1000);
animation.setFillAfter(false);
animation.setAnimationListener(new MyAnimationListener());

imageView.startAnimation(animation);

UPDATE : The problem is that the View is actually still in it's old position. So we have to move it when the animation is finished. To detect when the animation is finished we have to create our own animationListener (inside our activity class):

private class MyAnimationListener implements AnimationListener{

    @Override
    public void onAnimationEnd(Animation animation) {
        imageView.clearAnimation();
        LayoutParams lp = new LayoutParams(imageView.getWidth(), imageView.getHeight());
        lp.setMargins(50, 100, 0, 0);
        imageView.setLayoutParams(lp);
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
    }

    @Override
    public void onAnimationStart(Animation animation) {
    }

}

So the onClickEvent will get fired again at it's new place. The animation will now move it even more down, so you might want to save the x and y in a variable, so that in the onAnimationEnd() you move it not to a fix location.

Answer 2

It is better to use ObjectAnimator which actually moves the ImageView to the new position.
E.g.:

ImageView splash;

@Override
public boolean onTouchEvent(MotionEvent event) {
    float tx = event.getX();
    float ty = event.getY();

    int action = event.getAction();
    switch(action) {
        case MotionEvent.ACTION_DOWN:
            tx = event.getX();
            ty = event.getY();

            // findViewById(R.id.character).setX(tx-45);
            // findViewById(R.id.character).setY(ty-134);

            ObjectAnimator animX = ObjectAnimator.ofFloat(splash, "x", tx-45);
            ObjectAnimator animY = ObjectAnimator.ofFloat(splash, "y", ty-134);
            AnimatorSet animSetXY = new AnimatorSet();
            animSetXY.playTogether(animX, animY);
            animSetXY.start();

            break;
        default:
    }
    return true;
}

Answer 3

you can use this code

imageView.animate().x(80).y(212).setDuration(300);

or

for soft animation you can use this library

https://github.com/wirecube/android_additive_animations

Answer 4

In below code I am adding a image view in center on frame layout dynamically. After add I am increase scaling and set alpha to give zoom effect and after complete animation I am just translate my image view one position to another position.

Add image view on framelayout

    imgHeart = new ImageView(getBaseContext());
    imgHeart.setId(R.id.heartImage);
    imgHeart.setImageResource(R.drawable.material_heart_fill_icon);
    imgHeart.setLayoutParams(new FrameLayout.LayoutParams(50, 50, Gravity.CENTER));
    mainFrameLaout.addView(imgHeart);

Add animation on image view

       imgHeart.animate()
            .scaleXBy(6)
            .scaleYBy(6)
            .setDuration(700)
            .alpha(2)
            .setListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {

                }

                @Override
                public void onAnimationEnd(Animator animation) {
                    imgHeart.animate()
                            .scaleXBy(-6f).scaleYBy(-6f)
                            .alpha(.1f)
                            .translationX((heigthAndWidth[0] / 2) - minusWidth)
                            .translationY(-((heigthAndWidth[1] / 2) - minusHeight))
                            .setDuration(1000)
                            .setListener(new Animator.AnimatorListener() {
                                @Override
                                public void onAnimationStart(Animator animation) {
                                }

                                @Override
                                public void onAnimationEnd(Animator animation) {
                                // remove image view from framlayout
                                }
                                @Override
                                public void onAnimationCancel(Animator animation) {
                                }

                                @Override
                                public void onAnimationRepeat(Animator animation) {
                                }
                            }).start();
                }

                @Override
                public void onAnimationCancel(Animator animation) {

                }

                @Override
                public void onAnimationRepeat(Animator animation) {

                }
            }).start();

Answer 5

you can use this code :)

 private void animeView(View imageView){

        Handler handler = new Handler();
        final int[] deltaX = {50};
        final int[] deltaRotation = {45};
        handler.postDelayed(new Runnable() {
             @Override
             public void run() {
                 imageView.animate().translationX(deltaX[0])
                                    .rotation(deltaRotation[0]).setDuration(1000) ;
                 deltaX[0] *=-1 ;
                 deltaRotation[0] *=-1 ;
                 handler.postDelayed(this , 1000);
             }
         },1000);

    }