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
