We know how to use the ViewGroups and Views that Android offers us to make the application screen look/work just as the designer/customer wants, but the way we use those elements is appropriate? πŸ€” Could it be that there is something to improve?... there is a simple way to know, by examining the overdraw of our layout πŸ€“

Overdraw occurs when an area of the screen is drawn more than once due to graphic properties of the elements on screen, the most common causes of overdrawing are unnecessary background colors and overlapping views.

To examine the overdraw, on your Android device you must enable the option Show overdrawn areas in this way:

  1. In Settings, open the Development Options.
  2. In the Hardware Accelerated Rendering section, select the Debug GPU overdraws option.
  3. Select the Show overdrawn areas option.

After following the above steps, the elements in your screen will show up with some different colors, each color has a meaning:

Now just open your application and make sure that most areas in the screen are blue or green, if there are pink or red areas it means that we can make improvements in the layouts πŸ™‚

Let's look at a simple example:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="#FFFFFF">

    <View android:layout_width="match_parent"
        android:layout_height="15dp"
        android:layerType="software"
        android:background="@drawable/dotted_line"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:baselineAligned="false">

        <TextView
            android:id="@+id/text_one"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:padding="4dp"
            android:text="@string/lorem_ipsum"
            android:textColor="@android:color/black"
            android:textSize="15sp" />

        <TextView
            android:id="@+id/text_two"
            android:layout_width="0dp"
            android:background="#FFFFFF"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:layout_marginStart="8dp"
            android:layout_weight="1"
            android:padding="4dp"
            android:text="@string/lorem_ipsum"
            android:textColor="@android:color/black"
            android:textSize="15sp" />

    </LinearLayout>


</LinearLayout>
Finished screen with no overdraw optimization

The image shows a simple screen with two TextViews exactly equal to the naked eye, the screen looks good and we could say that our work on that screen is done πŸ‘πŸ»... but what will it look like when Show overdrawn areas is enabled? πŸ€”

Same screen as before but showing overdraws on screen

As you can see, in the TextView on the right there are pink areas where the letters are drawn (overdrawn x3), while in the left one the letters show green areas (overdrawn x2). Reviewing the layout we realize that the TextView on the right has an unnecessary background defined (background = "# FFFFFF"), by removing that background we get:

Same screen but without the background color in the right TextView

Now the overdraw has been reduced to green and blue, which is acceptable πŸ‘πŸ» but not for the case of a view as simple as this one... seeing the layout again we can identify that the parent element (LinearLayout) that contains both TextViews and the View with the dotted line you have a background that you don't need, so we can remove that background and further improve the layout performance.

Same screen after optimizations mentioned above

The result is that most of our layout now has the original color or blue areas (overdrawn x1) in the case of the letters inside the TextView which is quite good πŸ‘ŒπŸ»πŸ˜ƒ then we disable the option Show overdrawn areas to ensure that our layout is still looking like as we wanted originally.

Screen performance has improved without changes visible to the user, just by removing a few backgrounds that the elements did not need.

The case described in this post only had a few Views with backgrounds, but in real life scenarios we have Layouts of Activities mixed with Fragments that may contain Drawers, RecyclerViews, ViewHolders, ViewPagers, Bottom Sheets, etc ... in these real cases is when the real overdraw can seriously affect the performance of an application and we need to know how to identify and fix it.