Every time your app draws a pixel on the screen, it takes time. Every time your app draws an opaque pixel to replace something that has already been drawn, it wastes time. Drawing a pixel more than once per screen refresh is called overdraw, and it’s a common problem affecting the performance of modern applications. To be efficient, every time your app refreshes the screen, it should strive to draw every changed pixel only once.
For example, an app might draw a stack of 52 overlapping cards, with only the last card fully visible. Completely drawing the 51 cards that are underneath and partially covered is an example of overdraw.
Overdraw happens, if you fully draw overlapping cards.
The most likely symptom you will see in an app with overdraw is slow rendering and stuttering animations. This is the most generic of symptoms. So, since overdraw is common, and straightforward to test for, it is recommended that you make it a habit to check for it every time you change the views of your app.
Test for overdraw.
You can visualize overdraw using color tinting on your device with the Debug GPU Overdraw tool.
To turn on Debug GPU Overdraw on your mobile device:
Left: Tint colors indicating overdraw. Center: Red warns of too much overdraw. Right: Blue and white indicate no or little overdraw.
Obey the one rule.
If at any given point your app is drawing something that the user does not see, don’t draw it.
In particular:
For example, an app might draw a stack of 52 overlapping cards, with only the last card fully visible. Completely drawing the 51 cards that are underneath and partially covered is an example of overdraw.
Overdraw happens, if you fully draw overlapping cards.
The most likely symptom you will see in an app with overdraw is slow rendering and stuttering animations. This is the most generic of symptoms. So, since overdraw is common, and straightforward to test for, it is recommended that you make it a habit to check for it every time you change the views of your app.
Test for overdraw.
You can visualize overdraw using color tinting on your device with the Debug GPU Overdraw tool.
To turn on Debug GPU Overdraw on your mobile device:
- Open Settings.
- Tap Developer Options.
- In the Hardware accelerated rendering section, select Debug GPU Overdraw.
- In the Debug GPU overdraw popup, select Show overdraw areas.
- Watch your device turn into a rainbow of colors. The colors are hinting at the amount of overdraw on your screen for each pixel. True color has no overdraw. Purple is overdrawn once. Green is overdrawn twice. Pink is overdrawn three times. Red is overdrawn four or more times.
Left: Tint colors indicating overdraw. Center: Red warns of too much overdraw. Right: Blue and white indicate no or little overdraw.
Obey the one rule.
If at any given point your app is drawing something that the user does not see, don’t draw it.
In particular:
- Eliminate unnecessary backgrounds.
- Clip generously and redraw only areas of the screen that have changed.
- Simplify and reorganize your view hierarchy to minimize overlapping in the first place.
