GPU Overdraw

Android device comes with a very nifty tool i.e. GPU Overdraw. This tool will help you figure out the UI related issues. I’ll try to explain this with the help of an example. First of all we need to enable GPU Overdraw.

Steps to enable GPU Overdraw:

a). On your device, go to Settings and tap Developer Options.

b). Find the option Debug GPU overdraw dialog, and select Show overdraw areas.

Once it is enabled then you will be able to see you device’s screen turning with 4 different colors.

1. Blue Overdrawn 1 time
2. Green Overdrawn 2 times
3. Pink Overdrawn 3 times
4. Red Overdrawn 4 times or more

Now, lets move into coding parts.

Just take for an instance you have to make put one icon and to the right of that icon a Button should be there, with a background white.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical"
    tools:context="com.gpu_overdraw.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:background="#ffffff"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@mipmap/ic_launcher" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:background="#ffffff"
            android:orientation="horizontal">


            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="#ffffff"
                android:text="Sample Button" />

        </LinearLayout>
    </LinearLayout
</LinearLayout>

After this run your app, and enable the GPU Overdraw, you will be able to see this screen, with few overdraws.

As you can see, there is a overdraw in the Button area. We can remove that overdraw with making background color white to the parent layout itself. No need to provide unnecessary background color white.

You may have noticed that white color is being used multiple times in the code. First the LinearLayout is drawn with the white background, then the child LinearLayout also draws a white color and it have another child layout LinearLayout which draws white again. Therefore, we are wasting GPU cycles here by redrawing on the same pixels multiple times. This is not because the colors are same, but because we are redrawing the pixels again and again.

Modify the above xml like this.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical"
    tools:context="com.gpu_overdraw.MainActivity">
<!--
Provide the background color only to the parent layout, 
if only that colour is going to be used in this entire layout.
-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@mipmap/ic_launcher" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:orientation="horizontal">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Sample Button" />

        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Below is the modified result, you can see the changes.

Well this fix is just for one page. Suppose you have a requirement that in all of the pages, you have to use White background, so instead of going in every xml, and making parent layout’s background as white. We can actually modify it in styles.xml, like this.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" 
        parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!-- This will reflect in all the pages.-->
        <item name="android:windowBackground">@color/colorWhite</item>
    </style>

</resources>

We should be using this GPU Overdraw option from our device’s developers options to check the unnecessary overdrawing of a layout. But we should be more focusing on Battery Usage, luckily Android have a way out from this too. For this we should be using Batterystats “a tool included in the Android framework that collects battery data on your device”, for more clarity please do check this link .

Try this out. However there are many ways to check you app performance, like TraceView, Hierarchy View, Leak Canary, HProf, systrace etc.

I’ll updating all soon.

Happy Coding.

Lets connect on Github, LinkedIn and have a look at my Website.