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