Column and Row layouts in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Column layout code?

Consider this Kotlin Compose code snippet. What will the screen show?

Android Kotlin

Column {
  Text("Hello")
  Text("World")
}

A Empty screen with no text

B Two texts side by side horizontally: Hello left, World right

C Only one text: HelloWorld combined

D Two texts stacked vertically: Hello on top, World below

💡 Hint

Column stacks children vertically, like a list going down.

Column arranges its children vertically. So Text("Hello") is above Text("World").

❓ ui_behavior

intermediate

What happens if you use Row with these Texts?

Look at this Kotlin Compose code. What is the visual result?

Android Kotlin

Row {
  Text("Left")
  Text("Right")
}

A Texts overlap on top of each other

B Texts appear side by side horizontally: Left then Right

C Texts appear stacked vertically: Left above Right

D Only one text: LeftRight combined

💡 Hint

Row arranges children horizontally, like a row of items.

Row places its children next to each other horizontally, so Left is on the left and Right is on the right.

❓ lifecycle

advanced

What happens if you nest a Row inside a Column?

Given this code, how will the texts be arranged on screen?

Android Kotlin

Column {
  Text("Top")
  Row {
    Text("Left")
    Text("Right")
  }
  Text("Bottom")
}

A Top text on top, then Left and Right side by side, then Bottom text below

B All texts stacked vertically: Top, Left, Right, Bottom

C All texts side by side horizontally: Top, Left, Right, Bottom

D Only Top and Bottom texts visible, Left and Right hidden

💡 Hint

Column stacks vertically; Row inside it stacks horizontally.

The Column stacks Top, then the Row with Left and Right horizontally, then Bottom below.

📝 Syntax

advanced

Which option causes a syntax error in this Column layout?

Identify the option that will NOT compile in Kotlin Compose.

Android Kotlin

Column {
  Text("One")
  Text("Two")
}

A

Column {
  Text("One")
  Text("Two"
}

B

Column {
  Text("One")
  Text("Two")
}

C

Column {
  Text("One")
  Text("Two")
  Text("Three")
}

D

Column {
  Text(text = "One")
  Text(text = "Two")
}

💡 Hint

Look for missing or extra parentheses or braces.

Option A is missing a closing parenthesis for Text("Two"), causing a syntax error.

🧠 Conceptual

expert

What is the effect of using Modifier.weight(1f) in a Row?

In this Row, what does Modifier.weight(1f) do to the Text composables?

Android Kotlin

Row {
  Text("A", Modifier.weight(1f))
  Text("B", Modifier.weight(2f))
}

A Weights have no effect inside a Row

B Text A and B have equal width regardless of weight

C Text B takes twice the horizontal space of Text A

D Text A takes twice the horizontal space of Text B

💡 Hint

Weight controls how much space each child fills proportionally.

Weight divides available space proportionally. Text B with weight 2f gets twice the width of Text A with weight 1f.