Android UI Performance: GPU Overdraw

Introduction

Ensuring optimal performance in Android applications is crucial for providing a smooth user experience and preserving device battery life. In this post, we will go into two significant aspects of UI performance: overdraw and rendering. We'll explore what they are, how to debug and analyze them, and provide real-life examples and strategies for improvement. We'll also cover how to use the Android Studio Profiler to diagnose and optimize performance issues related to CPU, memory, and energy usage.

UI Performance Overdraw

What is an overdraw?

Overdraw occurs when your app draws the same pixel more than once within the same frame. This is a common performance issue because, in most cases, pixels that are overdrawn do not end up contributing to the final rendered image.

In other terms, an application might be doing more rendering work than necessary, which can be a performance problem due to the extra GPU effort to render pixels that won’t be visible to the user.

Analyzing an overdraw

Once you enable this flag, Android shows overdraw amounts on your screen by tinting pixels in different colors. If you’ve only rendered a pixel one time, you should see it in its true color with no tint.

However, as the overdraw increases, so do the colors. 1x overdraw, for example, is tinted blue, meaning that you’ve now redrawn this pixel one extra time. 2x, 3x, and 4x overdraw follow the same pattern.

Real-life examples

Now that we know what GPU Overdraw means, let’s take a look at some popular apps and see how they perform.

As you can see from these screenshots, very few apps take into consideration overdraw optimization. While it doesn’t directly affect the application’s performance, it does increase battery usage due to additional GPU rendering effort.

Fixing an overdraw

Fixing an overdraw heavily depends on the complexity of the application’s screens. However, several strategies can help reduce or eliminate overdraw. Let's look at the most common fix: removing unneeded backgrounds in layouts.

Removing unneeded backgrounds in layouts

Here's an example of views being overdrawn. All the red areas in the image suggest that the views are redrawn on top of each other. Let's look at the code and figure out what's wrong.

Here we have a parent RelativeLayout with a white background, a child LinearLayout also with a white background, and another child TextView with a white background.

Now it is very important that you notice that the white color is being used multiple times in the code. First the RelativeLayout is drawn with the white background, then the child LinearLayout also draws a white color, and the TextView draws white again.

Therefore, we are wasting GPU cycles here by redrawing on the same pixels multiple times. Note that this is not because the colors are same, but because we are redrawing the pixels again and again.

We now know that the color white is being drawn multiple times on the same view. All we have to do is to remove the white background from the LinearLayout and the TextView.

After changes in the code the overdraw is much lesser, we can now see that there are no more red marks, meaning that there is no heavy overdraw happening anymore.

Other practices

There are many other common practices that one can follow to reduce overdraw, some of them are:

• Removing invisible views. That is, removing views that are completely covered by other views.
• Reducing the use of transparency. For example, instead of using transparency to create a color, just find that color. Instead of using transparency to create a shine-through effect for two overlapping images, preprocess the two images into one.
• Flattening and reorganizing the view hierarchy to reduce the number of views.
• Resizing or rearranging the views so that they do not overlap.