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.

Practice

1. Which property in a LinearLayout controls whether items are stacked vertically or horizontally?

easy

A. layout_width

B. gravity

C. orientation

D. padding

Solution

1. Step 1: Understand LinearLayout properties

   The orientation property defines if children are stacked vertically or horizontally.

2. Step 2: Differentiate from other properties

   gravity controls alignment inside the container, not stacking direction.

3. Final Answer:

   orientation -> Option C

4. Quick Check:

   Stack direction = orientation [OK]

Hint: Stacking direction is set by orientation property [OK]

Common Mistakes:

• Confusing gravity with orientation
• Thinking padding controls stacking
• Mixing layout_width with arrangement

2. Which of the following is the correct syntax to center all child views inside a LinearLayout using gravity in Kotlin XML?

easy

A. android:orientation="center"

B. android:gravity="center"

C. android:layout_gravity="center"

D. android:align="center"

Solution

1. Step 1: Identify property for child alignment inside container

   android:gravity aligns children inside the LinearLayout.

2. Step 2: Check syntax correctness

   android:gravity="center" is the correct attribute and value to center children.

3. Final Answer:

   android:gravity="center" -> Option B

4. Quick Check:

   Center children = android:gravity="center" [OK]

Hint: Use android:gravity to align children inside layout [OK]

Common Mistakes:

• Using layout_gravity instead of gravity for children
• Setting orientation to center (invalid)
• Using non-existent align attribute

3. Given this Kotlin XML snippet:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center_vertical">
    <Button android:text="A" />
    <Button android:text="B" />
</LinearLayout>

How will the buttons be arranged on the screen?

medium

A. Buttons side by side horizontally and centered vertically

B. Buttons stacked vertically aligned to bottom

C. Buttons side by side horizontally aligned to top

D. Buttons stacked vertically and centered horizontally

Solution

1. Step 1: Analyze orientation property

   android:orientation="horizontal" means children are placed side by side horizontally.

2. Step 2: Analyze gravity property

   android:gravity="center_vertical" aligns children vertically centered inside the container.

3. Final Answer:

   Buttons side by side horizontally and centered vertically -> Option A

4. Quick Check:

   Horizontal orientation + center_vertical gravity = Buttons side by side horizontally and centered vertically [OK]

Hint: Orientation sets direction; gravity sets alignment inside container [OK]

Common Mistakes:

• Confusing orientation with gravity effects
• Assuming vertical stacking with horizontal orientation
• Ignoring gravity vertical centering

4. What is wrong with this Kotlin XML layout snippet?

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center_horizontal">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />
</LinearLayout>

medium

A. layout_gravity="center" on TextView is redundant here

B. Using both gravity and layout_gravity causes conflict

C. orientation="vertical" is invalid for LinearLayout

D. Missing closing tag for LinearLayout

Solution

1. Step 1: Understand gravity vs layout_gravity

   android:gravity on LinearLayout aligns children inside it; layout_gravity aligns the child itself inside its parent.

2. Step 2: Check redundancy in this context

   Since LinearLayout has gravity="center_horizontal", the child TextView is already centered horizontally, so layout_gravity="center" on TextView is unnecessary.

3. Final Answer:

   layout_gravity="center" on TextView is redundant here -> Option A

4. Quick Check:

   Redundant layout_gravity when parent gravity centers children [OK]

Hint: Parent gravity centers children; child layout_gravity may be redundant [OK]

Common Mistakes:

• Thinking orientation="vertical" is invalid
• Confusing gravity and layout_gravity roles
• Missing closing tags (actually present here)

5. You want to create a LinearLayout that stacks three buttons vertically, but the middle button should be aligned to the right edge while the others are centered horizontally. Which arrangement and alignment setup achieves this?

hard

A. Set orientation="vertical" on LinearLayout, gravity="center_horizontal", and layout_gravity="center_horizontal" on the middle button

B. Set orientation="horizontal" on LinearLayout, gravity="center_vertical", and layout_gravity="end" on the middle button

C. Set orientation="vertical" on LinearLayout, gravity="end", and layout_gravity="center_horizontal" on the middle button

D. Set orientation="vertical" on LinearLayout, gravity="center_horizontal", and layout_gravity="end" on the middle button

Solution

1. Step 1: Set vertical stacking

   orientation="vertical" stacks buttons top to bottom.

2. Step 2: Center all buttons horizontally by default

   Set gravity="center_horizontal" on LinearLayout to center children horizontally.

3. Step 3: Align middle button to right edge

   Override middle button's alignment with layout_gravity="end" to push it to the right.

4. Final Answer:

   orientation="vertical", gravity="center_horizontal", layout_gravity="end" on middle button -> Option D

5. Quick Check:

   Vertical stack + center default + override middle button end [OK]

Hint: Use layout_gravity on child to override parent gravity alignment [OK]

Common Mistakes:

• Using horizontal orientation instead of vertical
• Setting gravity="end" on parent causing all children right aligned
• Not overriding middle button alignment