Skip to content
tezvyn:

Arrange UI elements vertically or horizontally in Jetpack Compose

Source: developer.android.comEasyHow cards are made

Arrange UI elements vertically or horizontally in Jetpack Compose

Tests declarative layout fundamentals. Good answers name Column and Row, explain Modifier as an ordered chain of decoration and layout behavior, and note order changes semantics. Red flag: calling Modifier "just styling" or confusing it with LinearLayout.

What's really being asked

Even at senior level, interviewers use fundamental questions to check if you internalized the declarative paradigm or are still thinking in View system terms. They want to see that you understand layout as function composition rather than XML configuration, and that you treat Modifier as a core layout mechanism rather than an optional styling layer. Specifically, they are listening for whether you recognize that Column and Row are inline composable functions that emit layout nodes directly without the overhead of a ViewGroup equivalent.

The full answer

First, name the two primary composables: Column arranges children vertically and Row arranges them horizontally. Second, explain that both accept a Modifier parameter which is used to decorate or change the behavior of the composable, including sizing, padding, background, click handling, and alignment. Third, stress that Modifier uses chaining and that order matters because each modifier wraps the previous one, affecting both measurement and drawing phases. Fourth, mention that Column and Row are inline functions that do not add extra view nodes, unlike LinearLayout in the View system. Fifth, note that these containers expose arrangement and alignment parameters to control main-axis and cross-axis positioning without nested wrappers.

The mistakes people make

A major red flag is mapping Compose one-to-one to the View system by saying Column is just a vertical LinearLayout without acknowledging the declarative difference. Another is describing Modifier as only for styling or cosmetics rather than a first-class mechanism for layout behavior and input handling. Candidates also stumble by ignoring modifier ordering or claiming that padding before versus after size has the same effect. Some also forget that Modifier is an immutable data structure that is rebuilt on recomposition, which matters for performance at scale.

What usually comes next

The interviewer may ask how modifier ordering changes the result, for example padding then size versus size then padding. They might ask about LazyColumn versus Column for large lists, or how to distribute space using Arrangement and Alignment parameters. They could also ask where state should live when items inside a Column or Row need to interact, or how to avoid recomposition of the entire container when a single item changes.

A concrete example

Suppose you need a card with an icon and text side by side. You would use a Row with a Modifier that sets fillMaxWidth and padding. Inside the Row, the Icon gets a size modifier and the Text gets a weight modifier so it takes remaining space. If you accidentally apply background before padding, the background fills only the content area; if you apply padding before background, the background extends into the padding. This shows modifier order in practice. Similarly, applying clickable before padding gives a larger touch target than applying it after, which is a common accessibility pitfall.

Interview question

In Jetpack Compose, how does swapping the order of padding and background in a Modifier chain change the visual result?

  • a.Padding before background clips the background to the content size, whereas background before padding lets the color extend into the padding.
  • b.The order does not matter because both modifiers are cosmetic and Compose applies them in a fixed visual order regardless of chain sequence.
  • c.Background before padding creates a larger colored region because background automatically reserves extra space around the content.
  • d.Padding before background makes the background cover the padding area as well as the content, while background before padding restricts the background to the content bounds.Correct
Why?

Modifier chains wrap from left to right, so padding first expands the element before the background is drawn behind it, while background first paints only the original content bounds. Option A is tempting because it reverses this logic, but in Compose each modifier wraps the result of the previous one rather than being applied inside it.

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