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
<?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="@color/grey"
tools:context=".OverlayActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" android:background="@color/grey"
tools:ignore="UselessParent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="@string/hello"
android:textColor="@android:color/black"
android:textSize="35sp"
android:background="@color/grey"
tools:ignore="NestedWeights" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/colorPrimary">
</View>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="@+id/textView3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:background="@color/grey"
android:gravity="center"
android:text="@string/hello"
android:textColor="@android:color/black"
android:textSize="35sp"
tools:ignore="NestedWeights" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
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
<?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="@color/grey"
tools:context=".OverlayActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:ignore="UselessParent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="@string/hello"
android:textColor="@android:color/black"
android:textSize="35sp"
tools:ignore="NestedWeights" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/colorPrimary">
</View>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="@+id/textView3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="@string/hello"
android:textColor="@android:color/black"
android:textSize="35sp"
tools:ignore="NestedWeights" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
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
