Mobile Programming Lecture 11 Animation and TraceView

Agenda Animation Animation Engines TraceView

Animations TranslateAnimation o move an object RotateAnimation o rotate an object ScaleAnimation o resize an object AlphaAnimation o change alpha properties AnimationSet o a group of animations to be played together

TranslateAnimation Button myButton = findViewById(R.id.animButton); TranslateAnimation animation = new TranslateAnimation( myButton.getX(), x, myButton.getY(), y); animation.setDuration(500); myButton.startAnimation(animation);

TranslateAnimation Button myButton = findViewById(R.id.animButton); TranslateAnimation animation = new TranslateAnimation( myButton.getX(), x, myButton.getY(), y); animation.setDuration(500); myButton.startAnimation(animation); Let's say we want to move some Button

TranslateAnimation Button myButton = findViewById(R.id.animButton); TranslateAnimation animation = new TranslateAnimation( myButton.getX(), x, myButton.getY(), y); animation.setDuration(500); myButton.startAnimation(animation); We create an new TranslateAnimation, which allows us to move Views

TranslateAnimation Button myButton = findViewById(R.id.animButton); TranslateAnimation animation = new TranslateAnimation( myButton.getX(), x, myButton.getY(), y); animation.setDuration(500); myButton.startAnimation(animation); The first argument is the position on the x axis of where we want it to start

TranslateAnimation Button myButton = findViewById(R.id.animButton); TranslateAnimation animation = new TranslateAnimation( myButton.getX(), x, myButton.getY(), y); animation.setDuration(500); myButton.startAnimation(animation); 2nd argument is where we want the animation to end on the x axis

TranslateAnimation Button myButton = findViewById(R.id.animButton); TranslateAnimation animation = new TranslateAnimation( myButton.getX(), x, myButton.getY(), y); animation.setDuration(500); myButton.startAnimation(animation); 3rd argument is where on the y axis we want the animation to start

TranslateAnimation Button myButton = findViewById(R.id.animButton); TranslateAnimation animation = new TranslateAnimation( myButton.getX(), x, myButton.getY(), y); animation.setDuration(500); myButton.startAnimation(animation); 4th argument is where we want the animation to end on the y axis

TranslateAnimation Button myButton = findViewById(R.id.animButton); TranslateAnimation animation = new TranslateAnimation( myButton.getX(), x, myButton.getY(), y); animation.setDuration(500); myButton.startAnimation(animation); getX() gets the current position of the left of the Button

TranslateAnimation Button myButton = findViewById(R.id.animButton); TranslateAnimation animation = new TranslateAnimation( myButton.getX(), x, myButton.getY(), y); animation.setDuration(500); myButton.startAnimation(animation); getRight() gets the current position of the very top of the Button

TranslateAnimation Button myButton = findViewById(R.id.animButton); TranslateAnimation animation = new TranslateAnimation( myButton.getX(), x, myButton.getY(), y); animation.setDuration(500); myButton.startAnimation(animation); Here we set how long we want this Animation to last for, in milliseconds

TranslateAnimation Button myButton = findViewById(R.id.animButton); TranslateAnimation animation = new TranslateAnimation( myButton.getX(), x, myButton.getY(), y); animation.setDuration(500); myButton.startAnimation(animation); We call startAnimation on the View that we wish to animate, and pass the Animation as the argument

RotateAnimation Button myButton = findViewById(R.id.animButton); RotateAnimation animation = new RotateAnimation(0, 360); animation.setDuration(500); myButton.startAnimation(animation);

RotateAnimation Button myButton = findViewById(R.id.animButton); RotateAnimation animation = new RotateAnimation(0, 360); animation.setDuration(500); myButton.startAnimation(animation); RotateAnimation allows us to... rotate a View

RotateAnimation Button myButton = findViewById(R.id.animButton); RotateAnimation animation = new RotateAnimation(0, 360); animation.setDuration(500); myButton.startAnimation(animation); 1st argument is the rotation offset to apply in the beginning of the animation

RotateAnimation Button myButton = findViewById(R.id.animButton); RotateAnimation animation = new RotateAnimation(0, 360); animation.setDuration(500); myButton.startAnimation(animation); 2nd argument is the rotation offset to apply in the end of the animation

RotateAnimation Button myButton = findViewById(R.id.animButton); RotateAnimation animation = new RotateAnimation(0, 360); animation.setDuration(500); myButton.startAnimation(animation); This will make the View that we apply the animation on do a "front flip"

RotateAnimation Button myButton = findViewById(R.id.animButton); RotateAnimation animation = new RotateAnimation(0, 360); animation.setDuration(500); myButton.startAnimation(animation); This will make the View that we apply the animation on do a "front flip"

ScaleAnimation Button myButton = findViewById(R.id.animButton); ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2); animation.setDuration(500); myButton.startAnimation(animation);

ScaleAnimation Button myButton = findViewById(R.id.animButton); ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2); animation.setDuration(500); myButton.startAnimation(animation); ScaleAnimation allows us to grow or shrink a View

ScaleAnimation Button myButton = findViewById(R.id.animButton); ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2); animation.setDuration(500); myButton.startAnimation(animation); All arguments are scaling factors, where 1 means that the scale doesn't change

ScaleAnimation Button myButton = findViewById(R.id.animButton); ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2); animation.setDuration(500); myButton.startAnimation(animation); 1st argument is the scaling factor to apply horizontally, at the beginning of the animation

ScaleAnimation Button myButton = findViewById(R.id.animButton); ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2); animation.setDuration(500); myButton.startAnimation(animation); 2nd argument is the scaling factor to apply horizontally, at the end of the animation

ScaleAnimation Button myButton = findViewById(R.id.animButton); ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2); animation.setDuration(500); myButton.startAnimation(animation); 3rd argument is the scaling factor to apply vertically, at the beginning of the animation

ScaleAnimation Button myButton = findViewById(R.id.animButton); ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2); animation.setDuration(500); myButton.startAnimation(animation); 4th argument is the scaling factor to apply vertically, at the end of the animation

ScaleAnimation Button myButton = findViewById(R.id.animButton); ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2); animation.setDuration(500); myButton.startAnimation(animation); This will double the size of the View, in both dimensions

ScaleAnimation Button myButton = findViewById(R.id.animButton); ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2); animation.setDuration(500); myButton.startAnimation(animation); This will double the size of the View, in both dimensions

AlphaAnimation Button myButton = findViewById(R.id.animButton); AlphaAnimation animation = new AlphaAnimation(1.0, 0.0); animation.setDuration(500); myButton.startAnimation(animation); AlphaAnimation allows us to animation the transparency of a View

AlphaAnimation Button myButton = findViewById(R.id.animButton); AlphaAnimation animation = new AlphaAnimation(1.0, 0.0); animation.setDuration(500); myButton.startAnimation(animation); First argument is a float, which is the starting transparency value

AlphaAnimation Button myButton = findViewById(R.id.animButton); AlphaAnimation animation = new AlphaAnimation(1.0, 0.0); animation.setDuration(500); myButton.startAnimation(animation); Second argument is the ending transparency value

AlphaAnimation Button myButton = findViewById(R.id.animButton); AlphaAnimation animation = new AlphaAnimation(1.0, 0.0); animation.setDuration(500); myButton.startAnimation(animation); 1.0 means no transparency, 0.0 means fully transparent.

AlphaAnimation Button myButton = findViewById(R.id.animButton); AlphaAnimation animation = new AlphaAnimation(1.0, 0.0); animation.setDuration(500); myButton.startAnimation(animation); Applying this Animation on a View will fade it out completely

Animation See AnimationExample.tar

Animations in XML If you have Animations that you can set up before runtime, you can use an XML file

Animations in XML To add a new XML animation file Right click on your project Add > New > Android XML File Resource Type: Tween Animation Enter the file name under File, e.g. full_rotate.xml Select a root element (.e.g. rotate) Done

Animations in XML You will end up with something like this

Animations in XML You will end up with something like this Add a blank space after "rotate", then press Ctrl+Space to see what options are vailable

Animations in XML You will end up with something like this <rotate xmlns:android=" android:fromDegrees="0" android:toDegrees="360" android:duration="500"> You may need to add this manually

Animations in XML You will end up with something like this <rotate xmlns:android=" android:fromDegrees="0" android:toDegrees="360" android:duration="500"> Here we set the attributes for the Animation

Animations in XML button = (Button) findViewById(R.id.button1); Animation rotateAnim = AnimationUtils.loadAnimation( getApplicationContext(), R.anim.full_rotate); button.startAnimation(rotateAnim);

Animations in XML button = (Button) findViewById(R.id.button1); Animation rotateAnim = AnimationUtils.loadAnimation( getApplicationContext(), R.anim.full_rotate); button.startAnimation(rotateAnim); We need to inflate the XML file

Animations in XML button = (Button) findViewById(R.id.button1); Animation rotateAnim = AnimationUtils.loadAnimation( getApplicationContext(), R.anim.full_rotate); button.startAnimation(rotateAnim); This class allows you to perform common operations when working with Animations

Animations in XML button = (Button) findViewById(R.id.button1); Animation rotateAnim = AnimationUtils.loadAnimation( getApplicationContext(), R.anim.full_rotate); button.startAnimation(rotateAnim); Such as loading an Animation from an XML file

Animations in XML button = (Button) findViewById(R.id.button1); Animation rotateAnim = AnimationUtils.loadAnimation( getApplicationContext(), R.anim.full_rotate); button.startAnimation(rotateAnim); For the second argument, we pass the XML animation resource

Animations in XML button = (Button) findViewById(R.id.button1); Animation rotateAnim = AnimationUtils.loadAnimation( getApplicationContext(), R.anim.full_rotate); button.startAnimation(rotateAnim); This method returns a generic Animation object

Animations in XML button = (Button) findViewById(R.id.button1); Animation rotateAnim = AnimationUtils.loadAnimation( getApplicationContext(), R.anim.full_rotate); button.startAnimation(rotateAnim); Start the Animation

Animations in XML See AnimationFromXmlExample.tar

Animations Views automatically revert back to their original states after Animations are complete! If you want to Animate a View, and have it maintain the state of the View at the end of the Animation, you need to use an AnimationListener

Animations Animation anim = new TranslateAnimation(0, 0, 0, 300); anim.setDuration(1000); anim.setAnimationListener(new AnimationListener() public void onAnimationStart(Animation animation) { public void onAnimationRepeat(Animation animation) { public void onAnimationEnd(Animation animation) { theText.setY(300); } }); theText.startAnimation(anim);

Animations Animation anim = new TranslateAnimation(0, 0, 0, 300); anim.setDuration(1000); anim.setAnimationListener(new AnimationListener() public void onAnimationStart(Animation animation) { public void onAnimationRepeat(Animation animation) { public void onAnimationEnd(Animation animation) { theText.setY(300); } }); theText.startAnimation(anim); Animation for moving a View vertically by 300px

Animations Animation anim = new TranslateAnimation(0, 0, 0, 300); anim.setDuration(1000); anim.setAnimationListener(new AnimationListener() public void onAnimationStart(Animation animation) { public void onAnimationRepeat(Animation animation) { public void onAnimationEnd(Animation animation) { theText.setY(300); } }); theText.startAnimation(anim); Use AnimationListener for events about the an Animation

Animations Animation anim = new TranslateAnimation(0, 0, 0, 300); anim.setDuration(1000); anim.setAnimationListener(new AnimationListener() public void onAnimationStart(Animation animation) { public void onAnimationRepeat(Animation animation) { public void onAnimationEnd(Animation animation) { theText.setY(300); } }); theText.startAnimation(anim); When the animation ends, we want to set the Y position to 300px

Animations Animation anim = new TranslateAnimation(0, 0, 0, 300); anim.setDuration(1000); anim.setAnimationListener(new AnimationListener() public void onAnimationStart(Animation animation) { public void onAnimationRepeat(Animation animation) { public void onAnimationEnd(Animation animation) { theText.setY(300); } }); theText.startAnimation(anim); When the animation ends, we want to set the Y position to 300px

Animations See AnimationListenerExample.tar

Animations - Interpolators Interpolators provide instructions on how an animation is supposed to behave while it is being executed For example, you can have the animation be faster in the beginning than it is in the end

Animations - Interpolators AccelerateInterpolator o slow -> fast AccelerateDecelerateInterpolator o slow -> fast -> slow DecelerateInterpolator o fast -> slow LinearInterpolator o same speed all the way through CycleInterpolator o repeat animation for x cycles BounceInterpolator o Bouncing effect at the end OvershootIntepolator: goes beyond animation range then returns to

Animations - Interpolators final TextView tv = (TextView) findViewById(R.id.textView1); Animation anim = new RotateAnimation(0, 720); anim.setInterpolator(new BounceInterpolator()); anim.setDuration(2000); tv.startAnimation(anim);

Animations - Interpolators final TextView tv = (TextView) findViewById(R.id.textView1); Animation anim = new RotateAnimation(0, 720); anim.setInterpolator(new BounceInterpolator()); anim.setDuration(2000); tv.startAnimation(anim);

Animations - Interpolators See AnimationInterpolatorExample.tar

Animations - AnimationSet There may be cases where you want to execute two animations at the same time In order to accomplish this, you need to use an AnimationSet

Animations - AnimationSet AnimationSet animSet = new AnimationSet(true); TranslateAnimation mover = new TranslateAnimation(0, 0, 0, 300); AlphaAnimation fader = new AlphaAnimation(1.0f, 0.0f); animSet.addAnimation(mover); animSet.addAnimation(fader); animSet.setDuration(4000); animSet.setInterpolator(new CycleInterpolator(2.0f)); tv.startAnimation(animSet);

Animations - AnimationSet AnimationSet animSet = new AnimationSet(true); TranslateAnimation mover = new TranslateAnimation(0, 0, 0, 300); AlphaAnimation fader = new AlphaAnimation(1.0f, 0.0f); animSet.addAnimation(mover); animSet.addAnimation(fader); animSet.setDuration(4000); animSet.setInterpolator(new CycleInterpolator(2.0f)); tv.startAnimation(animSet); True if you want the Animations in the AnimationSet to share the Interpolator, false if you want each to have its own

Animations - AnimationSet AnimationSet animSet = new AnimationSet(true); TranslateAnimation mover = new TranslateAnimation(0, 0, 0, 300); AlphaAnimation fader = new AlphaAnimation(1.0f, 0.0f); animSet.addAnimation(mover); animSet.addAnimation(fader); animSet.setDuration(4000); animSet.setInterpolator(new CycleInterpolator(2.0f)); tv.startAnimation(animSet); Here we have two Animations

Animations - AnimationSet AnimationSet animSet = new AnimationSet(true); TranslateAnimation mover = new TranslateAnimation(0, 0, 0, 300); AlphaAnimation fader = new AlphaAnimation(1.0f, 0.0f); animSet.addAnimation(mover); animSet.addAnimation(fader); animSet.setDuration(4000); animSet.setInterpolator(new CycleInterpolator(2.0f)); tv.startAnimation(animSet); We add the Animations to the AnimationSet

Animations - AnimationSet AnimationSet animSet = new AnimationSet(true); TranslateAnimation mover = new TranslateAnimation(0, 0, 0, 300); AlphaAnimation fader = new AlphaAnimation(1.0f, 0.0f); animSet.addAnimation(mover); animSet.addAnimation(fader); animSet.setDuration(4000); animSet.setInterpolator(new CycleInterpolator(2.0f)); tv.startAnimation(animSet); We set the duration and Interpolator on the entire set

Animations - AnimationSet AnimationSet animSet = new AnimationSet(true); TranslateAnimation mover = new TranslateAnimation(0, 0, 0, 300); AlphaAnimation fader = new AlphaAnimation(1.0f, 0.0f); animSet.addAnimation(mover); animSet.addAnimation(fader); animSet.setDuration(4000); animSet.setInterpolator(new CycleInterpolator(2.0f)); tv.startAnimation(animSet); To start the Animation, we pass the AnimationSet

Animations - AnimationSet See AnimationSetExample.tar

Animations - Activities You can Animate the transition between Activities. After calling startActivity() or finishActivity() call overridePendingTransition(R.anim.in, R.anim.out) Where R.anim.in is an XML animation file for the entrance animation for the next Activity, and R.anim.out is the exit animation for the current Activity

Animations - Activities See ActivityAnimationExample.tar

Animation Libraries Universal Tween Engine AndEngine Videos

TraceView Traceview is a graphical viewer for execution logs that you create by using the Debug class to log tracing information in your codeDebug it can help you debug your application and profile its performance.

TraceView When you have a trace log file (generated by adding tracing code to your application or by DDMS), you can have Traceview load the log files and display their data in a window visualizes your application in two panels: A timeline panel -- describes when each thread and method started and stopped A profile panel -- provides a summary of what happened inside a method

TraceView - Creating Trace Files There are two ways to generate trace logs: Include the Debug class in your code and call its methods to start and stop logging of trace information to disk.Debug This method is very precise because you can specify in your code exactly where to start and stop logging trace data Use the method profiling feature of DDMS to generate trace logs. o This method is less precise since you do not modify code, but rather specify when to start and stop logging with a DDMS o Although you have less control on exactly where the data is logged, this method is useful if  you don't have access to the application's code  you do not need the precision of the first method.

TraceView - Debug Class If you are using the Debug class, your device or emulator must have an SD card and your application must have permission to write to the SD card.Debug If you are using DDMS, Android 2.2 and later devices do not need an SD card. The trace log files are streamed directly to your development machine.

TraceView - Debug Class To create the trace files include the Debug class and call one of the startMethodTracing() methods o specify a base name for the trace files that the system generates To stop tracing, call stopMethodTracing() These methods start and stop method tracing across the entire virtual machine o e.g., you could call  startMethodTracing() in your activity's onCreate() method  stopMethodTracing() in that activity's onDestroy() method.

TraceView - Debug Class See TraceViewExample.tar

TraceView - Debug Class To view the trace file, copy it onto your local machine using the command adb pull /sdcard/tracename.trace /local_dir/tracename the adb command is located in the directory o android-sdk-tools/platform-tools/ Now you can view the trace using traceview /local_dir/tracename the traceview command is located in the directory android-sdk-tools/tools/

TraceView - DDMS If you want to use DDMS to profile your app instead On the Devices tab, select the process that you want to enable method profiling for. Click the Start Method Profiling button. Interact with your application to start the methods that you want to profile. Click the Stop Method Profiling button. DDMS stops profiling your application and opens Traceview with the method profiling information that was collected between the time you clicked on Start Method Profiling and Stop Method Profiling.

TraceView - DDMS 1. Select the process 2. Start Method Profiling

References The Busy Coder's Guide to Android Development - Mark Murphy The Busy Coder's Guide to Android Development - Mark Murphy Android Developers The Mobile Lab at Florida State University