Android Animation : Animating multiple views one after the other

The Google Chrome app for Android, on click of menu button there is animation on the views or texts as they display (animate from top to bottom).

So how to animate multiple objects or views one after the other ?

Inspired from Google chrome app, wanted to achieve the same effect so called “Fade In”.

i3a6c

Implementation :

XML Layout :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/animateButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Animate"
        android:layout_gravity="center"/>

    <TextView
        android:id="@+id/textA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        android:layout_gravity="center"
        android:textSize="48sp"
        />

    <TextView
        android:id="@+id/textB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        android:layout_gravity="center"
        android:textSize="48sp"
         />

    <TextView
        android:id="@+id/textC"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C"
        android:layout_gravity="center"
        android:textSize="48sp"
        />

    <TextView
        android:id="@+id/textD"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="D"
        android:layout_gravity="center"
        android:textSize="48sp"
        />

    <TextView
        android:id="@+id/textE"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="E"
        android:layout_gravity="center"
        android:textSize="48sp"
         />

    <TextView
        android:id="@+id/textF"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="F"
        android:layout_gravity="center"
        android:textSize="48sp"
        />

</LinearLayout>

In the above xml i have used 6 textviews to animate, its just an example that i have taken as textviews or it can be any layout or views.

AnimationActivity Class :

public class AnimationActivity extends Activity{

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.animated_layout);

		Button animate = (Button)findViewById(R.id.animateButton);
		animate.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				animateButtons();
			}
		});
	}

	public void animateButtons() {
       // int[] imageButtonIds = {R.id.animateButton};
          int[] textViewIds = {R.id.textA, R.id.textB, R.id.textC,R.id.textD,R.id.textE,R.id.textF};

        int i = 1;

        for (int viewId : textViewIds) {
            // Button imageButton = (Button) findViewById(viewId);
               Animation fadeAnimation = AnimationUtils.loadAnimation(this, R.anim.fading_effect);
               fadeAnimation.setStartOffset(i * 200);
            //imageButton.startAnimation(fadeAnimation);

            int textViewId = textViewIds[i-1];
            TextView textView = (TextView) findViewById(textViewId);
            textView.startAnimation(fadeAnimation);

            i ++;
        }
    }

Animation Layout : R.anim.fading_effect

<?xml version="1.0" encoding="utf-8"?>

    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
           android:interpolator="@android:anim/accelerate_decelerate_interpolator"
           android:fromAlpha="0.0" android:toAlpha="1.0"
           android:duration="500" />

In the activity we have fadeAnimation.setStartOffset(i * 200) , we can change the value of 200 to increase or decrease the speed of animation.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s