Move continously a background to the right and make it reappear from the left

Question

I have an image for my layout background. I want it to start moving to the right, and every frame that disappears from the right, should reappear on the left. Therefore, the image will keep moving continously with only one frame of the photo. How can I do that?

try if is this that you want [How to move an image from left to right in android](http://stackoverflow.com/questions/4689918/how-to-move-an-image-from-left-to-right-in-android) — BrunoM24, Dec 21 '16 at 14:19

Blo · Accepted Answer · 2016-12-23T00:34:45.213

The easiest and fastest way to do so, it's to having two ImageViews in a ViewGroup and animate them with two differents animations. By getting the container's width, the first will move from its position (START) to the right edge (PARENT_WIDTH), and the second will follow from outside the container (-PARENT_WIDTH) to inside (START). Finally, make the animations repeat INFINITE will do the illusion of a real loop.

private ViewGroup parent;
private ImageView imgInner, imgOutter;

@Override
public void onCreate(...) {
    ...
    parent = (ViewGroup) findViewById(R.id.parent_loop);
    imgInner = (ImageView) findViewById(R.id.image_loop_inner);
    imgOutter = (ImageView) findViewById(R.id.image_loop_outter);
    ...
    setImageLoop();
}

private void setImageLoop() {
    // Need a thread to get the real size or the parent
    // container, after the UI is displayed
    imgInner.post(new Runnable() {
        @Override
        public void run() {
            TranslateAnimation outAnim =
                    new TranslateAnimation(
                            0f, parent.getWidth(), 0f, 0f);
                    // move from 0 (START) to width (PARENT_SIZE)
            outAnim.setInterpolator(new LinearInterpolator());
            outAnim.setRepeatMode(Animation.INFINITE); // repeat the animation
            outAnim.setRepeatCount(Animation.INFINITE);
            outAnim.setDuration(2000);

            TranslateAnimation inAnim =
                    new TranslateAnimation(
                            - parent.getWidth(), 0f, 0f, 0f);
                    // move from out width (-PARENT_SIZE) to 0 (START)
            inAnim.setInterpolator(new LinearInterpolator());
            inAnim.setRepeatMode(Animation.INFINITE);
            inAnim.setRepeatCount(Animation.INFINITE);
            inAnim.setDuration(2000); // same duration as the first

            imgInner.startAnimation(outAnim); // start first anim
            imgOutter.startAnimation(inAnim); // start second anim
        }
    });
}

The container ViewGroup has match_parent on its width, but it could be changed, and therefore the START attribute will be replaced by something like parent.getLeft(). This layout could be a LinearLayout, a RelativeLayout, or whatever. For example, I used this:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="250dp"
    ...>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        .../>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        .../>
</FrameLayout>

Which gives my this output (keep in mind the gif makes it look choppy when it is really not):

Infinite loop for imageviews from right to left

Thank you so much. Worked ! – Levi Omer Dec 26 '16 at 15:50 — Levi Omer, Dec 26 '16 at 15:50

Rajakumar · Answer 2 · 2016-12-22T05:54:59.567

0

Updated the code:

 img = (ImageView) findViewById(R.id.imageView1);
 TranslateAnimation animation = new TranslateAnimation(-95.0f, 740.0f,
            0.0f, 0.0f); // new TranslateAnimation(xFrom,xTo, yFrom,yTo)
 animation.setDuration(5000); // animation duration
 animation.setRepeatCount(5); // animation repeat count

 img.startAnimation(animation); // start animation

edited Dec 22 '16 at 05:54

answered Dec 21 '16 at 14:40

Rajakumar

907
1
7
17

But it wont make the img to start coming from the left side. I need it to go right just like it did, and then appear on the left side and look like it continuing. – Levi Omer Dec 21 '16 at 16:21
I updated the code please try this one.Thanks in advance – Rajakumar Dec 22 '16 at 05:55

Move continously a background to the right and make it reappear from the left

2 Answers2