How can I animate one View after another instead of all at the same time?

Question

I am adding TextViews dynamically to a LinearLayout. I want to animate each View so they slide in one after another from the left. This is what I currently have:

for ( int i=0; i < SOME_SIZE; i ++ ) {
    linearLayout.addView(addLessonsView(i))
}

public View addLessonsView(int position) {

    LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(LAYOUT_INFLATER_SERVICE);
    View v = inflater.inflate(R.layout.row_memory_book_lessons, null);

    TextView tvLesson = (TextView) v.findViewById(R.id.tvLesson);

    tvLesson.setText(mLessonList.get(position).getLessonNumber() + " - " + mLessonList.get(position).getLessonName());

    Animation animation = AnimationUtils.loadAnimation(mContext, R.anim.slide_left_to_right);
    tvLesson.startAnimation(animation);

    v.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {

        }
    });
    return v;
}

The problem is that all of the Animations happen at the same time instead of one after another. How can I slide the Views in one after another?

Answer 1

You are starting all Animations at the same time which is why all of the Views slide in at the same time. What you need to do is add a start offset to each Animation which corresponds to its position in the List.

For example to delay each Animation to play 75ms after the one before it you can do this:

Animation animation = AnimationUtils.loadAnimation(mContext, R.anim.slide_left_to_right);

final long startOffset = position * 75;
animation.setStartOffset(startOffset);

tvLesson.startAnimation(animation);

---

Additionally I suggest you switch to the newer Animator API which was introduced Android 3.0 (Honeycomb). The old view animations you are using are outdated to say the least.

Click here to get started with the newer API.