Android Graphics Overview

We develop Android apps keeping the one thing in mind, providing the best experience to users. Apart from the features, it's important we provide a buttery interaction to the user via display. For this reason it's important that we know how graphics work in Android.

Transcript

1. Android Graphics Overview By: Ashesh Bharadwaj leksustuss @ 123RF.com
2. pcanzo @ 123RF.com
3. Android World’s Mona Lisa
4. PART I – Device Display Overview PART II – Android Graphic Architecture PART III – Analyze & Improve Graphics
5. PART I – Device Display Overview
6. Refresh Rate (Hz) • The number of times per second a display redraw its screen. • It’s measured in Hz.
7. Frame Rate (FPS) • Frame is an image shown on a device display. • FPS is number of frames that are generated per second. • Frames are generated by the system (CPU/GPU etc.) and the FPS may vary depending on the work load.
8. Refresh Rate & FPS FPS Refresh Rate (60Hz) Frame luplupme @ 123RF.com
9. FPS Capped by Refresh Rate SYSTEM DISPLAY < 60 FPS = 60 FPS > 60 FPS 60 Hz Frame
10. 16 Milliseconds
11. The Importance of 16ms • Android framework assumes a device display has refresh rate of 60Hz • 60 frames in 1 second = 60 frames in 1000ms = 1 frame in 16ms (1000/60) • 16ms is the time we have, to generate a frame for buttery experience.
12. Screen Tearing
13. Single Buffer Frame Buffer SYSTEM DISPLAY
14. Solutions • Double Buffering • VSync • Triple Buffering • Adaptive Sync
15. Double Buffering Back Buffer Front Buffer SYSTEM DISPLAY
16. VSync • Fetch me a frame photodeti @ 123RF.com
17. Vsync + Double Buffering; Happy Days
18. Issue with VSync and Double Buffering
19. Triple Buffering
20. Adaptive Sync • Adaptive sync, make the display refresh rate match the FPS • If system is generating 54 FPS then the refresh rate becomes 54Hz • FreeSync (AMD) and G-Sync (Nvidia) • Qualcomm, Snapdragon 835 supports Q-Sync
21. PART II - Android Graphic Architecture
22. Native Libraries + Runtime Application Framework Hardware Abstraction Layer (HAL) Apps Kernel ActivityManager WindowManager SurfaceFlinger HWComposer Gralloc
23. Activity, Window, Surface and Buffer • Every Activity has a window where it displays the content. • The window needs a surface to draw on. • A Surface has a buffer queue. Status Bar App Window Navigation Bar Surface Surface Surface
24. SurfaceFlinger Status Bar App Window Navigation Bar SurfaceFlinger Surface • SurfaceFlinger is a service which provides the Surface. • Each Surface holds a BufferQueue configured for triple buffering. • SurfaceFlinger take the buffers, composite them (with help of HWComposer) and send to device display.
25. Graphic Architecture Simplified ActivityManager My App WindowManager SurfaceFlinger HWComposer 5. Send the buffers
26. BufferQueue My App SurfaceFlinger BufferQueue 1. dequeueBuffer() 2. queueBuffer() 3. acquireBuffer() 4. releaseBuffer()
27. UI Thread - Rendering Process Measure Layout Draw DisplayList • Size, position and then drawing • Each View has corresponding onMeasure(), onLayout(), onDraw() method • Each View has a DisplayList
28. Role of View Hierarchy in Rendering Process LinearLayout TextView LinearLayout TextView TextView • Views are interdependent • Traversed from top to bottom in view hierarchy • Each parent manage its children
29. Double Power = CPU + GPU Measure Layout Draw UI THREAD RENDER THREAD Create DisplayList Execute DisplayList >= Lollipop
30. VSync in Android ViewRoot DecorView Choreographer 3. scheduleTraversals() SurfaceFlinger HWComposer Display 7. performTraversals() LinearLayout 6. VSync 5. VSync 4. VSync 1. Invalidate 2. Invalidate 8. Measure/Layout/Draw
31. PART III – Analyze & Improve Graphics tverdohlib @ 123RF.com
32. Test Setup Device specs API version Debug/Release version
33. Areas to Improve • Code executed in UI thread • Layouts • Resources, mostly images
34. UI Thread • Offload any work that can be, to another thread • Database access, File access, Network access • Any computations which can take time
35. Layouts • Reduce Nesting • Use ConstraintLayout for flat hierarchy • ViewStub • Merge tag • Careful of the “background” attribute
36. Images • Size, size and size • Caching • Use robust and efficient third party libraries
37. Profile GPU Rendering • A quick way to see how your app is performing. • Horizontal green line is 16ms mark. • Colors on the bar represent a stage in rendering. • Don’t look for perfection AKA over optimization.
38. Debug GPU Overdraw • A good way to take off unnecessary load. • Various colors denote the number of times overdraw. • Don’t look for perfection AKA over optimization.
39. Hierarchy Viewer • Easily accessed from Android Device Monitor • Analyze the complexity of layout • Analyze the bottlenecks in Measure/Layout/Draw • Layout Inspector now favored although no profiling yet
40. TraceView • Analyze how methods are performing • Easily accessed from Android Device Monitor • Trace can be started from code • Find the bottlenecks in call stack • View time taken by methods • View method call count
41. Systrace • Overall analysis of the system • Easily accessed from Android Device Monitor • Choose which sections of system to analyze. • Analyze the slow frames • View alert for issues
42. SysTrace – Rendering process 1. Choreographer#doFrame 2. traversal 3. measure 4. layout 5. draw 6. Record View#draw() 7. DrawFrame 8. syncFrameState 9. dequeueBuffer 10. flush drawing commands 11. queueBuffer
43. dumpsys Tool • dumpsys gfxinfo <packagename> • dumpsys SurfaceFlinger • dumpsys window
44. Android Studio 3.0 – Android Profiler Android Monitor replaced by Android Profiler
45. Take care of the UX and everything else shall fall in line • Memory optimization • Network optimization • Battery optimization
46. .com/in/asheshb Ashesh Bharadwaj Mentor, Udacity, Inc.