Custom layouts in Android Kotlin - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a custom layout in Android development?

A custom layout is a user-defined ViewGroup that arranges child views in a specific way not provided by standard layouts like LinearLayout or RelativeLayout.

beginner

Which method must you override to define how child views are positioned in a custom layout?

You must override the onLayout method to specify the exact position and size of each child view within the custom layout.

intermediate

What is the purpose of the onMeasure method in a custom layout?

onMeasure calculates the size requirements for the layout and its children, ensuring the layout knows how much space it needs.

intermediate

Why is it important to call measureChild or measureChildWithMargins inside onMeasure?

These methods measure each child view with the correct size constraints, so the parent layout can properly calculate its own size and layout children correctly.

beginner

How does a custom layout improve app UI design?

It allows developers to create unique arrangements of views tailored to specific design needs, beyond what standard layouts offer.

Which method do you override to position child views in a custom Android layout?

A onCreate

B onDraw

C onLayout

D onStart

The onLayout method is where you set the position and size of each child view inside your custom layout.

What does the onMeasure method do in a custom layout?

A Calculates the size requirements of the layout and its children

B Draws the layout on screen

C Handles user input events

D Starts the activity

onMeasure calculates how big the layout and its children want to be.

Which method helps measure child views with margins inside onMeasure?

A measureChildWithMargins

B layoutChild

C drawChild

D requestLayout

measureChildWithMargins measures child views considering their margins.

What is the base class you extend to create a custom layout in Android?

A Fragment

B ViewGroup

C View

D Activity

Custom layouts extend ViewGroup because they contain and manage child views.

Why might you create a custom layout instead of using standard layouts?

A To change app permissions

B To handle network requests

C To improve battery life

D To create unique view arrangements not possible with standard layouts

Custom layouts allow unique arrangements of views tailored to your design needs.

Explain the roles of onMeasure and onLayout when creating a custom layout in Android.

Think about measuring first, then placing views.

Describe why and when you would create a custom layout instead of using built-in layouts.

Consider a real app design that standard layouts can't handle.

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