Skip to content
tezvyn:
Menu

Android Overdraw: Stop Painting Pixels Twice

Source: developer.android.comMediumHow cards are made

Android Overdraw: Stop Painting Pixels Twice

Overdraw is wasted GPU work, painting the same pixel multiple times in one frame. It causes UI stutter and drains battery. Fix it by removing unneeded backgrounds and flattening your UI layouts.

Why it exists

To maintain a smooth user experience, an app needs to render frames in under 16ms. The GPU has a finite budget of work it can do in that time. Overdraw is the process of drawing the same pixel multiple times in a single frame, consuming this budget for no visible benefit, which can lead to dropped frames (jank) and increased battery usage.

The mental model

Think of painting a room. You would not apply a coat of blue paint to a wall, let it dry, and then immediately paint over it with a coat of white. You would just paint it white from the start. Overdraw is the GPU painting that unnecessary blue layer that no one will ever see, wasting time and paint.

How it works

The Android system draws your UI from back to front based on the view hierarchy. If a parent layout has a white background and a child view on top also has a white background, the GPU first paints the pixels for the parent, then paints the exact same pixels again for the child. The "Debug GPU overdraw" developer option visualizes this by color-coding areas: blue for 2x overdraw, green for 3x, and red for 4x or more. Your goal is to minimize or eliminate red areas.

When to use it

Optimize for overdraw when you observe UI jank, especially during scrolling or animations. It's a primary optimization target for lists in a RecyclerView, complex custom views, or screens with many overlapping UI elements. Prioritize fixing overdraw on performance-critical screens and on devices with less powerful GPUs.

When not to use it

Do not obsess over eliminating every single instance of 2x (blue) overdraw, as it's often unavoidable and has a negligible performance impact. Aggressively removing backgrounds can break UI functionality; for example, a view might need its background for touch feedback (ripples) or to be visible when it has no content. Focus your efforts on the 4x+ (red) areas where the performance cost is highest.

One canonical example

A common source of overdraw is a RecyclerView where both the list itself and each list item have an opaque background. If the RecyclerView has a white background and each list item also has a white background, every item pixel is drawn twice. The fix is to set the RecyclerView's background to white, but set the root view of each list item's layout to have a transparent background (@android:color/transparent). The pixels are then painted only once by the parent RecyclerView.

Interview question

When analyzing Android UI performance with the "Debug GPU overdraw" tool, which situation indicates the most critical need for optimization?

  • a.A layout where a parent view has a background and its child view has a transparent background.
  • b.A RecyclerView that consistently shows red tints on its list items while scrolling.Correct
  • c.A screen where most elements show a blue tint, indicating 2x overdraw.
  • d.A complex custom view that displays a green tint, indicating 3x overdraw, but only during a brief animation.
Why?

The card states that efforts should be focused on 4x+ (red) areas, especially in performance-critical components like RecyclerViews during scrolling. 2x overdraw (blue) is often negligible, and while 3x (green) is worse, a brief animation might not be as critical as consistent 4x+ overdraw in a scrolling list.

Just read this? Test yourself on what you have been reading.

Read the original → developer.android.com

Put your scrolling time to good use

Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.

The iPhone app is on the way

We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.

Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.

Get it on Google PlayiPhone app coming soon

We are hiring for this. Open roles that interview on android — each one lists the topics its interview covers.

See open roles