Android Activity Animation Customization Tutorial

If you are thinking on customizing the animation of Activity transition then probably you would look for ActivityOptions class introduced in Android 4.1 (Jelly bean). This class has provided three methods which can help you to customize the Activity Animation. These are given in the table below.

ActivityOptions Class Methods

Function NameDescription
makeCustomAnimationThis method allows to pass custom animation and when the Atyctivi is launched, it gets rendered accordingly. Here you can pass animation for transitioning out Activity as well as for transitioning in Activity
makeScaleUpAnimationThis method scales up the Activity from the initial size to its final representational size. It can be used to scale up the activity from the view which has launched this activity.
makeThumbnailScaleUpAnimationIn this animation, a thumbnail of the activity scales up to the final size of the activity.
toBundleThis method returns Bundle object which can be passed in the startActivity() method for desired animation.

For more information on ActivityOptions you can refer here.

Project Information: Meta-data about the project.
Platform Version : Android API Level 16.
IDE : Eclipse Helios Service Release 2
Emulator : Android 4.1(API 16)

Prerequisite: Preliminary knowledge of Android application framework, and Intent.

Sample Source Code:

We create a project using eclipse and then create anim (Animation) folder under res(resource) folder. Now we will define the animation attributes in the xml files and put it in anim folder. Here, we are going to define two animations which will be used in makeCustomAnimation() method. makeCustomAnimation takes two animation files, one for incoming activity and another for outgoing activity. Either of the animations can be null and in that case animation will not be performed for that particular activity. Now we will define fade_in.xml for incoming activity. Here we are going to change the Alpha value from 0 to 1 which makes activity transparent to opaque.

<alpha xmlns:android='http://schemas.android.com/apk/res/android'
   android:interpolator='@android:anim/anticipate_interpolator'
   android:fromAlpha='0.0' android:toAlpha='1.0'
   android:duration='@android:integer/config_longAnimTime' />

Now we are going to define the another file called fade_out.xml file for transitioning out Activity. Here we will change the value of Alpha from 1 to 0.

<alpha xmlns:android='http://schemas.android.com/apk/res/android'
   android:interpolator='@android:anim/anticipate_interpolator'
   android:fromAlpha='1.0' android:toAlpha='0.0'
   android:duration='@android:integer/config_longAnimTime' />

Now we are going to define the layout file for the main activity. Name this file as acitivity_main.xml. In this file we will add three buttons for corresponding animation.

<LinearLayout 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:orientation='vertical' >

    <Button
        android:layout_width='match_parent'
        android:layout_height='wrap_content'
        android:onClick='fadeAnimation'
        android:text='@string/btFadeAnimation' />
    <Button
        android:layout_width='match_parent'
        android:layout_height='wrap_content'
        android:onClick='scaleupAnimation'
        android:text='@string/btScaleupAni' />
   <Button
        android:layout_width='match_parent'
        android:layout_height='wrap_content'
        android:onClick='thumbNailScaleAnimation'
        android:text='@string/btThumbNailScaleupAni' />

</LinearLayout>

As you may have noticed that we have already attached onclick method with each button. These methods will animate the activity when it is launched using startActivity() method. Now let’s define the another layout for the target Activity with one ImageView. Put an image in drawable folder and then use that image as src for Image view. Here I have put “freelance2.jpg” image in drawable folder and have used android:src tag to use the image. Name the layout file as activity_animation.xml

<RelativeLayout xmlns:android='http://schemas.android.com/apk/res/android'
   android:layout_width='match_parent'
   android:layout_height='match_parent'
   android:orientation='vertical' >
   <ImageView
     android:id='@+id/imageView1'
     android:layout_width='match_parent'
     android:layout_height='match_parent'
     android:layout_marginRight='44dp'
     android:layout_marginTop='54dp'
     android:layout_centerInParent='true'
     android:src='@drawable/freelancer2' />

</RelativeLayout>

Once this layout is defined, we need to define the corresponding Activity class. Let’s name this class as AnimationActivity. The source code is as following:

package com.example.jellybeananimationexample;

import android.app.Activity;
import android.os.Bundle;

public class AnimationActivity extends Activity {

 @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animation);
    }
}

Now, it’s time to define the MainActivity class having methods to customize the Activity animation.

package com.example.jellybeananimationexample;

import android.app.Activity;
import android.app.ActivityOptions;
import android.content.Intent;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends Activity {

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
 }

 public void scaleupAnimation(View view) {
  // Create a scale-up animation that originates at the button
  // being pressed.
  ActivityOptions opts = ActivityOptions.makeScaleUpAnimation(view, 0, 0,
    view.getWidth(), view.getHeight());
  // Request the activity be started, using the custom animation options.
  startActivity(new Intent(MainActivity.this, AnimationActivity.class),
    opts.toBundle());
 }

 public void thumbNailScaleAnimation(View view) {
  view.setDrawingCacheEnabled(true);
  view.setPressed(false);
  view.refreshDrawableState();
  Bitmap bitmap = view.getDrawingCache();
  ActivityOptions opts = ActivityOptions.makeThumbnailScaleUpAnimation(
    view, bitmap, 0, 0);
  // Request the activity be started, using the custom animation options.
  startActivity(new Intent(MainActivity.this, AnimationActivity.class),
    opts.toBundle());
  view.setDrawingCacheEnabled(false);
 }

 public void fadeAnimation(View view) {
  ActivityOptions opts = ActivityOptions.makeCustomAnimation(
    MainActivity.this, R.anim.fade_in, R.anim.fade_out);
  // Request the activity be started, using the custom animation options.
  startActivity(new Intent(MainActivity.this, AnimationActivity.class),
    opts.toBundle());
 }

}

Once you are done with code, execute it. On clicking the application button, you will see the customized activity animation.

You can get the updated Android Animation source code from here.

For Android tutorial visit here.

Reference: Tutorial on customization of Android Activity Animation from our JCG partner Rakesh Cusat at the Code4Reference blog.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

JPA Mini Book

Learn how to leverage the power of JPA in order to create robust and flexible Java applications. With this Mini Book, you will get introduced to JPA and smoothly transition to more advanced concepts.

JVM Troubleshooting Guide

The Java virtual machine is really the foundation of any Java EE platform. Learn how to master it with this advanced guide!

Given email address is already subscribed, thank you!
Oops. Something went wrong. Please try again later.
Please provide a valid email address.
Thank you, your sign-up request was successful! Please check your e-mail inbox.
Please complete the CAPTCHA.
Please fill in the required fields.

Leave a Reply


four × 8 =



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

Get ready to Rock!
You can download the complementary eBooks using the links below:
Close