1. Lecture 3: Animation & Graphics Topics: Animation, Graphics, Drawing Date: Feb 2, 2016

2. http://developer.android.com/guide/topics/graphics/overview.html http://developer.android.com/guide/topics/graphics/prop-animation.html http://developer.android.com/guide/topics/graphics/view-animation.html http://developer.android.com/guide/topics/graphics/drawable-animation.html http://developer.android.com/guide/topics/graphics/2d-graphics.html References (study these)

3. Animation Overview 1.Property Animation 2.View Animation 3.Drawable Animation

4. 1. Property Animation Changing value of a variable over a period: Use setInterpolator() to change behavior. ValueAnimator anim = ValueAnimator.ofFloat(0f, 40f); anim.setDuration(40); anim.start();

5. 2. View Animation You can animate a View e.g., by scaling, rotating, translating an ImageView.

6. 2. View Animation Define the Animation in XML: res/anim Use Animation to fetch it, then apply it to a View. Animation x = AnimationUtils.loadAnimation( getApplicationContext(), R.anim.abovexmlfile ); someView.startAnimation(x);

7. 3. Drawable Animation We can load a series of Drawable resources (e.g. images) one after another.

8. 3. Drawable Animation Define animation-list in XML: res/drawable Use AnimationDrawable inside your code someImgView.setBackgroundResource(R.drawable.abovexml); ((AnimationDrawable)someImgView.getBackground()).start();

9. Code Practice: Get a few images and copy: res/drawable/ Create an XML file: res/drawable/my_anim_list Add an ImageView and set Background Use AnimationDrawable to start animation

10. Graphics Overview Canvas and Drawables Hardware Acceleration (think GPU) OpenGL (framework API and NDK) Bitmap drawRect() drawCircle() … Canvas

11. 2D Drawing 1.Drawable: Put Drawables (into a View) Less work, less control, less efficiency 2.Canvas: Draw on the Canvas (of a View) More work, more control, more efficiency

12. 1. Using Drawables Putting Drawables into a View res/drawable/Queen.png Four ButtonViews res/drawable/tfade.xml

13. 1. Using Drawables android.graphics.drawable BitmapDrawable, Transition Drawable, Animation Drawable, ShapeDrawable, etc. Two ways to add Drawables: a)Image from Project Resource b)XML file defining Drawable properties

14. 1(a) Image from Project Resource Copy images into res/drawable/ Use it inside the layout xml You can also do the same by writing code: ImageView i = new ImageView(this); i.setImageResource(R.drawable.my_image); LinearLayout ll = new LinearLayout(this); ll.addView(i); setContentView(ll); //instead of setContentView(R.layout.somexmllayoutfile)

15. 1(b) XML with drawable properties e.g. Transition Drawable: res/drawable/something.xml Now, take an ImageView to show it (them): TransitionDrawable td; td = (TransitionDrawable) getResources().getDrawable(R.drawable.something); td.setCrossFadeEnabled(true); ImageView img; img = (ImageView) findViewById(R.id.img1); img.setImageDrawable(td); td.startTransition(5000);

16. Nine Patch Image Regular.png images + defining stretchable regions From a terminal: Run the draw9patch command from your SDK sdk/tools directory to launch the tool.

17. 2. Using Canvas (of a View) Create your own View Class (CustomView.java) Use the View in the layout xml To force a redraw: invalidate() public class CustomView extends View { //Declare all types of constructors here. @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //Use canvas.draw*() } }

18. Code Practice: Create 2 Buttons: Up and Down Create a Custom View Draw a circle at location (X, Y) Every time the buttons are clicked, the point will move. (Hint: use invalidate() to force redraw).