Tutorial details

Android Activity Animation Customization Tutorial | App Code for Sale | Preview

Android Activity Animation Customization Tutorial | Android Tutorial

How to use Activity Animation.

Overview PAGE TOP

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 PAGE TOP

taaaa1.JPG

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.

1    <alpha xmlns:android='http://schemas.android.com/apk/res/android'
2      android:interpolator='@android:anim/anticipate_interpolator'
3      android:fromAlpha='0.0' android:toAlpha='1.0'
4      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.

1   <alpha xmlns:android='http://schemas.android.com/apk/res/android'
2      android:interpolator='@android:anim/anticipate_interpolator'
3      android:fromAlpha='1.0' android:toAlpha='0.0'
4      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.

01  <LinearLayout xmlns:android='http://schemas.android.com/apk/res/android'
02      xmlns:tools='http://schemas.android.com/tools'
03      android:layout_width='match_parent'
04      android:layout_height='match_parent'
05      android:orientation='vertical' >
06  
07      <Button
08          android:layout_width='match_parent'
09          android:layout_height='wrap_content'
10          android:onClick='fadeAnimation'
11          android:text='@string/btFadeAnimation' />
12      <Button
13          android:layout_width='match_parent'
14          android:layout_height='wrap_content'
15          android:onClick='scaleupAnimation'
16          android:text='@string/btScaleupAni' />
17     <Button
18          android:layout_width='match_parent'
19          android:layout_height='wrap_content'
20          android:onClick='thumbNailScaleAnimation'
21          android:text='@string/btThumbNailScaleupAni' />
22  
23  </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

01  <RelativeLayout xmlns:android='http://schemas.android.com/apk/res/android'
02     android:layout_width='match_parent'
03     android:layout_height='match_parent'
04     android:orientation='vertical' >
05     <ImageView
06       android:id='@+id/imageView1'
07       android:layout_width='match_parent'
08       android:layout_height='match_parent'
09       android:layout_marginRight='44dp'
10       android:layout_marginTop='54dp'
11       android:layout_centerInParent='true'
12       android:src='@drawable/freelancer2' />
13  
14  </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:

01  package com.example.jellybeananimationexample;
02  
03  import android.app.Activity;
04  import android.os.Bundle;
05  
06  public class AnimationActivity extends Activity {
07  
08   @Override
09      public void onCreate(Bundle savedInstanceState) {
10          super.onCreate(savedInstanceState);
11          setContentView(R.layout.activity_animation);
12      }
13  }

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

01  package com.example.jellybeananimationexample;
02  
03  import android.app.Activity;
04  import android.app.ActivityOptions;
05  import android.content.Intent;
06  import android.graphics.Bitmap;
07  import android.os.Bundle;
08  import android.view.View;
09  
10  public class MainActivity extends Activity {
11  
12   @Override
13   public void onCreate(Bundle savedInstanceState) {
14    super.onCreate(savedInstanceState);
15    setContentView(R.layout.activity_main);
16   }
17  
18   public void scaleupAnimation(View view) {
19    // Create a scale-up animation that originates at the button
20    // being pressed.
21    ActivityOptions opts = ActivityOptions.makeScaleUpAnimation(view, 0, 0,
22      view.getWidth(), view.getHeight());
23    // Request the activity be started, using the custom animation options.
24    startActivity(new Intent(MainActivity.this, AnimationActivity.class),
25      opts.toBundle());
26   }
27  
28   public void thumbNailScaleAnimation(View view) {
29    view.setDrawingCacheEnabled(true);
30    view.setPressed(false);
31    view.refreshDrawableState();
32    Bitmap bitmap = view.getDrawingCache();
33    ActivityOptions opts = ActivityOptions.makeThumbnailScaleUpAnimation(
34      view, bitmap, 0, 0);
35    // Request the activity be started, using the custom animation options.
36    startActivity(new Intent(MainActivity.this, AnimationActivity.class),
37      opts.toBundle());
38    view.setDrawingCacheEnabled(false);
39   }
40  
41   public void fadeAnimation(View view) {
42    ActivityOptions opts = ActivityOptions.makeCustomAnimation(
43      MainActivity.this, R.anim.fade_in, R.anim.fade_out);
44    // Request the activity be started, using the custom animation options.
45    startActivity(new Intent(MainActivity.this, AnimationActivity.class),
46      opts.toBundle());
47   }
48  
49  }

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.

Reference PAGE TOP

http://www.javacodegeeks.com/2012/08/android-activity-animation.html

0 Comments Leave a comment

Please login in order to leave a comment.

Newest first
!

Sign-in to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.