Android Performance — Overdraw
Rendering i.e, drawing the UI on the mobile screen influences every app users’ perception of quality. Every user’s eyes demand smoothness in rendering images and text to the screen. Hence, it’s better to avoid sluggish responsiveness and jank when drawing to the screen.
In this blog, I will explain what is Overdraw , how it affects the rendering performance and how we can fix overdraw. Let’s go!!
What is Overdraw ?
- Usually the Android system draws the screen pixel by pixel inside a frame.
- Overdraw is when the system draws a pixel on the screen multiple times in a single rendering frame.
For example : if we have a bunch of stacked views, each view hides a portion of the one below it.
To learn more about how the Android System paints the screen, refer to Painter’s Algorithm.
Effects of Overdraw
It leads to performance problem as it wastes GPU time to render pixels that doesn’t contribute to what the users sees on screen.
Identify Overdraw Issues
- Debug GPU Overdraw Tool — Found in Developer Options in Android Settings -> Debug GPU Overdraw.
- Profile GPU rendering tool — Found in Developer Options in Android Settings -> Profile GPU Rendering or Profile HWUI rendering
Debug GPU Overdraw
- Uses color coding to show the number of times your app draws each pixel on the screen.
- Higher the count, the more it affects the performance.
Debug GPU Colors — Reference
- True color: No overdraw
- Blue: Overdrawn 1 time
- Green: Overdrawn 2 times
- Pink: Overdrawn 3 times
- Red: Overdrawn 4 or more times
Profile GPU rendering tool
- This tool shows a scrolling histogram that infers the time each stage of the rendering pipeline takes to show a single frame.
- To learn more about this — refer here
Fixing Overdraw
- Removing unneeded backgrounds in layouts.
- Flatten view hierarchy.
- Reduce transparency.
Removing unneeded backgrounds in layouts
- When layouts have background, it may contribute to overdraw.
- To improve rendering performance, it is suggested to remove unnecessary backgrounds from layout. An unnecessary background may never be visible because it’s completely covered by everything else the app is drawing on top of that view.
- For example, the system may entirely cover up a parent’s background(can be an activity) when it draws child views(can be a fragment) on top of it.
- To walk through the view hierarchy in a layout, use Layout Inspector Tool.
Cases where many containers share a common background color offer another opportunity to eliminate unneeded backgrounds: You can set the window background to the main background color of your app, and leave all of the containers above it with no background values defined.
// Layout with Overdraw
<androidx.constraintlayout.widget.ConstraintLayout 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/white"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@color/white"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
- By removing the unwanted background specified in Linear Layout, we can reduce the overdraw.
<androidx.constraintlayout.widget.ConstraintLayout 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/white"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Flatter View Hierarchy
- To improve performance, we should optimize our view hierarchy to reduce the number of overlapping UI objects.
- When each stacked view object is opaque, requiring the drawing of both seen and unseen pixels to the screen, it affects the rendering performance overdrawing the pixels.
- To optimize view hierarchies, refer here for more.
Reduce transparency
- Alpha rendering — Rendering Transparent Pixels
- Its can causes overdraw.
- Transparent animations, fade-outs, and drop shadows include some sort of transparency and hence contribute to overdraw.
- Unlike standard overdraw, in which the system completely hides existing drawn pixels by drawing opaque pixels on top of them, transparent objects require existing pixels to be drawn first, so that the right blending equation can occur.
- To improve performance, we should reduce the number of transparent objects we render.
- For example, you can get gray text by drawing black text in a TextView with a translucent alpha value set on it. But you can get the same effect with far better performance by simply drawing the text in gray.
References
Thank you for reading. Please do leave your comments if you have any.
