Arrangement and alignment in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the vertical arrangement of a Column to center.

Android Kotlin

Column(
    verticalArrangement = Arrangement.[1]
) {
    Text("Hello")
}

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

ATop

BCenter

CBottom

DSpaceBetween

Attempts:

3 left

💡 Hint

Common Mistakes

Using Arrangement.Top or Arrangement.Bottom which aligns items to edges instead of center.

Using Arrangement.SpaceBetween which spreads items apart.

Using Arrangement.Center centers the children vertically inside the Column.

2fill in blank

medium

Complete the code to align the content of a Row horizontally to the end.

Android Kotlin

Row(
    horizontalArrangement = Arrangement.[1]
) {
    Button(onClick = {}) { Text("Click") }
}

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

ASpaceAround

BStart

CCenter

DEnd

Attempts:

3 left

💡 Hint

Common Mistakes

Using Arrangement.Start which aligns to the left.

Using Arrangement.Center which centers horizontally.

Arrangement.End aligns the children to the right end horizontally in a Row.

3fill in blank

hard

Fix the error in the code by choosing the correct alignment for a Box content.

Android Kotlin

Box(
    contentAlignment = Alignment.[1]
) {
    Text("Centered Text")
}

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

ACenter

BTopStart

CBottomEnd

DMiddle

Attempts:

3 left

💡 Hint

Common Mistakes

Using Alignment.Middle which does not exist in Compose.

Using Alignment.TopStart or BottomEnd which align to corners.

Alignment.Center centers the content inside the Box both vertically and horizontally.

4fill in blank

hard

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

Android Kotlin

Column(
    horizontalAlignment = Alignment.[1],
    verticalArrangement = Arrangement.[2]
) {
    Text("Item 1")
    Text("Item 2")
}

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

ACenter

BStart

CSpaceEvenly

DBottom

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up horizontalAlignment and verticalArrangement values.

Using Arrangement.Bottom which aligns items to bottom instead of spacing.

Alignment.Center centers children horizontally, and Arrangement.SpaceEvenly spaces children evenly vertically.

5fill in blank

hard

Fill all three blanks to create a Row with vertical alignment to bottom, horizontal arrangement spaced between, and content aligned to bottom end.

Android Kotlin

Row(
    verticalAlignment = Alignment.[1],
    horizontalArrangement = Arrangement.[2],
    modifier = Modifier.fillMaxWidth()
) {
    Box(
        modifier = Modifier.weight(1f),
        contentAlignment = Alignment.[3]
    ) {
        Text("End")
    }
}

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

ATop

BBottom

CBottomEnd

DSpaceBetween

Attempts:

3 left

💡 Hint

Common Mistakes

Using Alignment.Top instead of Bottom for vertical alignment.

Using Arrangement.Center instead of SpaceBetween for horizontal arrangement.

Using Alignment.BottomStart instead of BottomEnd for content alignment.

verticalAlignment = Alignment.Bottom aligns children to bottom vertically, horizontalArrangement = Arrangement.SpaceBetween spaces children horizontally with space between, and contentAlignment = Alignment.BottomEnd aligns content inside Box to bottom end.