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.