NPE NPE - 2 months ago 25
Android Question

Animate Views one after another

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

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

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

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

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
    int delay = i * delayBetweenAnimations;

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