Download Week 5 – Animation

CO5025 – Further Programming and Problem Solving: Android
Week 5 – Animation
1. Create a new Android application called Week05 with the default options
2. Change activity_main.xml to this layout:LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginTop="20dp"
android:text="@string/message"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="@+id/fade_in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="@string/fade_in" />
</LinearLayout>
3. Add strings so that the text reads ‘Welcome to my App’ and the button says ‘Fade Out’
Creating an animation xml
1. Create a new directory in the res folder called anim.
2. Right click and select New > Animation resource file with the name fade_in.xml and this xml:<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<alpha
android:duration="5000"
android:fromAlpha="0.0"
android:interpolator="@android:anim/linear_interpolator"
android:toAlpha="1.0" />
</set>
Running the animation
1. Add this code to the global declarations of your MainActivity:Animation animFadeIn;
TextView txtMessage;
2. Add this code to the onCreate method of your MainActivity:txtMessage = (TextView) findViewById(R.id.message);
animFadeIn = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade_in);
txtMessage.startAnimation(animFadein);
Message = (T extView) findView ById(R.id. mess age);
3. Run your program and check that the text fades in. If the emulator has timed out by the time your activity loads,
you may have to press the back button and load it again before you see the animation.
4. Amend the code so that the button fades in at the same time as the text.
Create a fade out
1. Add a new file fade_out.xml by duplicating fade_in.xml and altering the fromAlpha and toAlpha tags.
2. Wire up the fade_out animation to the button, with an animation variable animFadeOut so that the text fades
out when it is clicked, referring back to Week 2 if necessary to add an onClickListener and Click method.
3. Check it works.
1
CO5025 – Further Programming and Problem Solving: Android
Create a slide in
1. Add this xml to a new animation resource file called slide_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="-100%"
android:toXDelta="0%"
android:duration="2000"/>
</set>
2. Change your code in MainActivity so that the text slides in from the left. You will now need to have another
Animation variable, animSlideIn, so that the button fades in at the same time.
Add an Image
1. In the folder mipmap, copy the file ic_launcher.png (xhdpi) and give it the name icon.png
2. Add this xml to the layout below the TextView tag:<ImageView
android:contentDescription="@string/image_text"
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.78"
android:src="@mipmap/icon" />
3. Add a string for image_text of “Android Image” – this is like the alt text in a webpage
Create a rotate animation
1. Add this xml to an Animation Resource file called rotate.xml:<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"
android:interpolator="@android:anim/cycle_interpolator"/>
</set>
2. Add an ImageView called imgIcon in MainActivity and an animation variable animRotate.
3. Add code to apply this animation to the image at start-up and check it works.
Create a zoom animation
1. Download the file zoom_in.xml from the module website and save it in the anim folder of your project
2. Change your code so that the zoom-in animation is applied to the image instead of the rotate and check it works.
Sequencing animations on the same View
This works by placing one animation tag after each other in the xml file. By default animations start at the same
time, to sequence them, we need to change the startOffset of the later ones, so that they start when the previous
ones have finished.
We are going to make the image zoom in and then rotate:1.
2.
3.
4.
Edit zoom_in.xml and copy the rotate tag from rotate.xml so it appears after the scale tag, but within the set tag
Check that you can make your animation zoom and rotate simultaneously
Now edit the rotate tag and give it a startOffset of 2000.
Check that the image now zooms in before rotating.
2