Custom layouts in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a custom View class named MyView.

Android Kotlin

class MyView(context: Context) : View([1]) {
}

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

Acontext

Battrs

Cthis

Dsuper

Attempts:

3 left

💡 Hint

Common Mistakes

Passing 'attrs' instead of 'context' to the superclass.

Using 'this' or 'super' incorrectly in the constructor.

The custom View class constructor must pass the context parameter to the superclass View.

2fill in blank

medium

Complete the code to override the onMeasure method and set the view size.

Android Kotlin

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
  val width = MeasureSpec.getSize(widthMeasureSpec)
  val height = MeasureSpec.getSize(heightMeasureSpec)
  setMeasuredDimension([1], height)
}

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

Aheight

Bwidth

CwidthMeasureSpec

DheightMeasureSpec

Attempts:

3 left

💡 Hint

Common Mistakes

Passing height instead of width to setMeasuredDimension.

Passing the measure spec integers instead of the size values.

Use the calculated width value to set the measured width dimension.

3fill in blank

hard

Fix the error in the onDraw method to draw a red circle.

Android Kotlin

override fun onDraw(canvas: Canvas) {
  super.onDraw(canvas)
  val paint = Paint()
  paint.color = [1]
  canvas.drawCircle(width / 2f, height / 2f, 100f, paint)
}

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

AColor.GREEN

BColor.BLACK

CColor.RED

DColor.BLUE

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color other than red.

Not setting the paint color before drawing.

To draw a red circle, set the paint color to Color.RED.

4fill in blank

hard

Fill both blanks to create a custom layout that measures children with exact width and height.

Android Kotlin

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
  val width = MeasureSpec.getSize(widthMeasureSpec)
  val height = MeasureSpec.getSize(heightMeasureSpec)
  val childWidthSpec = MeasureSpec.makeMeasureSpec(width, [1])
  val childHeightSpec = MeasureSpec.makeMeasureSpec(height, [2])
  for (i in 0 until childCount) {
    getChildAt(i).measure(childWidthSpec, childHeightSpec)
  }
  setMeasuredDimension(width, height)
}

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

AMeasureSpec.EXACTLY

BMeasureSpec.AT_MOST

CMeasureSpec.UNSPECIFIED

DMeasureSpec.UNDEFINED

Attempts:

3 left

💡 Hint

Common Mistakes

Using AT_MOST or UNSPECIFIED modes which allow flexible sizes.

Mixing different modes for width and height.

Use MeasureSpec.EXACTLY to tell children to measure with exact size.

5fill in blank

hard

Fill all three blanks to create a custom layout that positions children vertically stacked.

Android Kotlin

override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
  var currentTop = 0
  for (i in 0 until childCount) {
    val child = getChildAt(i)
    val childHeight = child.measuredHeight
    child.layout(l, currentTop, r, currentTop + [1])
    currentTop += [2] + [3]
  }
}

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

AchildHeight

C10

D20

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variables for height or spacing.

Not updating currentTop correctly causing overlap.

The child is laid out from currentTop to currentTop + childHeight. Then currentTop moves down by childHeight plus 10 pixels spacing.

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