getting intimate with images on android with james halpern
DESCRIPTION
Presented at SCREENS 2013 in Toronto. Details at fitc.ca/screens As most Android developers know, dealing with the extreme degree of fragmentation in the Android ecosystem is often challenging. Among the more difficult challenges is managing memory usage, as devices that are in the market today can have as little as 13MB of memory. Now imagine the pains that developers go through when faced with the headache of having massive bitmaps eat up memory in a millisecond. In this presentation, James Halpern will talk about the complexities of image and memory management in Android and walk you through the creation of a successful, powerful and open source image management utility. Come to this presentation to learn about techniques that will help you optimize the performance of your apps. Learn about Android’s memory limitations and the role the garbage collector plays in your app’s performance and complexity. Learn how to communicate android graphics issues to developers, and how good design can create fewer bugs. James will conclude this presentation by briefly walking you through his open sourced image management solution that gracefully handles most of these issues in a simple to use package.TRANSCRIPT
- 1.| CAPABILITIES Getting Intimate with Images on Android @james_halpern | [email protected]
2. Pulse 3. Pulse 4. THE SITUATION 5. Why Kittens are Awesome 6. What happened? 7. | CAPABILITIES Introduction @james_halpern | [email protected] 8. MISSION To become the leading provider of mobile solutions to the worlds most important companies as we help drive a revolution in computing. 9. VALUES Transparency Opportunity Meritocracy Execution 10. Introduction 2+ years of Android 6 product launches 2 Google Play apps 3+ Android libraries 20+ Android projects impacted by tools development, and counting 11. Why I Started 12. Why I Started Performance Bugs Design Time 13. My Library Image Utilities Open Source https://github.com/xtremelabs/xl-image_utils_lib-android Available under Apache 2.0 14. Objectives Simple Fast Powerful 15. Goal Problems Tools API Debugging Solve the images problem, Build great apps 16. | CAPABILITIES Production Quality Software Problems Tools API Debugging @james_halpern | [email protected] 17. Non-Production Quality try { // 5 BILLION lines of code! } catch (Exception e) { // Just in case there is a bug, // lets not crash. } 18. Non-Production Quality new AsyncTask() { public Bitmap doInBackground() { Bitmap bitmap = fetchBitmap(url); return bitmap; } public void onPostExecute(Bitmap result) { imageView.setImageBitmap(result); } } 19. What Users Want The app should just work. 20. Lists that just work Resources that adapt to screen size and resolution Lazy loading that does not interfere with list items Optimizations for ImageView size Images that are available before you scroll to them Smooth, flawless scrolling, across all devices Anticipate the users next action 21. Practices 1. Clean Code 2. Design Patterns 3. Unit Testing 4. Test Driven Development 22. | CAPABILITIES Platform Fragmentation Problems Tools API Debugging @james_halpern | [email protected] 23. Fragmentation 24. Android vs. iOS Android 16MB 96MB iOS 128MB 512MB 25. Why Images are Tough Available memory differs by phone 16MB? 32MB? 64MB? 26. Why Images are Tough Screen Density/Resolution Lower Density = Fewer Pixels = Less Memory Used Higher Density = More Pixels = More Memory Used 27. | CAPABILITIES Image Decoding Problems Tools API Debugging @james_halpern | [email protected] 28. Bitmap Complexities 29. Bitmap Complexities Encoded Decoded Small File Size High Memory Usage 30. Effect of Decoding This cute kitten is: ~20kB on disk ~500kB in memory 31. Effect of Decoding ~33kB on disk ~1.5MB in memory 32. Effect of Decoding 5 megapixel image ~1.8MB on disk ~20MB in memory!!! 33. Approximating Bitmap Sizes Bit Depth * Number of Pixels = Approximate Size Examples of bit depth: ARGB-8888 4 bytes/pixel RGB-565 2 bytes/pixel 34. Big Image, Big Problem What happens if an image is too big? 35. Example: The 15x15dp Ad 36. Summary Images are big in memory Scaling can save memory The API may provide bad images Different image formats perform differently 37. | CAPABILITIES Threads Problems Tools API Debugging @james_halpern | [email protected] 38. Context Switching Main Thread 1 Thread 2 UI will not update here! 39. Context Switching More Threads = Fewer UI Updates 40. Context Switching Main Network 1 Network 2 Network 3 Disk 1 41. Sources of Background Threads Network Disk access Heavy CPU tasks Renders Encoding Decoding etc. 42. Typical App Threads 1. Analytics system? (1-X threads) 2. Ad system? (1-X threads) 3. Network library? (1-10 threads) 4. Content providers? (1-255 threads) 5. Disk/File access threads (1-X threads) 43. Network Threads Network 1 Network 2 Network 3 44. Context Switching Disk 1 45. Strict Mode StrictMode.setThreadPolicy( new StrictMode.ThreadPolicy.Builder() .detectDiskReads() .detectDiskWrites() .detectNetwork() .penaltyDeath() .build() ); 46. | CAPABILITIES Communication Problems Tools API Debugging @james_halpern | [email protected] 47. Communication Product Design Engineering 48. The Density Independent Pixel px = dp * (dpi / 160) 1dp ~= 1/160th of an inch (but not really) 1dp may be smaller than a pixel on low density phones! 49. Forgetting Pixels This is not iPhone! Dont think in pixels! Pixels are different sizes on different phones 50. With that said Designers still need to consider pixels 51. Talking to Designers Break it down! 1. Understand how it works 2. Know what to build 52. Android for Designers http://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/ 53. How it works Heading R Heading R 54. How it works Heading R Heading R H WH W 55. How it works Heading R Heading R H WH W 56. What to Build Back to pixels 57. Targeting Resolutions Providing some Resolutions: 1. What devices? 2. Choose 2-4 resolutions. 3. Test ON DEVICE. 4. Alignment: Start? End? Center? 58. Targeting Resolutions http://en.wikipedia.org/wiki/Comparison_of_Android_devices (1080/1200) x 1920 (720/768/800) x 1280 480 x 800 320 x 480 59. Flexible Designs Only scale down. Dont scale up! 60. Planning for the Small Screen Heading R Heading R 61. Communicate Performance Larger Image = Slower Performance Design With Small Images = Fast App 9-Patches > Images 62. Summary Memory limits Scrolling performance Multiple densities Multiple resolutions ImageView references Image Variety Pixel Formats Image Scaling Performance And on and on The problem is not limited to engineering! 63. | CAPABILITIES Decoding Images Problems Tools API Debugging @james_halpern | [email protected] 64. The BitmapFactory Bitmap File InputStream Resource Byte[] 65. The BitmapFactory Bitmap bitmap; bitmap = BitmapFactory.decodeFile(filePath); bitmap = BitmapFactory.decodeStream(inputStream); etc. 66. Options BitmapFactory.Options options; options = new BitmapFactory.Options(); // Full sized image options.inSampleSize = 1; // 75% smaller options.inSampleSize = 2; 67. Applying Scaling What is the optimal sample size? 68. Applying Scaling 69. Applying Scaling 70. Calculating Scaling Scaled Dimension = Image Dimension / Sample Size Optimal Sample Size: Sample Size = (Floor) Image Width / View Width OR Sample Size = (Floor) Image Height / View Height 71. Calculating Scaling Which one? Height or Width? 72. Calculating Scaling Fit for largest size Crop Fit for smallest size Fit Always smaller than view Saves memory, drops quality Round to closest scaling May hurt quality 73. Applying Scaling Use largest size -- Crop Use smallest size -- Fit 74. Summary Build for the kitten you want, Not for the kitten you have. Scale. 75. | CAPABILITIES API Design Problems Tools API Debugging @james_halpern | [email protected] 76. The Learning Curve 0 10 20 30 40 50 60 70 80 90 Start Setup First Request Callbacks Placeholders ImageLoader Other 77. Objectives Simple. 78. Setup Time Get started in