Debug GPU Overdraw Walkthrough

This walkthrough shows how to visualize overdraw on your mobile device by color-coding interface elements based on how often they are drawn underneath.

What it's good for:

• Showing where an app might be doing more rendering work than necessary.
• Helping you see where you might be able to reduce rendering overhead.

Prerequisites

• A mobile device with Developer Options enabled.

Visualizing Overdraw on your Mobile Device

• 

  Figure 1. Steps for turning on Debug GPU Overdraw.

  1. On your mobile device, go to Settings and tap Developer Options.
  2. In the Hardware accelerated rendering section, select Debug GPU Overdraw.
  3. In the Debug GPU overdraw popup, select Show overdraw areas.

• ---

  

  Figure 2. Example of
  Debug GPU Overdraw output.

  5. 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.

• ---

  

  Figure 3. Color key for Debug GPU Overdraw output.

  
  
  
  6. The colors are hinting at the amount of overdraw on your screen for each pixel, as follows:
     • True color: No overdraw
     • Blue: Overdrawn once
     • Green: Overdrawn twice
     • Pink: Overdrawn three times
     • Red: Overdrawn four or more times

• ---

  

  Figure 4. Examples of undesirable and desirable
  Debug GPU Overdraw output.

  
  
  
  
  7. 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.