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.

Hierarchy viewer shows the views tree of the currently presented layout on the device, and allow to analyze the time consumption for every component, basically it provide visual representation of the layout’s view hierarchy. For more understanding you can go through android official site.

Tracer for OpenGL that comes with the SDK and can be run from the Device Monitor. This tool will show you how your screen is drawn, step-by-step, component-by-component. You can read more from here.

GPU overdraw tool paints the screen in different colors to indicate where overdraw occurs, and how much. You will notice that your screen filled with different colors. This colors represent how many times the pixel has been painted on the screen.

img_optimumbrew_color_key_for_gpu_overdraw_output

Fig.1 Color key for Debug GPU Overdraw output

Red: Overdrawn four or more times

Light Red: Overdrawn three times

Green: Overdrawn twice

Blue: Overdrawn once

True Color: No overdraw

How to enable it?

Steps:  Got to settings > Developer options > select “Debug GPU overdraw”.

Overdraw depends on how your layout is built. There are many ways to fix overdraw as mention above,

Most popular is by removing the window background – As you can see in the Fig. 2.1 there is 2x overdraw (Green color) at the background of the screen. Even though there is only one layer of semi white background. Because every application has default background.

so, default background + semi white background = 2x overdraw.

img_optimumbrew_screen_with_overdraw

Fig.2.1 Screen with overdraw

The solution is simply removing the background from the root layout (ScrollView) & setting the android:windowBackground attribute on your application theme with your custom background color, or calling getWindow ().setBackgroundDrawableResource (<color>) on the Activity’s onCreate() method.

So, Going From this:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/color_app_bg">

To this:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

Add to application theme (in style.xml)

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">@color/color_app_bg </item>
</style>

Or:

Add to Activity’s onCreate ()

getWindow().setBackgroundDrawableResource(R.color.color_app_bg);

img_optimumbrew_screen_with_optimize_overdraw

Fig.2.2 Screen after optimize overdraw

So, modifying the layout gives the result as Fig. 2.2. Now the red marks are invisible suggesting that there’s very less or nil overdraw. This view is faster to render by the GPU, less time consumed and helps overall user experience to be much smoother and faster.

Reference:

https://developer.android.com/studio/profile/dev-options-overdraw.html

http://blog.udinic.com/2013/03/04/android-app-to-the-challenge/

https://www.hackerearth.com/notes/rendering-performance-in-android-overdraw/

https://www.androidpit.com/what-is-a-gpu

Leave a Comment