Lecture 3 Animation Graphics Topics Animation Graphics Drawing

Lecture 3: Animation & Graphics Topics: Animation, Graphics, Drawing Date: Jan 31, 2016

References (study these) • 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/2 d-graphics. html

High Five! https: //youtu. be/u. Fpo. Xq 73 HHY

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

1. Property Animation (Value) • Changing value of a variable over a period: Value. Animator anim = Value. Animator. of. Float(0 f, 40 f); anim. set. Duration(40); anim. start(); • Use set. Interpolator() to change behavior. Limitation?

1. Property Animation (Object) • Changing a property of an object. Hello World Object. Animator anim = Object. Animator. of. Float(my. Text. View, “text. Size”, 10 f, 30 f); anim. set. Duration(5000); anim. start(); Object Variable

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

2. View Animation • Define the Animation in XML: res/anim <? xml version="1. 0" encoding="utf-8"? > <rotate xmlns: android="http: //schemas. android. com/apk/res/android" android: from. Degrees="0" android: to. Degrees="360" android: to. YScale="0. 0" android: pivot. X="50%" android: pivot. Y="50%" android: start. Offset=“ 1000" android: duration="10000" /> • Use Animation to fetch it, then apply it to a View. Animation x = Animation. Utils. load. Animation( get. Application. Context(), R. anim. abovexmlfile ); some. View. start. Animation(x);

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

3. Drawable Animation • Define animation-list in XML: res/drawable <? xml version="1. 0" encoding="utf-8"? > <animation-list xmlns: android="http: //schemas. android. com/apk/res/android" android: oneshot=“false"> <item android: drawable="@drawable/pic 1" android: duration=“ 1000" /> <item android: drawable="@drawable/pic 2" android: duration=“ 1000" /> </animation-list> • Use Animation. Drawable inside your code some. Img. View. set. Background. Resource(R. drawable. abovexml); ((Animation. Drawable)some. Img. View. get. Background()). start();

Code Practice: • Get a few images and copy: res/drawable/ • Create an XML file: res/drawable/my_anim_list • Add an Image. View and set Background • Use Animation. Drawable to start animation

Graphics Overview • Canvas and Drawables • Hardware Acceleration (think GPU) • Open. GL (framework API and NDK) draw. Rect() draw. Circle() … Bitmap Canvas

2 D 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 Four Button. Views res/drawable/Queen. png res/drawable/tfade. xml

1. Using Drawables • android. graphics. drawable • Bitmap. Drawable, Transition Drawable, Animation Drawable, Shape. Drawable, 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 <Image. View android: layout_width="match_parent" android: layout_height="wrap_content" android: id="@+id/img 1" android: src="@drawable/my_image"/> • You can also do the same by writing code: Image. View i = new Image. View(this); i. set. Image. Resource(R. drawable. my_image); Linear. Layout ll = new Linear. Layout(this); ll. add. View(i); set. Content. View(ll); //instead of set. Content. View(R. layout. somexmllayoutfile)

1(b) XML with drawable properties • e. g. Transition Drawable: res/drawable/something. xml <transition xmlns: android="http: //schemas. android. com/apk/res/android"> <item android: drawable="@drawable/image 1"> <item android: drawable="@drawable/image 2"> </transition> • Now, take an Image. View to show it (them): Transition. Drawable td; td = (Transition. Drawable) get. Resources(). get. Drawable(R. drawable. something); td. set. Cross. Fade. Enabled(true); Image. View img; img = (Image. View) find. View. By. Id(R. id. img 1); img. set. Image. Drawable(td); td. start. Transition(5000);

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

2. Using Canvas • Canvas holds all of your draw*() calls. • Drawing is performed upon an underlying Bitmap b = Bitmap. create. Bitmap(100, Bitmap. Config. ARGB_8888); Canvas c = new Canvas(b); Paint p = new Paint(); p. set. Color(Color. GREEN); c. draw. Rect(10, 90, p); • Two ways to use the Canvas of a View: • Custom View • Surface View

2(a) Canvas of a Custom View • Good for low frame-rate applications (e. g. chess or snake game). • You define a new View and add it in the layout XML file (like you do for a Text. View, Image. View etc. ) • Android provides you the Canvas as you extend a View and override its on. Draw() method. • To request a redraw, use: invalidate(). Outside main Activity’s thread, use post. Invalidate().

2(a) Canvas of a Custom View • Create your own View Class (Custom. View. java) public class Custom. View extends View { //Declare all four types of constructors here. @Override protected void on. Draw(Canvas canvas) { super. on. Draw(canvas); //Use canvas. draw*() } } • Use the View in the layout xml <edu. unc. nirjon. projectname. Custom. View android: id="@+id/mycustomview" android: layout_width="match_parent" android: layout_height="match_parent" /> • To force a redraw: invalidate()

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