Padding or Offset? The Compose Rule That Keeps Layouts Honest

Mixing up padding and offset in Compose produces the classic bugs: list items overlapping, click targets landing where they don't belong, and spacing collapsing unexpectedly in RTL layouts. A clear rule for when each applies saves hours of debugging and keeps existing layouts from breaking when modifiers get reordered.

In Jetpack Compose, padding and offset are often used interchangeably, but they answer different layout questions. padding participates in measurement: it reserves space in the parent layout, pushes siblings away, and enlarges clickable regions when placed outside a clickable modifier. offset, on the other hand, leaves the measured size and reserved space untouched, moving the control only at the placement phase. Hit testing follows that final position, so a button shifted with offset responds to clicks where it is drawn.

The practical rule is straightforward: use padding when other controls should make room for the element, and offset when the element should float, overlay, drag, or animate without disturbing its neighbors. For everyday alignment, the article argues, use Alignment, Arrangement, Spacer, or padding rather than jumping to offset. Offset is a refinement tool, not a layout primitive.

Modifier order matters. Putting offset outside clickable keeps the clickable region moving with the shifted position, the usual expectation for buttons. Reversing the order can leave the clickable area anchored to the original layout space, which is only useful for special interactions. The article also covers the lambda form of offset for state-driven displacement, which reads the latest value during layout and avoids recomposing the whole scope on every change.