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 Description

fromAlpha The initial opacity

0 is invisible. 1 is fully visible

toAlpha The ending opacity

0 is invisible. 1 is fully visible

duration 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 it’s 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

Let’s 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

Parameter Description

fromDegrees The degree the item starts out at

0, 360 original position, 180 flipped

toDegrees The degree the item ends out at

0, 360 original position, 180 flipped

pivotX How much it pivots around the x axis in a

percent of it’s width

pivotY How much it pivots around the Y axis in a

percent of its height

duration How long in milliseconds the animation

takes

Add Rotating to your Custom Animation

This will rotate your ImageView once it’s 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 let’s 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