Optimizing Layouts in Android – Reducing Overdraw

Optimizing Layouts in Android – Reducing Overdraw

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?

The colours mean the following things:

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 painted4 times on the screen.

Red – 4x Overdraw – The pixels on the screen have been painted 5times 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: 

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF">

to this: 

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">


Modifying the layout yielded the following result

As you can see, the overdraw has been minimized. The red overdraw has been reduced.

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

You can also use other tools to see why overdraw is happening, tools such as Hierarchy Viewer and GL Tracer.

How do you debug overdraw issues? Do you have any other tips to share?

Also, you should totally Download the Book Dash App or contribute on Github!

Links:

http://developer.android.com/tools/performance/debug-gpu-overdraw/index.html