Building Apps with Graphics & Animation

•Displaying Bitmaps Efficiently• Loading Large Bitmaps Efficiently• Caching Bitmaps • Managing Bitmap Memory• Displaying Bitmaps in Your UI

•Displaying Graphics with OpenGL ES• Building an OpenGL ES Environment• Defining Shapes • Drawing Shapes• Applying Projection • Adding Motion• Responding To Touch Events

•Adding Animations• Crossfading To Views

• Property Animation

• Using ViewPager for Screen Slide

What is Bitmap?

• Most images you see on your computer are composed of bitmaps. A bitmap is a map of dots, or bits (hence the name), that looks like a picture as long you are sitting a reasonable distance away from the screen. Because bitmap images are made up of a bunch of dots, if you zoom in on a bitmap, it appears to be very blocky.

Formats

• ALPHA_8 To store alpha masks(font cache, etc.)• ARGB_4444 (4 bits no precision)

Not good to use• ARGB_8888 (the default from the Android 2.3 onward)

Full color, good for pictures• RGB_565

No alpha channel, saves memory

Loading Large Bitmaps Efficiently

• Mobile devices typically have as little as 16 MB of memory for a single

application.• Applications should be optimized to perform under this minimum

memory limit. • Bitmaps take a lot of memory, for example the Galaxy Nexus uses

with a 5 Megapixel photo as default memory configuration (ARGB_8888) 19 MB, which is already too much.• So ideally you only want to load a lower resolution version in memory

Read Bitmap Dimensions and Type

• The BitmapFactory class provides severel decoding methods• Example: decodeByteArray(), decodeFile(), decodeResource()• Not to get a OutOfMemory exception you also need to know

outWidth, outHeight and outMimeType• This will allow you to read the dimensions out of the bitmap• Useful, because it makes no sense to load a 1024x768 pixel image

which eventually only need to be displayed as a 128x96 pixel thumbnail• Set inSampleSize to true to tell the decoder to load a smaller version

Caching Bitmaps

• Loading only a single bitmap in the user interface is straightforward• Loading more bitmaps in the user interface is complicated• Don’t know how many images are still coming• Garbage collector would delete immediately• No fluent process so use memory disk cache

Memory Cache

• A memory cache offers fast access to bitmaps at the cost of taking up valuable application memory.• Use LruCache which is particularly well suited to the task of caching

bitmaps• First think about how memory intensive the application is, how many

images should be shown on the screen, density of screen size • That’s for getting the cache right so that there will be no overhead if

the cache is too small or too large (java.lang.OutOfMemory)

Use a Disk Cache

• Memory easy gets filled up • If application gets interrupted, for example by a phone call, memory

would get killed and the memory cache destroyed.• Disk Cache would store the bitmap in a background thread• Not destroyed by interruption • Slower to load

Handle Configuration Changes

• Runtime configuration changes, such as a screen orientation change, cause Android to destroy and restart the running activity with the new configuration• Avoiding this problem add a Fragment code to LruCache which helps

you to store the files in memory and reattach them after the new configuration change is done

Managing Bitmap Memory

• On Android 2.3.3 (API level 10) and lower, using recycle() is recommended. If you’re displaying large amounts of bitmap data in your app, you’re likely to run into OutOfMemoryError errors.• You should use recycle() only when you are sure that the bitmap is no

longer being used.

• Android 3.0 (API Level 11) introduces the BitmapFactory.Options.inBitmap field. If this option is set, decode methods that take the Options object will attempt to reuse an existing bitmap when loading content.

• API Levels generally mean that as a programmer, you can communicate with the devices' built in functions and functionality. As the API level increases, functionality adds up (although some of it can get deprecated).

• Choosing an API level for an application development should take at least two things into account:

• Current distribution - How many devices can actually support my application, if it was developed for API level 9, it cannot run on API level 8 and below, then "only" around 60% of devices can run it.

• Choosing a lower API level may support more devices but gain less functionality for your app. you may also work harder to achieve features you could've easily gained if you chose higher API level.

• Android API levels can be divided to three main groups (not scientific, but what the heck):• Android 1.5 - 2.3 (API levels 3-10) - Android made specifically for smartphones.• Android 3.0 - 3.2 (API levels 11-13) - Honeycomb, Android made for tablets.• Android 4 (API levels 14-) - Ice Cream Sandwich - Current generation, a big merge with tons

of additional functionality, totally revamped Android version, for both phone and tablets.

Displaying Bitmaps in Your UI

• The swipe view pattern is an excellent way to navigate the detail view of an image gallery. You can implement this pattern using a ViewPager (code) component backed by a PagerAdapter (code).

Displaying Graphics with OpenGL ES• Android includes support for high performance 2D and 3D graphics

with the Open Graphics Library (OpenGL), specifically, the OpenGL ES API. OpenGL is a cross-platform graphics API that specifies a standard software interface for 3D graphics processing hardware.

OpenGL

SurfaceView

• SurfaceView is just one way to incorporate OpenGL ES graphics into your application. For a full-screen or near-full screen graphics view

• This class is a View where you can draw and manipulateobjects using OpenGL API calls and is similar in functionto a SurfaceView

Define Shapes

• Possible to define three-dimension shapes in OpenGL ES.• Example: Draw a triangle• Define its coordinates in a vertex array • By default, OpenGL ES assumes a coordinate system where [0,0,0]

(X,Y,Z) specifies the center of the GLSurfaceView frame [1,1,0] is the top right corner of the frame and [-1,-1,0] is bottom left corner of the frame.

Draw a Shape

• Drawing a defined shape using OpenGL ES 2.0 requires a significant amount of code, because you must provide a lot of details to the graphics rendering pipeline. Specifically, you must define the following:• Vertex Shader - OpenGL ES graphics code for rendering the vertices of

a shape.• Fragment Shader - OpenGL ES code for rendering the face of a shape

with colors or textures.• Program - An OpenGL ES object that contains the shaders you want to

use for drawing one or more shapes

private final String vertexShaderCode =    "attribute vec4 vPosition;" +    "void main() {" +    "  gl_Position = vPosition;" +    "}";

private final String fragmentShaderCode =    "precision mediump float;" +    "uniform vec4 vColor;" +    "void main() {" +    "  gl_FragColor = vColor;" +    "}";

Applying Projection

• This transformation adjusts the coordinates of drawn objects based on the width and height of the GLSurfaceView where they are displayed. Without this calculation, objects drawn by OpenGL ES are skewed by the unequal proportions of the view window. A projection transformation typically only has to be calculated when the proportions of the OpenGL view are established or changed

Adding Motion / Responding to Touch Events• OpenGL ES provides additional capabilities for moving and

transforming drawn objects in three dimensions or in other unique ways to create compelling user experiences.

• Interact with OpenGl ES graphics• In order to make your OpenGL ES application respond to touch

events, you must implement the onTouchEvent() method in your GLSurfaceView class

Adding Animations

• Animations can add subtle visual cues that notify users about what's going on in your app and improve their mental model of your app's interface. Animations are especially useful when the screen changes state, such as when content loads or new actions become available. Animations can also add a polished look to your app, which gives your app a higher quality feel.

Property Animation

• The property animation system is a robust framework that allows you to animate almost anything. You can define an animation to change any object property over time, regardless of whether it draws to the screen or not.

Crossfading Two Views

• Crossfade animation is if you change from one UI component to another. While the application is doing that, mostly it has to load something. During this time you can show an animation that the transitions doesn’t feel that abrupt or hurried.• src/CrossfadeActivity.java• _layout/activity_crossfade.xml• menu/activity_crossfade.xml

Using ViewPager for Screen Slides• Screen slides are transitions between one entire screen to another

and are common with UIs like setup wizards or slideshows. This lesson shows you how to do screen slides with a ViewPager provided by the support library.ViewPager s can animate screen slides automatically. Here's what a screen slide looks like that transitions from one screen of content to the next:• src/ScreenSlidePageFragment.java• src/ScreenSlideActivity.java• layout/activity_screen_slide.xml• layout/fragment_screen_slide_page.xml

END