Building Apps with Graphics Animation Displaying Bitmaps Efficiently

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 Open. GL ES • • • Building an Open. GL ES Environment Defining Shapes Drawing Shapes Applying Projection Adding Motion Responding To Touch Events

• Adding Animations • Crossfading To Views • Property Animation • Using View. Pager 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 Bitmap. Factory class provides severel decoding methods • Example: decode. Byte. Array(), decode. File(), decode. Resource() • Not to get a Out. Of. Memory exception you also need to know out. Width, out. Height and out. Mime. Type • This will allow you to read the dimensions out of the bitmap • Useful, because it makes no sense to load a 1024 x 768 pixel image which eventually only need to be displayed as a 128 x 96 pixel thumbnail • Set in. Sample. Size 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 Lru. Cache 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. Out. Of. Memory)

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 Lru. Cache 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 Out. Of. Memory. Error 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 Bitmap. Factory. Options. in. Bitmap 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 View. Pager (code) component backed by a Pager. Adapter (code).

Displaying Graphics with Open. GL ES • Android includes support for high performance 2 D and 3 D graphics with the Open Graphics Library (Open. GL), specifically, the Open. GL ES API. Open. GL is a cross-platform graphics API that specifies a standard software interface for 3 D graphics processing hardware.

Open. GL

Surface. View • Surface. View is just one way to incorporate Open. GL 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 manipulate objects using Open. GL API calls and is similar in function to a Surface. View

Define Shapes • Possible to define three-dimension shapes in Open. GL ES. • Example: Draw a triangle • Define its coordinates in a vertex array • By default, Open. GL ES assumes a coordinate system where [0, 0, 0] (X, Y, Z) specifies the center of the GLSurface. View frame [1, 1, 0] is the top right corner of the frame and [-1, 0] is bottom left corner of the frame.

Draw a Shape • Drawing a defined shape using Open. GL 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 - Open. GL ES graphics code for rendering the vertices of a shape. • Fragment Shader - Open. GL ES code for rendering the face of a shape with colors or textures. • Program - An Open. GL ES object that contains the shaders you want to use for drawing one or more shapes

private final String vertex. Shader. Code = "attribute vec 4 v. Position; " + "void main() {" + " gl_Position = v. Position; " + "}"; private final String fragment. Shader. Code = "precision mediump float; " + "uniform vec 4 v. Color; " + "void main() {" + " gl_Frag. Color = v. Color; " + "}";

Applying Projection • This transformation adjusts the coordinates of drawn objects based on the width and height of the GLSurface. View where they are displayed. Without this calculation, objects drawn by Open. GL 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 Open. GL view are established or changed

Adding Motion / Responding to Touch Events • Open. GL 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 Open. Gl ES graphics • In order to make your Open. GL ES application respond to touch events, you must implement the on. Touch. Event() method in your GLSurface. View 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/Crossfade. Activity. java • _layout/activity_crossfade. xml • menu/activity_crossfade. xml

Using View. Pager 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 View. Pager provided by the support library. View. Pager 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/Screen. Slide. Page. Fragment. java • src/Screen. Slide. Activity. java • layout/activity_screen_slide. xml • layout/fragment_screen_slide_page. xml

END