Box layout in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a vertical LinearLayout container.

Android Kotlin

val layout = LinearLayout(this).apply {
  orientation = [1]
}

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

ALinearLayout.VERTICAL

BLinearLayout.HORIZONTAL

CLinearLayout.CENTER

DLinearLayout.WRAP_CONTENT

Attempts:

3 left

💡 Hint

Common Mistakes

Using HORIZONTAL instead of VERTICAL causes horizontal layout.

Using CENTER or WRAP_CONTENT is invalid for orientation.

The orientation property sets the layout direction. Use LinearLayout.VERTICAL for vertical stacking.

2fill in blank

medium

Complete the code to add a TextView inside the Box layout with match_parent width.

Android Kotlin

val textView = TextView(this).apply {
  layoutParams = LinearLayout.LayoutParams([1], LinearLayout.LayoutParams.WRAP_CONTENT)
  text = "Hello Box"
}

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

ALinearLayout.LayoutParams.WRAP_CONTENT

BLinearLayout.LayoutParams.FILL_PARENT

CLinearLayout.LayoutParams.MATCH_PARENT

DLinearLayout.LayoutParams.WRAP_CONTENT + 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using WRAP_CONTENT makes the TextView only as wide as its content.

FILL_PARENT is deprecated and should not be used.

Use MATCH_PARENT to make the TextView fill the parent's width.

3fill in blank

hard

Fix the error in setting the background color of the Box layout.

Android Kotlin

layout.setBackgroundColor([1].parseColor("#FF0000"))

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

AColorUtils

BColors

Ccolor

DColor

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or plural forms like colors causes errors.

Using ColorUtils does not have parseColor method.

The Color class provides the parseColor method to convert color strings.

4fill in blank

hard

Fill both blanks to create a Box layout with padding and gravity centered.

Android Kotlin

layout.apply {
  setPadding([1], [1], [1], [1])
  gravity = [2]
}

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

A16

BGravity.CENTER

CGravity.LEFT

D8

Attempts:

3 left

💡 Hint

Common Mistakes

Using Gravity.LEFT aligns children to the left, not center.

Using 8 for padding is smaller than typical spacing.

Padding of 16 pixels is common for spacing. Gravity.CENTER centers children inside the layout.

5fill in blank

hard

Fill all three blanks to create a Box layout with horizontal orientation, weight sum, and a weighted child.

Android Kotlin

val layout = LinearLayout(this).apply {
  orientation = [1]
  weightSum = [2]f
}
val child = View(this).apply {
  layoutParams = LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, [3]f)
}

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

ALinearLayout.VERTICAL

B1.0

C0.5

DLinearLayout.HORIZONTAL

Attempts:

3 left

💡 Hint

Common Mistakes

Using VERTICAL orientation but expecting horizontal layout.

Setting weightSum to 0 or missing f suffix causes errors.

Set orientation to HORIZONTAL for side-by-side layout. WeightSum defines total weight. Child weight 0.5 means half the space.

Practice

1. What is the main purpose of a Box layout in Android Kotlin Compose?

easy

A. To create a scrollable list of items

B. To arrange child views horizontally in a row

C. To arrange child views vertically in a column

D. To stack child views on top of each other

Solution

1. Step 1: Understand Box layout behavior

   A Box stacks its children, placing them on top of each other in the same space.

2. Step 2: Compare with other layouts

   Row arranges horizontally, Column vertically, and LazyColumn scrolls. Box is unique for stacking.

3. Final Answer:

   To stack child views on top of each other -> Option D

4. Quick Check:

   Box stacks views = A [OK]

Hint: Box stacks children; Row and Column arrange horizontally/vertically [OK]

Common Mistakes:

• Confusing Box with Row or Column layouts
• Thinking Box arranges children side by side
• Assuming Box creates scrollable content

2. Which of the following is the correct way to align a child view to the bottom end inside a Box in Jetpack Compose?

easy

A. Modifier.align(Alignment.BottomEnd)

B. Modifier.align(Alignment.CenterStart)

C. Modifier.align(Alignment.Center)

D. Modifier.align(Alignment.TopStart)

Solution

1. Step 1: Identify alignment for bottom end

   Bottom end means bottom right corner in left-to-right layouts.

2. Step 2: Match with Alignment constants

   Alignment.BottomEnd places the child at bottom right inside the Box.

3. Final Answer:

   Modifier.align(Alignment.BottomEnd) -> Option A

4. Quick Check:

   Bottom end alignment = Modifier.align(Alignment.BottomEnd) [OK]

Hint: Bottom end means bottom right corner, use Alignment.BottomEnd [OK]

Common Mistakes:

• Using TopStart instead of BottomEnd
• Confusing Center with BottomEnd
• Forgetting to use Modifier.align()

3. What will be the visible result of this Compose code?

Box(modifier = Modifier.size(100.dp)) {
  Text("A", Modifier.align(Alignment.TopStart))
  Text("B", Modifier.align(Alignment.Center))
  Text("C", Modifier.align(Alignment.BottomEnd))
}

medium

A. Texts A, B, and C stacked exactly on top of each other at the center

B. Texts A at top-left, B at center, and C at bottom-right inside the Box

C. Only Text C is visible at bottom-right, others are hidden

D. Texts A and B overlap at top-left, C is at bottom-right

Solution

1. Step 1: Understand Box stacking with alignment

   Box stacks children but each child is positioned by its Modifier.align() setting.

2. Step 2: Check each Text alignment

   Text A is top-left, Text B is center, Text C is bottom-right, so all are visible at different positions.

3. Final Answer:

   Texts A at top-left, B at center, and C at bottom-right inside the Box -> Option B

4. Quick Check:

   Box children align independently = B [OK]

Hint: Each child aligns separately inside Box, no overlap unless same alignment [OK]

Common Mistakes:

• Assuming all texts overlap at center
• Thinking only last child is visible
• Ignoring Modifier.align() effects

4. Identify the error in this Box layout code snippet:

Box {
  Text("Hello")
  Text("World", Modifier.align(Alignment.Center))
  Text("!", Modifier.align(Alignment.Center))
}

medium

A. Multiple children cannot have the same alignment inside a Box

B. Box requires a size modifier to display children

C. The code is valid but texts "World" and "!" will overlap at center

D. Text composables must have unique keys inside Box

Solution

1. Step 1: Check alignment usage

   Multiple children can share the same alignment; Box stacks them.

2. Step 2: Analyze visual result

   Texts "World" and "!" both align center, so they overlap visually.

3. Final Answer:

   The code is valid but texts "World" and "!" will overlap at center -> Option C

4. Quick Check:

   Same alignment causes overlap, no syntax error [OK]

Hint: Same alignment stacks children visually overlapping [OK]

Common Mistakes:

• Thinking same alignment causes error
• Assuming Box needs size modifier always
• Confusing keys requirement with lists

5. You want to create a notification badge over an icon using a Box layout. Which approach correctly places a small red circle at the top-right corner of the icon?

hard

A. Place the icon and badge inside a Box; use Modifier.align(Alignment.TopEnd) on the badge

B. Place the icon and badge inside a Row; use Modifier.padding() on the badge

C. Place the icon and badge inside a Column; use Modifier.align(Alignment.Center) on the badge

D. Place the icon and badge inside a Box; use Modifier.align(Alignment.BottomStart) on the badge

Solution

1. Step 1: Understand Box usage for overlays

   Box stacks children, so placing icon and badge inside Box allows overlay.

2. Step 2: Position badge at top-right

   Modifier.align(Alignment.TopEnd) places badge at top-right corner of Box (icon).

3. Final Answer:

   Place the icon and badge inside a Box; use Modifier.align(Alignment.TopEnd) on the badge -> Option A

4. Quick Check:

   Box + align TopEnd = badge overlay top-right [OK]

Hint: Use Box and Modifier.align(Alignment.TopEnd) for top-right badge [OK]

Common Mistakes:

• Using Row or Column which don't stack children
• Aligning badge at bottom or center instead of top-right
• Not using Modifier.align() on badge