Defining Z order of views of RelativeLayout in Android
Master System Design with Codemia
Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.
Introduction
In a RelativeLayout, overlapping child views are usually drawn according to child order: later children are drawn on top of earlier ones. That simple rule solves many cases, but modern Android also adds elevation and translation-based depth effects that can change how views appear above one another. The right solution depends on whether you need static stacking, runtime reordering, or real Material-style elevation.
Default Z Order in RelativeLayout
When child views overlap, the normal rule is:
- children declared earlier are drawn first
- children declared later are drawn on top
Example:
Here, blueBox appears above redBox because it is declared later.
The Simplest Static Solution
If you only need one view to appear above another in a static layout, reorder the XML children so the topmost view is declared later.
That is the oldest and simplest solution, and for many RelativeLayout UIs it is still enough.
Runtime Reordering With bringToFront
If the stacking order needs to change dynamically, use bringToFront().
This is useful when one view should temporarily move above another after a user action.
In older layouts, calling requestLayout() and invalidate() after bringToFront() helps make the update visible reliably.
Elevation on Modern Android
On newer Android versions, elevation and translationZ provide a more explicit depth model.
Or in code:
This is more than just draw order. It participates in shadows and Material-style depth behavior.
Which Rule Wins
In practice:
- child order affects drawing order
- elevation affects visual depth on supported Android versions
- runtime calls such as
bringToFront()can alter stacking dynamically
If the UI is simple, child order is usually easiest to reason about. If the design uses Material surfaces, elevation is often the better tool.
Touch Handling Is Related but Not Identical
Visual order and touch behavior are related, but they are not exactly the same concept. A view that appears on top may still not respond as expected if clickability, parent interception, or visibility flags are misconfigured.
So if a view looks correct but touch events feel wrong, do not assume the z-order rule is the only issue.
A Practical Rule for Older RelativeLayout Code
For classic overlapping layouts:
- set the XML child order intentionally
- use
bringToFront()for temporary runtime changes - use elevation only if the UI is on a modern platform path and the visual design needs it
That keeps the stacking model simple instead of mixing every mechanism at once.
Common Pitfalls
- Assuming
RelativeLayoutstacking is magic instead of mostly child-order based. - Mixing
bringToFront()and elevation without a clear reason. - Forgetting that later XML children are usually drawn above earlier ones.
- Debugging touch problems as if they were purely visual z-order problems.
- Using
RelativeLayoutfor heavily layered modern UI when another container may express the design more clearly.
Summary
- In
RelativeLayout, later children are usually drawn on top of earlier ones. - Reordering XML children is the simplest static z-order control.
- Use
bringToFront()for runtime stacking changes. - Use
elevationandtranslationZwhen you need modern visual depth behavior. - Keep visual order and touch handling separate in your debugging model.

