ANDROID

Animation

Basic Layout

Start by creating an app with the bare basics

A

TextView

First we will fade in this TextView

Specifying your Animation

Create an anim folder under your res directory to hold your animation files Then create a new fade_in.xml directory

Fade In Parameters
Parameter fromAlpha toAlpha duration Description The initial opacity 0 is invisible. 1 is fully visible The ending opacity 0 is invisible. 1 is fully visible How long in milliseconds the animation takes

Applying Animation in Code

1. Create the startAnimation funciton in your Activity Access the TextView Create the fade In Animation Then start the fade In Animation applying it to the TextView

Applying Animation in Code

Code should look as follows:

Pause and Resume

Animation can be expensive. Potentially it could take a while, or it could take resources Hence, we need to stop the animation when the user requests to go to another screen, or it is interrupted by another means

Pause Method

In the pause method you need to:

get

the TextView by its id call the clear animation for the TextView

Resume Method

When resume is called you want to re-run the animation.

Add a Second Title

Fade In After a Duration

Now we will fade the second TextView in after an amount of seconds. Create a fade_in2.xml and add the offset property

Apply the Animation

Now apply the fade_in2.xml Add the code to the startAnimation():

And add it to the onPause():

Add an Image

Lets add an ImageView between the two titles. Your page should now look as follows:

Add Custom Animation

Create a new file called custom_anim.xml

Rotating Animation

Rotating
Description The degree the item starts out at 0, 360 original position, 180 flipped

Parameter fromDegrees

toDegrees
pivotX

The degree the item ends out at 0, 360 original position, 180 flipped
How much it pivots around the x axis in a percent of its width

pivotY
duration

How much it pivots around the Y axis in a percent of its height

How long in milliseconds the animation takes

Add Rotating to your Custom Animation

This will rotate your ImageView once its applied:

Apply the Animation

Now apply the custom_anim.xml Add the code to the startAnimation():

And add it to the onPause():

Adding more Animation

Make it grow and fade in as well by adding it to the custom_anim.xml

and it should all work

Animate all Views in a Layout

You will create a LayoutAnimationController which you can use to animate all views within a particular layout. e.g. Animate all items in your LinearLayout First assign an Id to your LinearLayout

Animate all Views in a Layout

Access the custom_anim xml and create an Animation Object for it Create a LayoutAnimationController based on the Animation Object you created

Animate all Views in a Layout

Now pick up the Linear Layout Then apply the LayoutAnimationController to it

Full Code to Animate all Views

Code for startAnimation() <comment out previous code>

Code to put in onPause() <comment out previous code>

Going to next Activity

Attach an AnimationListener to listen to the end of the Animation When the end of the animation is encountered we will proceed to the next Activity
Before proceeding make sure to create a new Activity and register it in the Manifest file Also, take out the code to Animate all views and lets work with the individual views.

Create an AnimationListener

When the Animation Ends end this Activity and start the next

Attach the EventListener

We will attach the event listener to the animation that will finish last as follows:

Then when it finishes the next screen will load