How to slide an ImageView from left to right smoothly in Android?

Question

I need to make an ImageView slide from left to right of the screen with a smooth animation (I want the ImageView to be visible during the transition) I tried with the following code:

Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;

camion.animate()
    .translationX(width)
    .setDuration(2000)
    .setInterpolator(new LinearInterpolator())
    .setListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            //camion.setVisibility(View.GONE);
        }
    });

The ImageView moves but the animation is laggy and not smooth like I want to. What am I doing wrong on the code?

see this answer : http://stackoverflow.com/a/12999391/2337837 — Zied R., Jul 22 '15 at 12:16
@ZiedRebhi I tried the example but the animation is still laggy — LS_, Jul 22 '15 at 12:30
Just curious, what device are you testing this on? Or are you testing on an emulator? — Dom, Jul 27 '15 at 08:43

Aritra Roy · Accepted Answer · 2015-07-28T06:30:28.420

Creating this kind of tween animation is simple. Just follow the steps,

Step 1

Create a directory anim inside the res directory and put this as slide.xml

<?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:fromXDelta="0%p"
        android:toXDelta="75%p"
        android:duration="800" />
</set>

You can obviously customize the animation by changing the two attributes fromXDelta and toXDelta. The %p refers to with respect to the parent which simply means that it will move the image 75% with respect to the parent.

Step 2

// Refer the ImageView like this
imageView = (ImageView) findViewById(R.id.img);

// Load the animation like this
animSlide = AnimationUtils.loadAnimation(getApplicationContext(),
                    R.anim.slide);

// Start the animation like this
imageView.startAnimation(animSlide);

You can also setInterpolator() and setListeners() if you want to. I haven't shown them here to keep it simple. If you need, just let me know.

NOTE

As you have mentioned repeatedly, that you are experiencing a laggy animation. I have tested this animation on 3 real devices and 2 emulators and the animation was buttery smooth on all of them. Tested on low end devices like Moto E to high end devices like Nexus 5 and Galaxy S6.

If you still have a lag running this code, then the test device must be the reason. The code is perfect.

UPDATE

I just checked on my Moto G running on Lollipop too, the animation is running smoothly. This is a very small and light-weight animation, and should never be laggy. If you are still getting a lag, then it must be the device you are testing, or some other piece of code on that Activity making the UI slow or unresponsive.

Try to check which one is applicable to you,

I have tested on a total of 6 devices now with no lag at all. So, you can be rest assured that your production app will not have any lag, it can be your device which is slow
If you are doing some heavy operations like accessing the file system, database, or any other heavy operation, it must be slowing down the UI thread and you are loosing frames. Try to use AsyncTask for these heavy operations

ok I've tried it but on my Moto G it's still laggy. I'm going to test it on other 2 devices soon, i'll let you know! — LS_, Jul 27 '15 at 09:03
The problem was the background image that was way too big and required lot of cpu to render, I've reduced its size and now it's working fine, ty a lot for your answer! I'll give you the bounty as soon as I can — LS_, Jul 27 '15 at 09:54
Glad to know that it is working fine now. I have also spent a lot of time testing it on so many devices just for you. Hope you will accept the answer and reward the bounty. Thanks. — Aritra Roy, Jul 27 '15 at 10:20
@Signo Will it be possible to accept the answer and reward the bounty? I have just upvoted your question too. — Aritra Roy, Jul 28 '15 at 06:30
I needed to wait 22 hours to accept the answer, one more hour and i'll be able to accept! — LS_, Jul 28 '15 at 06:34
@Signo I can understand. Not a problem at all. It would be great if you can assign the bounty. Thanks. — Aritra Roy, Jul 28 '15 at 06:39
@ Aritra Roy :Your answer is perfect..Thank you.And any other way to repeat this animation in a loop ?? — Jack, Dec 08 '16 at 06:28

score 6 · Answer 2 · answered Jul 22 '15 at 12:17

6

Try this. It will animate the imageview.

        ImageView img_animation = (ImageView) findViewById(R.id.img_animation);
        Display display = getWindowManager().getDefaultDisplay();
        float width = display.getWidth();
        TranslateAnimation animation = new TranslateAnimation(0, width - 50, 0, 0); // new TranslateAnimation(xFrom,xTo, yFrom,yTo)
        animation.setDuration(1000); // animation duration
        animation.setRepeatCount(5); // animation repeat count
        animation.setRepeatMode(2); // repeat animation (left to right, right to
                                    // left )
        // animation.setFillAfter(true);

        img_animation.startAnimation(animation); // start animation

answered Jul 22 '15 at 12:17

Gopal Singh Sirvi

4,539
5
33
55

1

I already tried this solution (I've found it on an old SO question) but the animation is laggy even with this method – LS_ Jul 22 '15 at 12:31
ok i am trying to do this for you. until wait for some more answers – Gopal Singh Sirvi Jul 22 '15 at 12:35
once look at this http://stackoverflow.com/questions/13860780/animate-imageview-width-without-scaling – Gopal Singh Sirvi Jul 22 '15 at 12:36
1

mm I don't think that's they want to achieve watching the fiddle, I tried the method but it scales the image – LS_ Jul 22 '15 at 12:48

score 6 · Answer 3 · edited Apr 07 '16 at 11:09

6

TranslateAnimation animate = new TranslateAnimation(0, -view.getWidth(), 0, 0);
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);

edited Apr 07 '16 at 11:09

Mike

4,550
4
33
47

answered Apr 07 '16 at 09:44

subrahmanyam boyapati

2,836
1
18
28

score 3 · Answer 4 · answered Jul 27 '15 at 08:55

Hope this works for u

animation.xml

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Animation" >

    <ImageView
        android:id="@+id/img_animation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="42dp"
        android:src="@drawable/emo_im_laughing" />

</RelativeLayout>

Animation.java

import android.os.Bundle;
import android.app.Activity;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

public class Animation extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.);

  ImageView img_animation = (ImageView) findViewById(R.id.img_animation);

  TranslateAnimation animation = new TranslateAnimation(0.0f, 400.0f,
    0.0f, 0.0f);
  animation.setDuration(5000);
  animation.setRepeatCount(5);
  animation.setRepeatMode(2);
  animation.setFillAfter(true);
  img_animation.startAnimation(animation);

 }
}

How to get current position of view after end of translate animation ?? — Akash Attal, Jun 07 '20 at 11:14

score 3 · Answer 5 · edited Dec 15 '16 at 09:44

3

try the code below

TranslateAnimation animation = new TranslateAnimation(0.0f, 0.0f, 0.0f, 1500.0f); // new TranslateAnimation (float fromXDelta,float toXDelta, float fromYDelta, float toYDelta)
animation.setDuration(2000); // animation duration
animation.setRepeatCount(1); // animation repeat count if u repeat only once set to 1 if u don't repeat set to 0
animation.setFillAfter(false);
your_view .startAnimation(animation);//your_view for mine is imageView

edited Dec 15 '16 at 09:44

ddb

2,423
7
28
38

answered Dec 15 '16 at 08:28

Andrew Coder

246
2
6

How to get current position of view after end of translate animation ? – Akash Attal Jun 07 '20 at 11:16

score 1 · Answer 6 · edited Jun 07 '16 at 05:37

public class MainActivity extends Activity {

       int windowwidth;
       int windowheight;

       private LayoutParams layoutParams;

       @Override
       public void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.activity_main);

              windowwidth = getWindowManager().getDefaultDisplay().getWidth();
              windowheight = getWindowManager().getDefaultDisplay().getHeight();
              final ImageView img = (ImageView) findViewById(R.id.imageView1);

              img.setOnTouchListener(new View.OnTouchListener() {

                     @Override
                     public boolean onTouch(View v, MotionEvent event) {
                           LayoutParams layoutParams = (LayoutParams) img
                                         .getLayoutParams();
                           switch (event.getAction()) {
                           case MotionEvent.ACTION_DOWN:
                                  break;
                           case MotionEvent.ACTION_MOVE:
                                  int x_cord = (int) event.getRawX();
                                  int y_cord = (int) event.getRawY();

                                  if (x_cord > windowwidth) {
                                         x_cord = windowwidth;
                                  }
                                  if (y_cord > windowheight) {
                                         y_cord = windowheight;
                                  }

                                  layoutParams.leftMargin = x_cord - 25;
                                  layoutParams.topMargin = y_cord - 75;

                                  img.setLayoutParams(layoutParams);
                                  break;
                           default:
                                  break;
                           }
                           return true;
                     }
              });
       }
}

There are already several answer to this question including one that has been accepted. You might want to edit your answer to explain how it is different from the others and what its advantages are. — Blackwood, Aug 08 '15 at 03:27

score 0 · Answer 7 · answered Mar 05 '19 at 07:09

To Move imageview

from Right to Left Using @Aritra Roy Answer.

Use this 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:fromXDelta="75%p"
        android:toXDelta="0%p"
        android:duration="100000" />
</set>

score 0 · Answer 8 · answered Nov 13 '22 at 21:00

0

Now we have MotionLayout try to use that for very clean and smooth sliding animation.

answered Nov 13 '22 at 21:00

Sharad

589
5
19

How to slide an ImageView from left to right smoothly in Android?

8 Answers8

Linked