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.
Figure 1. Steps for turning on Debug GPU Overdraw.
On your mobile device, go to Settings and tap Developer Options.
In the Hardware accelerated rendering section,
select Debug GPU Overdraw.
In the Debug GPU overdraw popup, select Show overdraw areas.
Figure 2. Example of Debug GPU Overdraw output.
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.
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.
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.