Graphics & Animation Radan Ganchev Astea Solutions

Contents Basic 2D Graphics & Animation Animation Frameworks ‣ View animation ‣ Property animation 3D Graphics ‣ OpenGL ‣ RenderScript

2D Graphics

Bitmap - your drawing surface Bitmap

2D Graphics Bitmap - your drawing surface Canvas - your drawing tool Bitmap Canvas

2D Graphics Bitmap - your drawing surface Canvas - your drawing tool drawLine() Bitmap Canvas

2D Graphics Bitmap - your drawing surface Canvas - your drawing tool Drawable - something you can draw Bitmap Canvas Drawable

2D Graphics Bitmap - your drawing surface Canvas - your drawing tool Drawable - something you can draw draw() Bitmap Canvas Drawable

2D Graphics Bitmap - your drawing surface Canvas - your drawing tool Drawable - something you can draw Paint - the colors and styles for the drawing Bitmap Canvas Drawable

But how do we draw on the screen?

Same as always: use a View

Drawing on a View 1. Extend View. 2. Override onDraw(Canvas) and use the given Canvas to draw. 3. invalidate() the view when necessary (watch your thread).

Drawing on a SurfaceView A bit more technical... Basic idea: ‣ SurfaceView controls a dedicated drawing surface ‣ Extend SurfaceView and use the view’s SurfaceHolder to get a reference to the canvas ‣ Lock the canvas from a background thread; draw on it; unlock and post.

When to use which? Use a custom View when: ‣ You need to draw and update custom shapes. ‣ It is not hard to replace several smaller views with one larger view. Use SurfaceView when: ‣ You need high FPS rate. ‣ You are drawing complex objects. Remember that you can always use a regular View and manipulate its background image!

Drawables

When do we use drawables? ‣ When we have complex shapes or images to draw. ‣ When we need to draw something multiple times (reuse drawing code). ‣ When we need the functionality of one of the standard types of Drawables. ‣ When we want to implement custom functionality.

Drawables How do we use drawables? ‣ As a custom class - extend Drawable and override draw(). ‣ As a resource: ➡ Add a.png,.jpg or.gif to res/drawable/ and use it as a BitmapDrawable resource. ➡ Add a.9.png to res/drawable/ and use it as a NinePatchDrawable resource. ➡ Add a.xml to res/drawable/ and use it as the type of Drawable corresponding to its root tag.

View Animations

Translate, rotate, scale and alpha animation of Views. Affect the drawing of the View, its coordinates don’t change! Can be declared as XML resources or created programmatically. Components of an animation: ‣ Basic animations ‣ Animation sets ‣ Time interpolators

View Animations res/anim/black_hole.xml: MyActivity.java: Animation blackHole = AnimationUtils.loadAnimation(this, R.anim. black_hole ); view.startAnimation(blackHole);

Property Animations

Since Android 3.0 (API level 11). “Animate” values or properties of objects. Advantages to view animations: ‣ Actually change the property values ‣ You can animate anything (not only Views) ‣ More powerful animation sets

Property Animations ObjectAnimator anim = ObjectAnimator.ofFloat(myObj, "myProp", 0f, 1f); anim.setDuration(1000); anim.start(); ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f); animator.setDuration(1000); animator.addListener(myAnimatorUpdateListener); animator.start();

3D Graphics

OpenGL Android 1.0 supports OpenGL ES 1.0 and 1.1 ‣ Implemented in GLES10 and GLES11. ‣ javax.microedition.khronos.opengles - the standard Java ME implementation. ‣ android.opengl - the Android implementation. Optimized and faster. Android 2.2 (API level 8) supports OpenGL ES 2.0 ‣ android.opengl.GLES20

OpenGL How to use it: 1. Implement a GLSurfaceView.Renderer. 2. In onDrawFrame() use the provided GL object to draw. 3. Create a GLSurfaceView and give it an instance of your renderer.

RenderScript A high performance 3D graphics rendering and compute API at the native level. Scripts are written in C (C99 standard). Designed to run on different CPU and GPU architectures. Fast as OpenGL with NDK and as portable as the android.opengl framework. Offers less features than OpenGL.

Q & A Questions? Feedback section: ‣ Did you hear well? ‣ Was there anything you didn’t understand? ‣ What would you like changed in our next lecture?

Resources 2D Graphics Drawable Resources View Animation Property Animation OpenGL RenderScript