As an Android developer you should certainly know what overdraw is and why it’s bad. If not – THIS episode of Android Performance Patterns got you covered, check it out.

Finding overdraw is super easy – you can do it right on your device:

1. hop into Developer Options
2. find Debug GPU overdraw (usually under Hardware Accelerated Rendering category, although it varies from device to device)
3. choose Show Overdraw Areas

Don’t freak out when your screen turns in crazy colors. The more red you see, the more overdraw you have. Here’s a nice illustration of the overdraw scale.

Overdraw scale from the official Android developers website

In an ideal world your app will retain it’s normal colors – a.k.a no overdraw will occur. In reality that’s not possible, so we should aim for the second best – the “blue-ish” tint that means 1X overdraw, or that every pixel was drawn twice.

In my experience most of the overdraw comes from stacked backgrounds. In other words you have some background defined by your theme, then another one by your parent LayoutManager in an XML file, then of course a ListView item background and finally – the user avatar picture 😀 This easily this adds up to 4X.

Enough blabbing, let’s get to the real stuff! Here’s the easiest routine to combat overdraw:

0. Inspect all screens of your app and find a good red-ish candidate to fix

To find one, just use the method from above and play with your app.

1. Open HierarchyViewer

HierarchyViewer is one of the nice tools the Android platform provides. It can be opened either from Android Device Monitor (recommended way) or directly from your %ANDROID_SDK%\tools\ folder.

2. Load View Hierarchy

Select your process from the list and load the hierarchy. If the Load View Hierarchy button is disabled check Romain Guy’s answer in THIS question, or directly use his ViewServer helper class to overcome this problem. 

3. Capture Layers

After the view hierarchy is loaded it’s time to Capture Layers. This will save them in .psd file, which can be opened by Photoshop, GIMP (free) and image editing tools.

4. Inspect in Photoshop / GIMP and find exact problems

Here comes the best part – the rendered layers map exactly as layers in the .psd (or vice versa actually). So if you’re wondering if there’s overdraw on some part of the app, just hide the layer in your editor and see what’s beneath it. Element id’s are used as layer names here.

On the screenshot below I’ve scrolled all the way to the bottom. As you can see I’ve got 3 layers that cover the screen:

• DecorView with grey background sitting at the bottom. That’s the background coming from the current theme
• RelativeLayout with black fill.
• RelativeLayout with a background picture.

As you can imagine I’d care only about the last one, the picture. Which leads to the next step.

5. Fix the problem 🙂

In this case we’ve got a bunch of choices. The obvious one is to remove the grey background from the theme and the black background from the RelativeLayout. This will leave just the picture, which is what we want.

However we can do better. Removing the background from the theme is not a good idea, especially if that theme is used by the starting Activity of the app. If we remove it, then the user will be left with a default with a default grey loading screen for those couple of (milli)seconds when our app is starting “cold”.

In this particular case, since the same background image is displayed on every activity in the app, we can just set it as background of the theme. Then we can remove it from all other layout files, along with obsolete backgrounds like the black one in this case. Not only have we reduced overdraw significantly, but also saved a bunch of resources, as the image is loaded just once, not again and again for different activities.

Conclusion

Now I now you’re thinking – “that’s too simple to be true, I don’t have this kind of overdraw“. I’ll be really happy if you don’t! But unfortunately many apps do. For example some of the apps I use daily and have tons of overdraw include Reuters, TuneIn, Booking.com, T2Expense and more. Of course the “stacked backgrounds” overdraw is the simplest and easiest to find and fix. Things can get messy when we have a complex and richer view hierarchy, but the approach to fixing it will be the same. So just keep this simple routine in your arsenal … you never know when it’ll come in handy 🙂