Introduction

In this series of tutorials I will talk about Android Animations. The Animations Framework lets you create visually appealing animations and transitions in you apps. Using these animations in the right places can turn your good looking app into an outstanding and highly usable app. Adding animations can look like a challenging task but it is actually not that difficult at all. In this series I want to show how simple animations really are and encourage you to use them more freely and confidently.

Android defines three types of animation mechanisms. In order to start with animations you will not have to know about all three systems. The simplest system, the View Animation, is already powerful enough to handle many common requirements.

The View Animation system is the simplest of the three mechanisms. It lets you define properties of your Views that should be animated using a technique called tween animation. You implement the animation by specifying transformations on your View at the start and at the end of the animation. This can be done in XML resource files or programmatically. The downside of this mechanism is that it can only be applied to Views.

The Property Animation system is much more powerful that the View Animation system. It lets you animate essentially anything. The animations are highly customizable, you can specify the duration, the type of interpolation, the number of repeats and even (within limits) the frame rate of the animation. According to the manual, the Property Animation system should be your first choice for more complex animations.

The Drawable Animation gives you the most freedom in the sense that you can specify every single frame of the animation as a separate Drawable resource. It is akin to the more traditional animation in which images are shown one after another in quick succession. The downside of this approach is that every frame has to be specified separately. This can and up to be very tedious and time consuming.

View Animations

In this first part of the Animations Tutorial I will introduce View Animations and show you how you can quickly create animations with this simple and easy to use system.

A simple scale animation

Before we start with our animation we have to set the scene. This means that we have to prepare an activity with a layout that will be the stage our animation will play on. We create a simple layout consisting of a FrameLayout that contains a LinearLayout with two images and a single ImageView.

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

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <ImageView
      android:id="@+id/imageView1"
      android:layout_width="wrap_content"
      android:layout_height="0dp"
      android:layout_weight="1.0"
      android:padding="10dp"
      android:clickable="true"
      android:onClick="imageClicked"
      android:src="@raw/rome01" />

    <ImageView
      android:id="@+id/imageView2"
      android:layout_width="wrap_content"
      android:layout_height="0dp"
      android:layout_weight="1.0"
      android:padding="10dp"
      android:clickable="true"
      android:onClick="imageClicked"
      android:src="@raw/rome02" />

  </LinearLayout>

  <ImageView
    android:id="@+id/animatedImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="invisible" />

</FrameLayout>

The linear layout contains two images. These are just simple jpegs which have been placed in the /res/raw folder. Note that the two images are clickable and we are calling a method called imageClicked() when we click on an image.

After the linear layout there is another ImageView that does not contain any image as yet. I have also set the visibility property of this ImageView to false. This means that the view will, initially, be invisible. This ImageView is the container that will be animated. In general we can animate any View object in out layout.

Now the initial work is done, we can start declaring a simple animation. We do this by creating an XML file in the /res/anim/ folder. Let’s begin with a simple scale animation and store it in a file called scale_animation01.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
  android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  android:duration="300"
  android:fillAfter="true"
  android:fromXScale="0.0"
  android:fromYScale="0.0"
  android:toXScale="1.0"
  android:toYScale="1.0" />

The file contains all the details of the animation. The duration is 300ms. This is a good duration for many transitions and is not too long or short. We can set transformations for the start and end of the animation. These are generally set by properties of the form

android:fromTRANSFORMATION
android:toTRANSFORMATION

Here TRANSFORMATION is the transformation that we want to specify. In our case we start with an x and y scale of 0 and end with an x and y scale of 1. The fillAfter property specifies whether the view should be visible or hidden at the end of the animation. In our case we want the view to remain visible, so we set the property to true.

Now all we have to do is start the animation when an image is clicked. We do this by implementing the imageClicked method in our activity.

public void imageClicked(View thumbnailView) {
  ImageView thumbnail = (ImageView)thumbnailView;
  ImageView animatedImage = (ImageView) findViewById(R.id.animatedImage);
  animatedImage.setImageDrawable(thumbnail.getDrawable());
  animatedImage.setVisibility(View.VISIBLE);

  Animation animation
    = AnimationUtils.loadAnimation(this, R.anim.scale_animation01);
  animatedImage.startAnimation(animation);
}

The first three lines are merely needed for obtaining the two image views representing the thumbnail and the animated image. We transfer the image from the thumbnail into the animated image using the setImageDrawable method.

Starting the animation is then a matter of just two lines.

Animation animation
  = AnimationUtils.loadAnimation(this, R.anim.scale_animation01);

This line loads the animation from the resources. loadAnimation takes two arguments, the application context and a resource identifier pointing to our scale_animation01.xml file.

Finally the animation is started with the following line.

animatedImage.startAnimation(animation);

Here we start the animation that we just obtained on animatedImage.

The animation in action

(1) The layout before the animation.

The first screenshot shows the activity before the animation starts. The two thumbnails are displayed in the vertical linear layout. The animatedImage is not visible. Clicking on one of the images will trigger the animation.

(2) The animation in progress.

In the next screenshot shows the animation is in progress. The Drawable from the clicked image has been copied to animatedImage. The animation automatically takes care of making the animated view visible. The image is scaled from the top left corner of the screen.

(3) Final state of the animation.

When the animation is finished animatedImage fills the screen. It remains visible after the animation terminates because we set the fillAfter flag to true. This state is shown in the lower screenshot on the left.

I hope you enjoyed this tutorial. Next week I will show you how to customize the animation and create more elaborate effects with the ViewAnimation system.

Follow the author

Tagged with:
 

4 Responses to Android Animations Tutorial 1: Introduction

  1. David Azar says:

    Amazing.
    Thanks for a such a thorough explanation. Looking forward to complete all of this series chapters.

    Thanks Again

  2. AndroidCuet says:

    Thank you for your excellent post

  3. Conor says:

    Great tutorial!

  4. ThanhLoyal says:

    Thank you very much.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>