Animate Views one after another

Question

I want to animate a few TextViews one after another like the cards in the Google Now app. I found this question and I tried to follow its instructions, but all animations are playing at the same time. What am I doing wrong?

This is the animation I want to play:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator" >

    <translate
        android:duration="@integer/config_slide_time"
        android:fromYDelta="100%p"
        android:toYDelta="0" />

    <alpha
        android:duration="@integer/config_slide_time"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />

    <rotate
        android:duration="@integer/config_slide_time"
        android:fromDegrees="25"
        android:pivotX="0"
        android:pivotY="0"
        android:toDegrees="0" />

</set>

This is the layout I am using:

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.yai.properti.tujuh.tujuh.tujuh.ReadUserProfile$PlaceholderFragment" >

    <com.yai.app.animation.support.NowLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#e3e3e3"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/txtView"
            style="@style/nowCardStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="aaa"
            tools:context=".MainActivity" />

        <TextView
            android:id="@+id/txtView1"
            style="@style/nowCardStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="bbb"
            tools:context=".MainActivity" />

        <TextView
            android:id="@+id/txtView2"
            style="@style/nowCardStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="ccc"
            tools:context=".MainActivity" />

        <TextView
            android:id="@+id/txtView3"
            style="@style/nowCardStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="ddd"
            tools:context=".MainActivity" />

        <TextView
            android:id="@+id/txtView4"
            style="@style/nowCardStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="eee"
            tools:context=".MainActivity" />

    </com.yai.app.animation.support.NowLayout>

</RelativeLayout>

Answer 1

Try looping through the Views and start the Animation with postDelayed() like this:

View[] views = new View[] { ... };

// 100ms delay between Animations
long delayBetweenAnimations = 100; 

for(int i = 0; i < views.length; i++) {
    final View view = views[i];

    // We calculate the delay for this Animation, each animation starts 100ms 
    // after the previous one
    long delay = i * delayBetweenAnimations;

    view.postDelayed(new Runnable() {
        @Override
        public void run() {
            Animation animation = AnimationUtils.loadAnimation(context, R.anim.your_animation);    
            view.startAnimation(animation);
        }
    }, delay);
}