googleads
Reduce Overdraw From Your Android Application
preloder
Android Mobile App Development

Reduce Overdraw From Your Android Application

When an app draw the same pixel more than once in a single frame on the parent view and child views, then this will lead to event called overdraw. Overdraw is usually unnecessary, and best to be eliminated from your app. Every time we ought to face this issue while building our apps so we don’t want you to face such creepy issues in your apps too. Yes! this small bug can’t block us anymore. Now let’s see how to  reduce overdraw and improve the performance of an app by reducing unnecessary rendering.

What Is Overdraw?

An overdraw defines to a system that drawing the pixel to the screen multiple times. The user interface of the app is likely influenced by designers, developers, usability studies, and testing. As the UI of each app is your connection to the customers, it defines your brand, and it requires careful planning. The UI is the most important that your UI design is built to be performant.

How To Check The Overdraw In The Application

 

  • Go to Settings and tap Developer Options.
  • Select “Debug GPU Overdraw.”
  • Select “Show overdraw areas.”

There are four colors for overdraw which tell us how many times the pixel is drawn on the screen.

The colors mean the following things:

Original color – no overdraw – The pixels have been painted once on the screen.
Blue – 1x Overdraw – The pixel was painted twice.
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 – This pixel was painted 5 times, or possibly even more.

Android goes through three steps to render on the screen: measure, layout, and draw in each view in the app. The debug GPU overdraw tool colors the screen with Original color, red, green, blue, pink; Red being the areas with highest overdraw and blue being the least overdraw regions of the screen.

How To Fix The Overdraw?

Here I made a simple android application with two text views. In this android app is using simple Linear layout (Vertical) divide this linear layout with two text views equally.

Now let’s open the Debug GPU overdraw, and we will see the overdraw.

Xml Code

 

The XML code in bold shows the apparent mistake.

We have declared background colors for each child in the LinearLayout ViewGroup. We have also set a background color in the parent ViewGroup. First, the top LinearLayout is drawn on the screen. The background is set to grey. The child LinearLayout is drawn next which also have a background color grey. The most of the overdraw comes from stacked backgrounds.

Related: How To Improve The Quality Of Android Apps Using Firebase Test Lab

 

How Do Reduce Overdraw And Improve Performance?

We know that the same grey color is drawn multiple times in child views (Linear layout and text view). So will remove the background color from text view second linear layout and see the output.

XML Code

 

Now we can see the difference between both screens. Previously we set the background color for both linear layout and text view also. We can see the overdraw has been minimized. The red overdraw has been reduced.

You should aim for a maximum overdraw of 2x (Green).
We can use other tools to see why overdraw is happening, tools such as Hierarchy Viewer and GL Tracer.

Also Read: How to Use Beacon in Android Application

 

Solution

Reducing the overdraw is the first we need to check in the child views that have we defined the background color in the child view, if we defined the background then remove it from the child views, Above code which I mentioned I defined the background color in my parent layout as well as in the child views, so let’s remove them then we will see how much the overdraw reduces.

Want to learn more? Then never miss out anything from  our largest blog portal where you can get continuous blog updates & latest posts about all latest technologies which would be perfect for your 15 minutes tea break! In case if you’re a newbie then don’t forget to subscribe us to get the latest updates from diverse technologies. What else guys hit the  subscribe link  and go crazy over learning. For more inquires reach us via info@agiratech.com

The following two tabs change content below.

Sankar Raman

A full stack Android app developer having 4 years of experience in Mobile app development. Well amalgamated Co-worker who rapidly commutes in developing, implementing and adopting new technologies to wider possibilities of App development.

Leave a Reply

Your email address will not be published. Required fields are marked *

[contact-form-7 id="120788" title="Web Page Form"]

Schedule Your Call