This presentation is about the essence of overdraw and the problems it causes. There are also hints on finding and overcoming overdraw. Presentation by Rostyslav Lesovyi (Lead Software Engineer, GlobalLogic, Lviv) and Oleksandr Kravchenko (Software Engineer, GlobalLogic, Lviv) delivered at GlobalLogic Lviv Mobile TechTalk, November 13, 2014. More details - http://www.globallogic.com.ua/press-releases/lviv-mobile-2014-coverage

1. ©2014 GlobalLogic Inc. CONFIDENTIAL

2. Android UI Performance
Overdraw problem
©2014 GlobalLogic Inc. CONFIDENTIAL

3. CONFIDENTIAL
Agenda
1. What is overdraw?
2. Why is overdraw bad?
3. How to detect and fight overdraw?

4. What is overdraw?
©2014 GlobalLogic Inc. CONFIDENTIAL

5. CONFIDENTIAL
What is overdraw?
Layer #1
Layer #2
Layer #3
Layer #4

6. Why is overdraw so bad?
©2014 GlobalLogic Inc. CONFIDENTIAL

7. CONFIDENTIAL
Smooth user experience
16ms 16ms 16ms 16ms
Frame takes < 16ms 13ms 10ms 8ms 15ms
Frame takes > 16ms 13ms 18ms 18ms
Dropped Frame
Screen refresh rate ~60 Hz
t

8. Mobile vs. Desktop - Smartest Android in the World!!!
Adreno 330
GFlops
130
CONFIDENTIAL

9. Mobile vs. Desktop - Is not so smart after all...
Adreno 330
130
CONFIDENTIAL
AMD A10
Intel HD 5000
615 500
NVidia GTX Titan
GFlops
AMD 7970 GHz
GFlops
4500 4300

10. Mobile vs. Desktop - But there is still hope!
Adreno 330
130
CONFIDENTIAL
GFlops AMD A10
Intel HD 5000
GFlops
615 500

11. CONFIDENTIAL
Android Devices Zoo
Hi-End devices
Nexus 6, Samsung Galaxy S5, HTC One, etc.
Can handle most issues without influencing user
experience even with complex UI hierarchy

12. CONFIDENTIAL
Android Devices Zoo
Low-End devices
most pre-ICS devices like HTC Wildfire S
Some devices can deliver smooth user experience for
simple UI, other will fail even for optimal UI
Note: most embedded devices go here

13. CONFIDENTIAL
Android Devices Zoo
Mid-End devices
Nexus S, Samsung Galaxy S2, HTC Sensation, etc.
Capable of creating smooth user experience but can
easily fail if UI is not optimized
Note: most STB devices go here

14. How to detect and fight overdraw?
©2014 GlobalLogic Inc. CONFIDENTIAL

15. How to detect overdraw?
1. Show GPU overdraw (enable developers mode on
phone)
2. Hierarchy viewer (requires ViewServer library for
released devices)
3. Tracer for OpenGL
©2014 GlobalLogic Inc. CONFIDENTIAL

16. How to detect overdraw with “GPU overdraw”?
● No color means there is no overdraw. So, you are
CONFIDENTIAL
awesome!
● Blue indicates an overdraw of 1x.
● Green indicates an overdraw of 2x.
● Light red indicates an overdraw of 3x.
● Dark red indicates an overdraw of 4x or more. This
is wrong. Fix it.

17. How to detect overdraw with “Hierarchy viewer”?
1. Select Hierarchy viewer perspective in ADT or
CONFIDENTIAL
Device monitor
2. Select a window that you want to inspect
3. Click Load button
4. Export it as Photoshop document when needed

18. How to detect overdraw with “Tracer for OpenGL”?
1. Select Tracer for OpenGL perspective in ADT
CONFIDENTIAL
or Device monitor
2. Click Collects OpenGL information
3. Set package and activity
4. Check traces.

19. CONFIDENTIAL
How to fight overdraw?
● draw less :)
● flatten and simplify view hierarchy
● change window’s background when applicable
● transparent segments for 9-patch won’t be drawn, but transparent bitmaps will
P.S.:
● never ever use requestLayout() for animations
● be careful with layers and dynamically changing views

20. Demo Time!
©2014 GlobalLogic Inc. CONFIDENTIAL

21. Demo
©2014 GlobalLogic Inc. CONFIDENTIAL

22. Q&A
©2014 GlobalLogic Inc. CONFIDENTIAL

23. Thank You!
Rostyslav Lesovyi Oleksandr Kravchenko
©2014 GlobalLogic Inc. CONFIDENTIAL