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

References (study these)

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

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();

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

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);

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

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

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

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

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

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

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

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)

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);

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.

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 protected void onDraw(Canvas canvas) { super.onDraw(canvas); //Use canvas.draw*() } }

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).