Column and Row layouts in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a vertical layout using Column.

Android Kotlin

Column {
    Text(text = "Hello")
    Text(text = "World")
    [1] {
        Text(text = "Inside Column")
    }
}

Drag options to blanks, or click blank then click option'

AColumn

BSpacer

CBox

DRow

Attempts:

3 left

💡 Hint

Common Mistakes

Using Row instead of Column for vertical layout.

Forgetting to use a layout composable.

The Column composable creates a vertical layout. Nesting another Column inside keeps the vertical stacking.

2fill in blank

medium

Complete the code to create a horizontal layout using Row.

Android Kotlin

Row {
    Text(text = "One")
    Text(text = "Two")
    [1] {
        Text(text = "Inside Row")
    }
}

Drag options to blanks, or click blank then click option'

ABox

BColumn

CRow

DSpacer

Attempts:

3 left

💡 Hint

Common Mistakes

Using Column instead of Row for horizontal layout.

Not nesting layout composables properly.

Row composable arranges children horizontally. Nesting another Row keeps horizontal stacking.

3fill in blank

hard

Fix the error in the code to correctly align items horizontally with space between.

Android Kotlin

Row(horizontalArrangement = [1]) {
    Text(text = "Start")
    Text(text = "End")
}

Drag options to blanks, or click blank then click option'

AArrangement.Center

BArrangement.SpaceBetween

CArrangement.Top

DArrangement.Bottom

Attempts:

3 left

💡 Hint

Common Mistakes

Using Arrangement.Center which centers items without spacing.

Using vertical arrangements in Row.

Arrangement.SpaceBetween places items at the start and end with space between them horizontally.

4fill in blank

hard

Fill both blanks to create a Column with centered horizontal alignment and spaced vertical arrangement.

Android Kotlin

Column(
    horizontalAlignment = [1],
    verticalArrangement = [2]
) {
    Text(text = "Top")
    Text(text = "Bottom")
}

Drag options to blanks, or click blank then click option'

AAlignment.CenterHorizontally

BArrangement.SpaceBetween

CAlignment.CenterVertically

DArrangement.Center

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing horizontalAlignment with verticalArrangement.

Using vertical alignment constants for horizontalAlignment.

horizontalAlignment = Alignment.CenterHorizontally centers children horizontally. verticalArrangement = Arrangement.SpaceBetween spaces children vertically.

5fill in blank

hard

Fill all three blanks to create a Row with spaced children, centered vertically, and a nested Column inside.

Android Kotlin

Row(
    horizontalArrangement = [1],
    verticalAlignment = [2]
) {
    Text(text = "Left")
    [3] {
        Text(text = "Nested Column")
    }
}

Drag options to blanks, or click blank then click option'

AArrangement.SpaceAround

BAlignment.CenterVertically

CColumn

DArrangement.Center

Attempts:

3 left

💡 Hint

Common Mistakes

Using Arrangement.Center instead of Arrangement.SpaceAround.

Using Row instead of Column for nested vertical layout.

horizontalArrangement = Arrangement.SpaceAround spaces children horizontally. verticalAlignment = Alignment.CenterVertically centers children vertically. Nested Column creates a vertical layout inside the Row.

Practice

1. Which layout arranges its child views vertically in Android Kotlin?

easy

A. Row

B. Column

C. Grid

D. FrameLayout

Solution

1. Step 1: Understand layout orientation

   Column arranges children vertically, stacking them top to bottom.

2. Step 2: Compare with other layouts

   Row arranges children horizontally, Grid arranges in a grid, FrameLayout stacks overlapping.

3. Final Answer:

   Column -> Option B

4. Quick Check:

   Vertical arrangement = Column [OK]

Hint: Vertical means top to bottom, so use Column [OK]

Common Mistakes:

• Confusing Row with Column
• Thinking Grid arranges vertically only
• Mixing FrameLayout stacking with vertical layout

2. Which of the following is the correct Kotlin syntax to create a Row layout with two Text views inside?

easy

A. Row(
Text("Hello"),
Text("World")
)

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

C. Row {
Text("Hello")
Text("World")
}

D. Row {
TextView("Hello")
TextView("World")
}

Solution

1. Step 1: Identify correct Row syntax

   Row uses curly braces with child composables inside, separated by lines.

2. Step 2: Check child components

   Text is the correct composable for text display, TextView is Android View, not Compose.

3. Final Answer:

   Row { Text("Hello") Text("World") } -> Option C

4. Quick Check:

   Row uses braces and Text composables [OK]

Hint: Use braces {} for layouts and Text composable for text [OK]

Common Mistakes:

• Using parentheses instead of braces for Row
• Using Column instead of Row
• Using TextView instead of Text composable

3. What will be the visual arrangement of the following code?

Column {
  Text("A")
  Row {
    Text("B")
    Text("C")
  }
  Text("D")
}

medium

A. A at top, B and C side by side in middle, D at bottom vertically

B. A, B, C, D all side by side horizontally

C. A, B, C stacked vertically, D missing

D. Only A and D visible, B and C hidden

Solution

1. Step 1: Analyze outer Column layout

   Column stacks children vertically: Text("A"), then Row, then Text("D").

2. Step 2: Analyze inner Row layout

   Row arranges Text("B") and Text("C") horizontally side by side.

3. Final Answer:

   A at top, B and C side by side in middle, D at bottom vertically -> Option A

4. Quick Check:

   Column vertical + Row horizontal = mixed layout [OK]

Hint: Column stacks vertically, Row stacks horizontally inside [OK]

Common Mistakes:

• Thinking Row inside Column stacks vertically
• Ignoring inner Row layout
• Assuming all texts are horizontal

4. Identify the error in this Kotlin Compose code snippet:

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

medium

A. Missing comma between Text("Hello") and Text("World")

B. Text composable cannot be inside Column

C. Row cannot contain Column as child

D. Column should use braces {} instead of parentheses ()

Solution

1. Step 1: Check Column syntax

   Column uses curly braces {} to enclose children, not parentheses ().

2. Step 2: Verify child composables

   Text can be inside Column; Row can contain Column; commas are not needed between children.

3. Final Answer:

   Column should use braces {} instead of parentheses () -> Option D

4. Quick Check:

   Layouts use braces {} for children [OK]

Hint: Use {} for layout children, not () [OK]

Common Mistakes:

• Using () instead of {} for layouts
• Thinking commas are required between children
• Believing nested layouts are not allowed

5. You want to create a UI where three buttons are arranged horizontally, but the middle button should be twice as wide as the others. Which layout and modifier approach is best in Kotlin Compose?

hard

A. Use Row with weights: Button1 weight=1, Button2 weight=2, Button3 weight=1

B. Use Column with padding on middle button

C. Use Row with fixed width buttons and margin on middle button

D. Use Column with weight modifiers on buttons

Solution

1. Step 1: Choose horizontal layout

   Row arranges children horizontally, perfect for side-by-side buttons.

2. Step 2: Use weight modifier for sizing

   Assign weights to buttons to control relative widths; middle button weight=2 makes it twice as wide.

3. Final Answer:

   Use Row with weights: Button1 weight=1, Button2 weight=2, Button3 weight=1 -> Option A

4. Quick Check:

   Row + weights control horizontal size [OK]

Hint: Use Row and weight modifiers for proportional widths [OK]

Common Mistakes:

• Using Column for horizontal arrangement
• Using fixed widths instead of weights
• Applying padding instead of weight for size