Skip to content
tezvyn:

How to arrange UI elements in Jetpack Compose?

Source: developer.android.comEasyHow cards are made

How to arrange UI elements in Jetpack Compose?

This tests your grasp of Compose's declarative layout basics. A good answer defines Column (vertical) and Row (horizontal) for structure, and Modifier for decoration, size, and behavior. A red flag is confusing Modifiers with simple styling.

What's really being asked

This is a foundational 'do you know Compose' question. It verifies you understand the basic building blocks of declarative UI: Column and Row for structure, and Modifier for everything else. For a senior role, it's a quick check to ensure your experience is practical, not just theoretical, and that you've fully moved past the XML mindset of Views and LayoutParams.

The full answer

A strong answer explains the three core components. First, use the Column composable to arrange children vertically, one after another. Second, use the Row composable to arrange them horizontally, side-by-side. Third, explain that the Modifier parameter is the standard, idiomatic way to decorate or add behavior to a composable. It's an ordered, chainable list of operations for things like setting size (fillMaxWidth), adding space (padding), changing appearance (background), and handling user input (clickable). A bonus is differentiating arrangement (how children are distributed along the main axis) from alignment (how children are placed on the cross-axis).

The mistakes people make

A weak answer often involves mixing paradigms, for instance, by referencing LinearLayout without making a clear comparison to the Compose way. Another red flag is describing Modifier too narrowly, for example, as just for 'styling' or 'adding padding.' This misses its critical role in sizing, constraints, semantics, and input handling. A critical mistake is not knowing that the order of modifier functions matters. For example, modifier.padding(8.dp).background(Color.Red) results in a smaller colored area than modifier.background(Color.Red).padding(8.dp). Finally, confusing the roles of verticalArrangement in a Column with horizontalAlignment is a common slip-up.

What usually comes next

Expect questions that build on this, such as: 'How would you build a list that only composes and lays out visible items?' (Answer: LazyColumn or LazyRow). 'When would you use a Box instead of a Column or Row?' (Answer: When you need to stack elements on top of each other, like a FrameLayout). 'Give a concrete example of why modifier order is important.'

A concrete example

To create a vertical list of items centered horizontally, you'd use a Column. You might apply Modifier.fillMaxWidth().padding(16.dp) to the Column itself to make it take the full screen width and have internal padding. You would then set its verticalArrangement = Arrangement.spacedBy(8.dp) to put space between each child, and horizontalAlignment = Alignment.CenterHorizontally to center all children within the column. Each child Text composable inside would not need its own alignment modifier.

Interview question

Which Jetpack Compose elements are primarily used to display a profile picture above a name, centered horizontally, within a card with a background and padding?

  • a.Box for stacking, Modifier for background/padding, and Alignment.Center for centering.
  • b.Column for vertical layout, Modifier for background/padding, and horizontalAlignment for centering.Correct
  • c.Column for vertical layout, direct style parameters for background/padding, and gravity for centering.
  • d.Row for vertical layout, Modifier for background/padding, and verticalArrangement for centering.
Why?

Column is the correct composable for arranging elements vertically. Modifier is the standard and idiomatic way to apply properties like background and padding. horizontalAlignment on the Column centers its children horizontally, while Row is used for horizontal arrangements.

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

Read the original → developer.android.com

You just looked this up. Could you explain it out loud?

That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.

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