I need my image slide in/out translate animation to loop in android

Question

I'm trying to get an image slideshow-type animation in my code, where an image slides in from the left of an ImageView, stays in the center for 4 seconds, then slides out to the right. But at the same time as the image exits the ImageView, I want a following image to slide in from the left and basically keep looping round.

It should work a lot like the main display on this page: http://developer.android.com/index.html

Except that it slides in from the left, not the right, and there shouldn't be any buttons.

So far I can get an image to slide in from the left and stay for 4 seconds and then the next image comes along and does the same etc. But I really need the continuous looping functionality if it's possible?

Here is my code:

HomeScreenFragment.java

private int [] Img_Ids = {
        R.drawable.splash0, R.drawable.splash1, 
        R.drawable.splash2, R.drawable.splash3      
};

    @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.activity_home_screen,
            container, false);

    final Handler mHandler = new Handler();

    final Runnable mUpdateResults = new Runnable() {
        public void run() {
            AnimateandSlideShow();
        }
    };

    int delay = 0;
    int period = 2500;
    Timer timer = new Timer();
    timer.scheduleAtFixedRate(new TimerTask() {

        public void run() {
            mHandler.post(mUpdateResults);
        }
    },delay, period);
 }



private void AnimateandSlideShow() {

    slidingimage = (ImageView)getView().findViewById(R.id.singOff);
    slidingimage.setImageResource(Img_Ids[currentimgindex%Img_Ids.length]);

    currentimgindex++;

    Animation slideInImage = AnimationUtils.loadAnimation(getActivity(), R.anim.custom_slide);

    slidingimage.startAnimation(slideInImage);

}

custom_slide.xml:

<translate
    android:fromXDelta="-100%"
    android:toXDelta="0%"
    android:fromYDelta="0%"
    android:toYDelta="0%"
    android:duration="500" />

Any help is much appreciated, thanks!

Answer 1

First, you'll probably want to add another animation, similar to custom_slide.xml but to control exiting. For example, this is your original custom_slide.xml , which I would recommend renaming to something like slide_in_from_left.xml :

<translate
    android:fromXDelta="-100%"
    android:toXDelta="0%"
    android:fromYDelta="0%"
    android:toYDelta="0%"
    android:duration="500" />

And you should add one named something like slide_out_to_right.xml :

<translate
    android:fromXDelta="0%"
    android:toXDelta="100%"
    android:fromYDelta="0%"
    android:toYDelta="0%"
    android:duration="500" />

Then you need to trigger the slide-out animation for the previous image whenever you trigger the slide-in animation for the next image. This would mean adding a second ImageView resource in addition to the one you called R.id.singOff . You can then alternate between the two, sliding one in while sliding the other out, and vice versa.