How do you arrange UI elements in Jetpack Compose?

What's really being asked

This is a foundational question checking your understanding of Compose's declarative UI paradigm. It's not just about knowing the names Row and Column. It tests if you grasp that layout is achieved by composing functions, and that configuration is done via a standardized, powerful Modifier system. This is a significant departure from the XML/View system's multiple properties and methods. For a senior candidate, clarity and precision are key.

The full answer

A strong answer covers three main points in order. First, identify the primary layout composables: Column for arranging children vertically and Row for arranging them horizontally. Second, explain the Modifier parameter. Describe it as the standard, idiomatic way in Compose to modify a composable's appearance and behavior. Mention that modifiers are chained together, and the order matters. For example, padding before clickable affects a different touch area than clickable before padding. Third, give examples of what Modifier can do, such as setting size (.size(), .fillMaxWidth()), adding space (.padding()), applying decorations (.background()), and adding behavior (.clickable()).

The mistakes people make

A major red flag is treating Modifier as an afterthought or only mentioning one or two functions like padding. This suggests a shallow understanding. A candidate who says "it's for styling" is missing the point that it also controls layout constraints and user interaction. Another weak answer is simply analogizing to LinearLayout without explaining the "how" in Compose—that these are just functions emitting UI, not View objects being inflated and managed. Finally, fumbling the names or confusing Column with LazyColumn without being prompted indicates a lack of precision.

What usually comes next

Expect questions about how to arrange children within a Row or Column using horizontalArrangement and verticalAlignment. A good follow-up is "How would you center a child within a Column both horizontally and vertically?". Another is "Explain the difference between Modifier.weight() and Modifier.width()." or "What is a Box and when would you use it instead of a Row or Column?".

A concrete example

To place an Icon and Text side-by-side with 8dp of space between them, you would use a Row. Inside the Row, you'd place the Icon composable, then the Text composable. To add space, you could apply Modifier.padding(start = 8.dp) to the Text element. A more robust way is to use Arrangement.spacedBy(8.dp) on the Row itself, which automatically adds space between all children.