Custom layouts in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

How does onMeasure affect a custom layout?

In a custom Android ViewGroup, what is the main role of the onMeasure method?

A It calculates and sets the size requirements for the view and its children.

B It draws the view's content on the screen.

C It inflates the layout XML file into view objects.

D It handles user touch events inside the view.

💡 Hint

Think about how the system knows how big your custom layout should be.

The onMeasure method is where a custom layout calculates how big it and its children want to be. This helps the system allocate space properly.

❓ ui_behavior

intermediate

What does onLayout do in a custom ViewGroup?

In a custom Android ViewGroup, what is the purpose of the onLayout method?

A It measures the size of the ViewGroup itself.

B It listens for click events on the ViewGroup.

C It handles drawing the background color of the ViewGroup.

D It positions and sizes the child views within the ViewGroup.

💡 Hint

Think about where the children should appear inside the parent.

The onLayout method is responsible for placing each child view at the correct position and size inside the parent ViewGroup.

📝 Syntax

advanced

What is the output of this custom layout measurement code?

Given this snippet inside a custom ViewGroup's onMeasure method, what will be the measured width and height of the ViewGroup?

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
  val widthSize = MeasureSpec.getSize(widthMeasureSpec)
  val heightSize = MeasureSpec.getSize(heightMeasureSpec)
  setMeasuredDimension(widthSize / 2, heightSize / 2)
}

A The ViewGroup will have zero width and height.

B The ViewGroup will be the full width and height of the available space.

C The ViewGroup will be half the width and half the height of the available space.

D The code will cause a runtime crash.

💡 Hint

Look at how setMeasuredDimension is called with half the sizes.

The code sets the measured dimensions to half the available width and height, so the ViewGroup will be smaller than the space given.

🔧 Debug

advanced

Why does this custom layout not show its children?

A developer wrote this onLayout method but the children are not visible:

override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
  // No calls to child.layout()
}

Why are the children not visible?

A Because the children are invisible by default.

B Because the children were never positioned with child.layout(), so they have no size or position.

C Because onLayout is not called automatically by the system.

D Because the ViewGroup forgot to call super.onLayout().

💡 Hint

Children need to be told where to appear inside the parent.

Without calling child.layout() for each child, the system doesn't know where to place them, so they don't appear.

🧠 Conceptual

expert

How does padding affect custom layout measurement and positioning?

In a custom ViewGroup, how should padding be handled during onMeasure and onLayout to correctly size and position children?

A Subtract padding from the available size in onMeasure and offset children by padding in onLayout.

B Ignore padding because it is handled automatically by the system.

C Add padding to the children's size to make them bigger.

D Set padding to zero before measuring and laying out children.

💡 Hint

Think about how padding reduces space inside the ViewGroup.

Padding reduces the space available for children, so it must be subtracted from the size during measurement and used as an offset when positioning children.

Practice

1. What is the main purpose of creating a custom layout in Android using Kotlin?

easy

A. To control exactly how child views are measured and placed

B. To automatically generate UI from XML without coding

C. To replace the Android system UI completely

D. To create animations without using XML

Solution

1. Step 1: Understand the role of custom layouts

   Custom layouts allow developers to define how child views are measured and positioned beyond standard layouts.

2. Step 2: Compare with other options

   Options A, B, and C describe unrelated features like animations, automatic UI generation, or system UI replacement.

3. Final Answer:

   To control exactly how child views are measured and placed -> Option A

4. Quick Check:

   Custom layouts = precise child view control [OK]

Hint: Custom layouts control child view size and position [OK]

Common Mistakes:

• Thinking custom layouts generate UI automatically
• Confusing custom layouts with animations
• Believing custom layouts replace system UI

2. Which method must you override to specify the size requirements of a custom layout in Android Kotlin?

easy

A. onDraw

B. onMeasure

C. onCreate

D. onLayout

Solution

1. Step 1: Identify the method for measuring size

   The onMeasure method is used to determine the size requirements of the layout and its children.

2. Step 2: Differentiate from other methods

   onLayout positions children, onDraw handles drawing, and onCreate is unrelated to layout measurement.

3. Final Answer:

   onMeasure -> Option B

4. Quick Check:

   Measure size = onMeasure [OK]

Hint: Measure size with onMeasure method override [OK]

Common Mistakes:

• Confusing onLayout with onMeasure
• Using onDraw for size calculation
• Thinking onCreate handles layout measurement

3. Given this simplified custom layout code snippet, what will be the width of the first child view after layout?

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
  val child = getChildAt(0)
  child.measure(MeasureSpec.makeMeasureSpec(100, MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(50, MeasureSpec.EXACTLY))
  setMeasuredDimension(200, 100)
}

override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
  val child = getChildAt(0)
  child.layout(0, 0, child.measuredWidth, child.measuredHeight)
}

medium

A. 50 pixels

B. 200 pixels

C. 150 pixels

D. 100 pixels

Solution

1. Step 1: Analyze onMeasure child measurement

   The child is measured with width 100 pixels exactly and height 50 pixels exactly.

2. Step 2: Analyze onLayout child placement

   The child is laid out from (0,0) to (child.measuredWidth, child.measuredHeight), so width is 100 pixels.

3. Final Answer:

   100 pixels -> Option D

4. Quick Check:

   Child width = measured width = 100 [OK]

Hint: Child size = measured size in onMeasure [OK]

Common Mistakes:

• Using parent width instead of child's measured width
• Confusing layout size with measure specs
• Assuming child's width equals parent's width

4. What is the main error in this custom layout code that causes child views not to appear?

override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
  for (i in 0 until childCount) {
    val child = getChildAt(i)
    child.layout(0, 0, 0, 0)
  }
}

medium

A. Child views are laid out with zero width and height

B. The loop does not iterate over all children

C. onLayout should not be overridden

D. Missing call to super.onLayout

Solution

1. Step 1: Examine child.layout parameters

   Each child is positioned with left=0, top=0, right=0, bottom=0, which means zero width and height.

2. Step 2: Understand effect on visibility

   Zero size means children are not visible on screen.

3. Final Answer:

   Child views are laid out with zero width and height -> Option A

4. Quick Check:

   Zero size layout hides children [OK]

Hint: Check layout right and bottom > left and top [OK]

Common Mistakes:

• Assuming loop skips children
• Thinking super.onLayout is mandatory
• Ignoring layout size parameters

5. You want to create a custom layout that arranges exactly two child views side by side, each taking half the parent's width and full height. Which approach correctly implements onLayout for this?

hard

A. Layout both children at (0,0) to (width, height) overlapping

B. Layout first child at (0,0) to (width, height), second child outside visible area

C. Layout first child from (0,0) to (width/2, height), second from (width/2,0) to (width, height)

D. Layout children vertically stacked with full width

Solution

1. Step 1: Understand layout requirements

   Two children side by side means splitting parent's width equally, full height each.

2. Step 2: Apply correct coordinates in onLayout

   First child from left=0 to right=width/2, second from left=width/2 to right=width, both top=0 bottom=height.

3. Final Answer:

   Layout first child from (0,0) to (width/2, height), second from (width/2,0) to (width, height) -> Option C

4. Quick Check:

   Side by side = split width in onLayout [OK]

Hint: Divide width, assign halves to children in onLayout [OK]

Common Mistakes:

• Overlapping children by using full width for both
• Placing second child outside visible bounds
• Stacking children vertically instead of horizontally