How to reduce GPU overdraw

5 min readSep 21, 2021

Hello guys, In this article, we will try to learn about GPU overdraw. we will discuss all what, how, and solutions. So Make yourself ready to deep-dive into AndroidWorld.

Introduction

whenever we read a new thing we have one question what is this(topic)? so let's start a discussion with what is GPU overdraw?

An app may draw the same pixel more than once within a single frame, an event called overdraw. Overdraw is usually unnecessary, and best eliminated. It manifests itself as a performance problem by wasting GPU time to render pixels that don’t contribute to what the user sees on the screen.

The next question is how we will analyze that my android app has a GPU overdraw problem or not?

How to diagnose GPU Overdraw?

Steps to enable GPU Overdraw

On your device, go to Settings and tap Developer Options.
Scroll down to the Hardware accelerated rendering section, and select Debug GPU Overdraw.
In the Debug GPU overdraw dialog, select Show overdraw areas.

Color Code(Number of times Overdrawn)

True color: No overdraw

Blue: Overdrawn 1 time

Green: Overdrawn 2 times

Pink: Overdrawn 3 times

Red: Overdrawn 4 or more times

Causes of GPU Overdraw

Removing unneeded backgrounds in layouts.
Flattening the view hierarchy.
Reducing transparency.

Now we find the place where our app has GPU overdraw now the problem is how to approach this problem so that we can improve GPU overdraw.

Layout inspector

This is one of the awesome tools in the android studio to visualize our layout in 3D witch helps us to find the problem why GPU overdraw is coming in this screen.

How to open layout inspector in android studio.
Mac and windows -> Press Shift twice
Then type “Layout inspector” inside the search field

Click on the 3D View button of the screen by clicking on the marked place of the above image and you can adjust the 3D View by just using the seekbar marked in the above image.

Now analyze is there any problem listed in “Causes of GPU Overdraw” If yes then congratulations 🎉 you find the problem by which GPU overdraw is occurring in your app.

Solution For GPU Overdraw Problem

Removing unneeded backgrounds in layouts.

By default, a layout does not have a background, which means it does not render anything directly by itself. When layouts do have backgrounds, however, they may contribute to overdraw.

Removing unnecessary backgrounds is a quick way of improving rendering performance. An unnecessary background may never be visible because it’s completely covered by everything else the app is drawing on top of that view. For example, the system may entirely cover up a parent’s background when it draws child views on top of it.

To find out why you’re overdrawing, walk through the hierarchy in the Layout Inspector tool. As you do so, look out for any backgrounds you can eliminate because they are not visible to the user. Cases where many containers share a common background color offer another opportunity to eliminate unneeded backgrounds: You can set the window background to the main background color of your app, and leave all of the containers

2. Flattening the view hierarchy.

Modern layouts make it easy to stack and layer views to produce beautiful design. However, doing so can degrade performance by resulting in overdraw, especially in scenarios where each stacked view object is opaque, requiring the drawing of both seen and unseen pixels to the screen.

If you encounter this sort of issue, you may be able to improve performance by optimizing your view hierarchy to reduce the number of overlapping UI objects. For more information about how to accomplish this, see Optimize view hierarchies.

3. Reducing transparency.

Rendering of transparent pixels on screen, known as alpha rendering, is a key contributor to overdraw. Unlike standard overdraw, in which the system completely hides existing drawn pixels by drawing opaque pixels on top of them, transparent objects require existing pixels to be drawn first, so that the right blending equation can occur. Visual effects like transparent animations, fade-outs, and drop shadows all involve some sort of transparency, and can therefore contribute significantly to overdraw. You can improve overdraw in these situations by reducing the number of transparent objects you render. For example, you can get gray text by drawing black text in a TextView with a translucent alpha value set on it. But you can get the same effect with far better performance by simply drawing the text in gray.