You have a great idea and you have launched your application into the wild. Now you hear people complaining how your app is slow and horrible to use. Sad face.
One such step to improve the rendering time of your application is to have a look at the GPU Overdraw tool.
What is Overdraw?
Overdraw happens every time the application asks the system to draw something on top of something else. The “Debug GPU Overdraw” tool overlays colours on top of your screen to indicate how many times a pixel has been redrawn.
How do I enable the tool Debug GPU Overdraw?
- Go to Settings on your device.
- Go to Developer Options
- Select “Debug GPU Overdraw”.
- Select “Show overdraw areas”
You will notice your screen change colour – don’t panic. Navigate to your application and now we can begin to understand how to improve our layouts.
What do the different colours mean?
Original colour – no overdraw – The pixels have been painted once on the screen.
Blue – 1x Overdraw – The pixels have been painted 2 times on the screen.
Green – 2x Overdraw – The pixels on the screen have been painted 3 times on the screen.
Pink – 3x Overdraw – The pixels on the screen have been painted 4 times on the screen.
Red – 4x Overdraw – The pixels on the screen have been painted 5 times on the screen.
You can see from my Book Dash application, that my initial layout was doing a lot of overdraw. 🙁
How do you fix overdraw?
In the example above, I removed the background colour that was set on the RelativeLayout and let the theme draw the background.
So going from this:
Modifying the layout yielded the following result 😊:
This could be further improved to the layout showing mostly its true colour and a slight amount of blue overdraw. Some overdraw is inevitable.
Not all cases of overdraw are related to background colours. Other problems can be present too, like very complex layout hierarchies or too many views.
You should aim for a maximum overdraw of 2x (Green).
How do you debug overdraw issues? Do you have any other tips to share?