1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
page.title=Debug GPU Overdraw Walkthrough
meta.tags="android, performance, profiling, tools, rendering, overdraw"
page.tags="android", "performance", "profiling", "tools", "rendering", "overdraw"
page.metaDescription=Use color-coding to show how many times each pixel is redrawn on the screen to reduce rendering overhead.
page.image=tools/performance/thumbnails/tools_debug_gpu_overdraw.png
page.article=true
@jd:body
<style>
.no-bullet {
list-style-type: none;
}
.padded {
padding-left: 10px;
}
</style>
<div id="tb" style="margin-left: 7px; margin-bottom: 5px;">
<h2>In this document</h2>
<ul>
<li><a href="#WhatYouNeed">Prerequisites</a></li>
<li><a href="#VisualizingOverdraw">Visualizing Overdraw</a></li>
</ul>
<h2>You should also read</h2>
<ul>
<li><a href="{@docRoot}tools/performance/profile-gpu-rendering/index.html">
Profile GPU Rendering Walkthrough</a></li>
<li><a href="{@docRoot}tools/performance/hierarchy-viewer/index.html">
Hierarchy Viewer Walkthrough</a></li>
</ul>
</div>
<p>This walkthrough shows how to visualize overdraw on your mobile device by color-coding
interface elements based on how often they are drawn underneath.</p>
<p>What it's good for:</p>
<ul>
<li>Showing where an app might be doing more rendering work than necessary.</li>
<li>Helping you see where you might be able to reduce rendering overhead.</li>
</ul>
<h2 id="WhatYouNeed">Prerequisites</h2>
<ul>
<li>A mobile device with <a href=
"http://developer.android.com/tools/device.html#developer-device-options">Developer Options</a>
enabled.</li>
</ul>
<h2 id="VisualizingOverdraw">Visualizing Overdraw on your Mobile Device</h2>
<ul class="no-bullet">
<!-- this also hides bullet, by default outside box -->
<li><div style="overflow:hidden">
<ol class="padded">
<div class="figure" style="">
<img
src="{@docRoot}images/tools/performance/debug-gpu-overdraw/gettingstarted_image01.png"
alt=""
width="400px" />
<p class="img-caption">
<strong>Figure 1. </strong>Steps for turning on Debug GPU Overdraw.
</p>
</div>
<li>On your mobile device, go to <b>Settings</b> and tap <b>Developer Options</b>.</li>
<li>In the <em>Hardware accelerated rendering</em> section,
select <b>Debug GPU Overdraw</b>.</li>
<li>In the <b>Debug GPU overdraw</b> popup, select <b>Show overdraw areas</b>.</li>
</ol>
</div></li>
<li><div style="overflow:hidden">
<hr>
<ol class="padded" start="5">
<div class="figure" style="padding-right:100px">
<img
src="{@docRoot}images/tools/performance/debug-gpu-overdraw/gettingstarted_image02.png"
alt=""
width="180px" />
<p class="img-caption">
<strong>Figure 2. </strong>Example of<br>Debug GPU Overdraw output.
</p>
</div>
<li>Don't panic as your screen turns into a delirium of colors.
The coloring is provided to help you diagnose your app's display behavior.</li>
</ol>
</div></li>
<li><div style="overflow:hidden">
<hr>
<ol class="padded" start="6">
<div class="figure" style="">
<img
src="{@docRoot}images/tools/performance/debug-gpu-overdraw/gettingstarted_image03.png"
alt=""
width="300px" />
<p class="img-caption">
<strong>Figure 3. </strong>Color key for Debug GPU Overdraw output.
</p>
</div>
<br><br>
<li>The colors are hinting at the amount of overdraw on your screen for each pixel, as
follows:
<ul>
<li><b>True color:</b> No overdraw</li>
<li><b>Blue:</b> Overdrawn once</li>
<li><b>Green:</b> Overdrawn twice</li>
<li><b>Pink:</b> Overdrawn three times</li>
<li><b>Red:</b> Overdrawn four or more times</li>
</ul>
</li>
</ol>
</div></li>
<li><div style="overflow:hidden">
<hr>
<ol class="padded" start="7">
<div class="figure" style="">
<img
src="{@docRoot}images/tools/performance/debug-gpu-overdraw/gettingstarted_image04.png"
alt=""
width="300px" />
<p class="img-caption">
<strong>Figure 4. </strong>Examples of undesirable and desirable
<br>Debug GPU Overdraw output.
</p>
</div>
<br><br><br>
<li>Some overdraw is unavoidable. As you are tuning your app's
user interface, the goal is to arrive at a visualization that shows mostly true
colors and 1X overdraw in blue.</li>
</ol>
</div></li>
</ul>
|
