Tag: layout rendering issue

Layout rendering issue – Optimizing GPU overdraw

As an android developer, you always wish that your application run smooth and fast. There are many ways to improve performance of the application by coding as well as layout design.

Layouts are a key part of Android applications because that directly affect the user experience. If implemented poorly, your layout can lead to a memory hungry application with slow UIs. As most Android phones run on less powerful CPUs and GPUs, we developers should make sure the application we develop does not overload both the processors with unwanted and/or repetitive instructions.

GPU stands for Graphical Processing Units, architecture of GPU is not differed too much from CPU. One of the main functions of the GPU is to lighten the load on the CPU, especially when running graphics intensive applications like hi-res games or 3D graphics apps.

How to avoid layout rendering issue?

When building your views, it is important to look at the Component Tree in the upper-right of the IDE screen. The more nested your views become, the more complicated the View Tree becomes, and the longer it will take to render.

For each view in your app, Android goes through three steps to render on the screen: Measure, layout, and draw.

  • Measure: Measured start as the top of the layout and start measuring the dimension of each view to be displayed on the screen.
  • Layout: After measured, each view will layout its children, and pass the child view to its parent (all the way back up to the root view).
  • Draw: Once the layout is completed, each view will be drawn on the screen.

The more views your app has, the more time it will take to measure, layout, and draw. To minimize the time, it is important to keep the render tree as flat as possible.

Measure + layout + draw should be = 16ms in order to run at 60fps.

Slow Layout rendering issues can have many root causes but a common one is overdraw.

What is overdraw?

Overdraw means how many times a pixel on the screen has been redrawn in a single frame.

When it occurs?

Overdraw happens every time the application asks the system to draw something on top of something else. i.e, a window with a white background and a single button on top of it. When the system draws the button, it draws over the existing white background. That’s overdraw.

Is Overdraw avoidable?

Yes. But too much overdraw can be an issue. Because devices have limited memory bandwidth and if overdraw causes your application to require more bandwidth than available, performance will degrade.

Problems with overdraw

With overdraw in Android we waste GPU time by coloring the pixels on the screen that end up being colored again by something else later.

How to identify?

There are many ways to identify and fix it, but following Three are most popular:

  1. Hierarchy Viewer
  2. Tracer for OpenGL
  3.  Show GPU overdraw.

The first two can be found in ADT or the stand-alone monitor tool. The last tool is part of Android Developer options.

Read More