android ui performance & overdraw
DESCRIPTION
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-coverageTRANSCRIPT
©2014 GlobalLogic Inc. CONFIDENTIAL
©2014 GlobalLogic Inc. CONFIDENTIAL
Android UI PerformanceOverdraw problem
CONFIDENTIAL
1. What is overdraw?
2. Why is overdraw bad?
3. How to detect and fight overdraw?
Agenda
CONFIDENTIAL©2014 GlobalLogic Inc.
What is overdraw?
CONFIDENTIAL
What is overdraw?
Layer #1
Layer #2
Layer #3
Layer #4
CONFIDENTIAL©2014 GlobalLogic Inc.
Why is overdraw so bad?
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
CONFIDENTIAL
Mobile vs. Desktop - Smartest Android in the World!!!
GF
lops
Adreno 330
130
CONFIDENTIAL
Mobile vs. Desktop - Is not so smart after all...
Adreno 330
130
AM
D A
10
Inte
l HD
500
0
615 500
GF
lops
GF
lops
NV
idia
GT
X T
itan
AM
D 7
970
GH
z
4500 4300
CONFIDENTIAL
Mobile vs. Desktop - But there is still hope!
Adreno 330
130
GF
lops
AM
D A
10
Inte
l HD
500
0
615 500
GF
lops
CONFIDENTIAL
Android Devices Zoo
Hi-End devicesNexus 6, Samsung Galaxy S5, HTC One, etc.
Can handle most issues without influencing user experience even with complex UI hierarchy
CONFIDENTIAL
Android Devices Zoo
Low-End devicesmost 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
CONFIDENTIAL
Android Devices Zoo
Mid-End devicesNexus 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
CONFIDENTIAL©2014 GlobalLogic Inc.
How to detect and fight overdraw?
CONFIDENTIAL©2014 GlobalLogic Inc.
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
CONFIDENTIAL
● No color means there is no overdraw. So, you are 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.
How to detect overdraw with “GPU overdraw”?
CONFIDENTIAL
1. Select Hierarchy viewer perspective in ADT or Device monitor
2. Select a window that you want to inspect
3. Click Load button
4. Export it as Photoshop document when needed
How to detect overdraw with “Hierarchy viewer”?
CONFIDENTIAL
1. Select Tracer for OpenGL perspective in ADT or Device monitor
2. Click Collects OpenGL information
3. Set package and activity
4. Check traces.
How to detect overdraw with “Tracer for OpenGL”?
CONFIDENTIAL
● 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
How to fight overdraw?
P.S.:● never ever use requestLayout() for animations
● be careful with layers and dynamically changing views
CONFIDENTIAL©2014 GlobalLogic Inc.
Demo Time!
CONFIDENTIAL©2014 GlobalLogic Inc.
Demo
CONFIDENTIAL©2014 GlobalLogic Inc.
Q&A
CONFIDENTIAL©2014 GlobalLogic Inc.
Rostyslav Lesovyi Oleksandr Kravchenko
Thank You!