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.