Custom layouts in Android Kotlin - Mini App: Build & Ship

Build: CustomLayoutScreen

This screen demonstrates a custom layout that arranges child views in a circle.

Target UI

CustomLayoutScreen

+-----------------------+
|           o           |
|       o       o       |
|   o               o   |
|                       |
|       Center View      |
+-----------------------+

Create a custom ViewGroup that arranges its children evenly spaced in a circle.

Add at least 5 child views (e.g., TextViews or Buttons) inside the custom layout.

Center a TextView in the middle of the circle.

Ensure the layout measures and positions children correctly.

Use Kotlin and Android View system.

Starter Code

Android Kotlin

package com.example.customlayout

import android.content.Context
import android.util.AttributeSet
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class CustomCircleLayout @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : ViewGroup(context, attrs) {

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        // TODO: Measure children and set measured dimensions
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    }

    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
        // TODO: Position children in a circle
    }
}

class CustomLayoutScreen : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val customLayout = CustomCircleLayout(this)

        // TODO: Add 5 child views and a center TextView

        setContentView(customLayout)
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

Android Kotlin

package com.example.customlayout

import android.content.Context
import android.util.AttributeSet
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.graphics.Color
import android.view.Gravity

class CustomCircleLayout @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : ViewGroup(context, attrs) {

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        var maxChildWidth = 0
        var maxChildHeight = 0

        // Measure children
        for (i in 0 until childCount) {
            val child = getChildAt(i)
            measureChild(child, widthMeasureSpec, heightMeasureSpec)
            if (child.measuredWidth > maxChildWidth) maxChildWidth = child.measuredWidth
            if (child.measuredHeight > maxChildHeight) maxChildHeight = child.measuredHeight
        }

        val desiredWidth = maxChildWidth * 4
        val desiredHeight = maxChildHeight * 4

        val width = resolveSize(desiredWidth, widthMeasureSpec)
        val height = resolveSize(desiredHeight, heightMeasureSpec)

        setMeasuredDimension(width, height)
    }

    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
        val centerX = (r - l) / 2
        val centerY = (b - t) / 2
        val radius = (Math.min(centerX, centerY) * 0.7).toInt()

        val childCount = childCount
        if (childCount == 0) return

        // Layout center child (assumed last child)
        val centerChild = getChildAt(childCount - 1)
        val centerLeft = centerX - centerChild.measuredWidth / 2
        val centerTop = centerY - centerChild.measuredHeight / 2
        centerChild.layout(
            centerLeft,
            centerTop,
            centerLeft + centerChild.measuredWidth,
            centerTop + centerChild.measuredHeight
        )

        // Layout other children in circle
        val angleStep = 2 * Math.PI / (childCount - 1)

        for (i in 0 until childCount - 1) {
            val child = getChildAt(i)
            val angle = i * angleStep - Math.PI / 2 // start at top
            val childCenterX = (centerX + radius * Math.cos(angle)).toInt()
            val childCenterY = (centerY + radius * Math.sin(angle)).toInt()

            val left = childCenterX - child.measuredWidth / 2
            val top = childCenterY - child.measuredHeight / 2

            child.layout(
                left,
                top,
                left + child.measuredWidth,
                top + child.measuredHeight
            )
        }
    }
}

class CustomLayoutScreen : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val customLayout = CustomCircleLayout(this)

        // Add 5 child TextViews arranged in a circle
        for (i in 1..5) {
            val tv = TextView(this).apply {
                text = "Item $i"
                setBackgroundColor(Color.parseColor("#FFBB86FC"))
                setTextColor(Color.WHITE)
                gravity = Gravity.CENTER
                setPadding(20, 20, 20, 20)
            }
            customLayout.addView(tv)
        }

        // Add center TextView
        val centerView = TextView(this).apply {
            text = "Center View"
            setBackgroundColor(Color.parseColor("#FF6200EE"))
            setTextColor(Color.WHITE)
            gravity = Gravity.CENTER
            setPadding(30, 30, 30, 30)
        }
        customLayout.addView(centerView)

        setContentView(customLayout)
    }
}

We created a custom ViewGroup named CustomCircleLayout that arranges its children in a circle.

In onMeasure, we measure all children and decide the size of the layout based on the largest child size multiplied to give enough space for the circle.

In onLayout, we calculate the center point and radius. We place the last child in the center, and the other children evenly spaced around the circle using simple trigonometry.

In the activity, we add 5 TextViews as circle items and one center TextView labeled "Center View". Each child has background color and padding for visibility.

This example shows how to create a custom layout by overriding measurement and layout behavior in Android Kotlin.

Final Result

Completed Screen

CustomLayoutScreen

+-----------------------+
|           Item 1      |
|       Item 5     Item 2|
|   Item 4     Center View  Item 3   |
|                       |
+-----------------------+

The user sees 5 items arranged evenly in a circle around a center label.

No interactive behavior is implemented; this is a static layout demonstration.

Stretch Goal

Add touch feedback to each circle item that changes its background color when tapped.

💡 Hint

Use setOnClickListener on each child view and change background color inside the listener.

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