Custom drawing (Canvas) in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will this custom view draw on the screen?

Consider this Kotlin custom view code that overrides onDraw. What shape and color will appear?

Android Kotlin

class MyView(context: Context) : View(context) {
  private val paint = Paint().apply { color = Color.RED }
  override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    canvas.drawCircle(width / 2f, height / 2f, 100f, paint)
  }
}

A A blue square filling the entire view

B Nothing is drawn because onDraw is empty

C A red rectangle at the top-left corner

D A red circle centered in the view with radius 100 pixels

💡 Hint

Look at the paint color and the drawCircle parameters.

The code sets paint color to red and draws a circle at the center with radius 100 pixels.

❓ lifecycle

intermediate

When is the best time to initialize Paint objects in a custom view?

In Android custom views, when should you create and configure Paint objects for drawing?

A Inside the constructor or as class properties, before onDraw is called

B Inside the onDraw method every time it is called

C Inside onMeasure method

D Inside onDetachedFromWindow

💡 Hint

Think about performance and how often onDraw runs.

Paint objects are expensive to create, so they should be initialized once in the constructor or as properties, not repeatedly in onDraw.

📝 Syntax

advanced

What error does this Kotlin code cause in a custom view?

Examine this onDraw override code snippet. What error will it cause?

Android Kotlin

override fun onDraw(canvas: Canvas) {
  canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), Paint())
  super.onDraw(canvas)
}

A Runtime error because super.onDraw must be called before drawing

B No error, draws a rectangle and then calls super

C No visible drawing because Paint() has default color transparent

D Compilation error because super.onDraw must be first line

💡 Hint

What is the default color and style of a new Paint object?

No error. A new Paint() has default opaque black color (alpha=255) and FILL style, so it draws a black rectangle filling the entire view, then calls super.onDraw.

❓ navigation

advanced

How to trigger a redraw of a custom view after data changes?

You updated data that affects your custom view's drawing. Which method should you call to refresh the view?

A call setVisibility(View.VISIBLE)

B call requestLayout() on the view

C call invalidate() on the view

D call onDraw() directly

💡 Hint

Which method tells Android to redraw the view?

invalidate() schedules a redraw by calling onDraw later. requestLayout() triggers layout pass, not redraw.

🔧 Debug

expert

Why does this custom view not show the expected blue circle?

Given this code, why is the blue circle not visible on screen?

Android Kotlin

class BlueCircleView(context: Context) : View(context) {
  private val paint = Paint().apply {
    color = Color.BLUE
    style = Paint.Style.STROKE
    strokeWidth = 0f
  }
  override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    canvas.drawCircle(width / 2f, height / 2f, 50f, paint)
  }
}

A The strokeWidth is zero, so the circle's outline is invisible

B The paint color is blue but the style is fill, so no outline is drawn

C The circle radius is too small to see

D The onDraw method is missing a call to invalidate() to refresh

💡 Hint

Check the strokeWidth value and what it means for drawing.

A strokeWidth of 0 means the outline has no thickness, so the circle is not visible even though color is set.

Practice

1. What is the primary purpose of the onDraw() method in Android custom views?

easy

A. To manage view layout and positioning

B. To draw shapes and graphics on the screen using a Canvas

C. To handle user touch events

D. To load images from resources

Solution

1. Step 1: Understand the role of onDraw()

   The onDraw() method is called when the view needs to display its content.

2. Step 2: Identify what onDraw() uses

   It uses a Canvas object to draw shapes, text, or images directly on the view.

3. Final Answer:

   To draw shapes and graphics on the screen using a Canvas -> Option B

4. Quick Check:

   onDraw() draws on Canvas [OK]

Hint: Remember: onDraw() is for drawing only [OK]

Common Mistakes:

• Confusing onDraw() with event handlers
• Thinking onDraw() manages layout
• Assuming onDraw() loads images automatically

2. Which of the following is the correct way to create a Paint object with red color and stroke style in Kotlin?

easy

A. val paint = Paint.setColor(Color.RED).setStyle(Paint.Style.STROKE)

B. val paint = Paint(Color.RED, Paint.Style.STROKE)

C. val paint = Paint().apply { color = Color.RED; style = Paint.Style.STROKE }

D. val paint = Paint(Color.RED).style(Paint.Style.STROKE)

Solution

1. Step 1: Check Paint object creation syntax

   In Kotlin, Paint is created with default constructor and properties set via setters or apply block.

2. Step 2: Verify correct property assignments

   Using apply allows setting color and style properly.

3. Final Answer:

   val paint = Paint().apply { color = Color.RED; style = Paint.Style.STROKE } -> Option C

4. Quick Check:

   Use apply to set Paint properties [OK]

Hint: Use apply block to set Paint properties cleanly [OK]

Common Mistakes:

• Trying to pass parameters to Paint constructor
• Using chained setters that don't exist
• Confusing method calls with property assignments

3. Given the following onDraw() code snippet, what shape will be drawn?

override fun onDraw(canvas: Canvas) {
  super.onDraw(canvas)
  val paint = Paint().apply { color = Color.BLUE; style = Paint.Style.FILL }
  canvas.drawCircle(100f, 100f, 50f, paint)
}

medium

A. A blue filled circle centered at (100, 100) with radius 50

B. A blue outlined circle centered at (100, 100) with radius 50

C. A red filled circle centered at (100, 100) with radius 50

D. A blue filled rectangle at (100, 100) with size 50

Solution

1. Step 1: Analyze Paint properties

   Paint color is blue and style is FILL, so shape will be filled blue.

2. Step 2: Identify Canvas drawing method

   drawCircle draws a circle at (100f, 100f) with radius 50f.

3. Final Answer:

   A blue filled circle centered at (100, 100) with radius 50 -> Option A

4. Quick Check:

   drawCircle + FILL + blue = filled blue circle [OK]

Hint: Look at Paint style and Canvas method to identify shape [OK]

Common Mistakes:

• Confusing FILL with STROKE style
• Mixing up circle and rectangle drawing methods
• Ignoring Paint color property

4. Identify the error in this custom view's onDraw() method:

override fun onDraw(canvas: Canvas) {
  val paint = Paint()
  paint.color = Color.GREEN
  canvas.drawRect(50f, 50f, 150f, 150f)

medium

A. Missing Paint parameter in drawRect call

B. Paint color should be set after drawRect

C. drawRect requires integer coordinates, not floats

D. onDraw should not create Paint objects

Solution

1. Step 1: Check drawRect method parameters

   The drawRect method requires a Paint object as the last parameter to know how to draw.

2. Step 2: Identify missing argument

   The code calls drawRect with only coordinates, missing the Paint parameter.

3. Final Answer:

   Missing Paint parameter in drawRect call -> Option A

4. Quick Check:

   drawRect needs Paint argument [OK]

Hint: Always pass Paint to Canvas draw methods [OK]

Common Mistakes:

• Forgetting Paint parameter in draw calls
• Thinking Paint color order matters
• Assuming floats are invalid for coordinates

5. You want to draw a custom view that shows a red circle with a black stroke border of 5 pixels thickness. Which of the following onDraw() implementations achieves this correctly?

hard

A. override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
val paint = Paint().apply { color = Color.RED; style = Paint.Style.FILL; strokeWidth = 5f }
canvas.drawCircle(100f, 100f, 50f, paint)
}

B. override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
val paint = Paint().apply { color = Color.RED; style = Paint.Style.STROKE; strokeWidth = 5f }
canvas.drawCircle(100f, 100f, 50f, paint)
}

C. override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
val paint = Paint().apply { color = Color.BLACK; style = Paint.Style.FILL }
canvas.drawCircle(100f, 100f, 50f, paint)
}

D. override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
val fillPaint = Paint().apply { color = Color.RED; style = Paint.Style.FILL }
val strokePaint = Paint().apply { color = Color.BLACK; style = Paint.Style.STROKE; strokeWidth = 5f }
canvas.drawCircle(100f, 100f, 50f, fillPaint)
canvas.drawCircle(100f, 100f, 50f, strokePaint)
}

Solution

1. Step 1: Understand the requirement

   We need a red filled circle with a black stroke border of 5 pixels thickness.

2. Step 2: Check each option's drawing logic

   override fun onDraw(canvas: Canvas) { super.onDraw(canvas) val fillPaint = Paint().apply { color = Color.RED; style = Paint.Style.FILL } val strokePaint = Paint().apply { color = Color.BLACK; style = Paint.Style.STROKE; strokeWidth = 5f } canvas.drawCircle(100f, 100f, 50f, fillPaint) canvas.drawCircle(100f, 100f, 50f, strokePaint) } draws the filled circle first, then draws the stroke circle on top with correct colors and stroke width.

3. Step 3: Identify why others fail

   override fun onDraw(canvas: Canvas) { super.onDraw(canvas) val paint = Paint().apply { color = Color.RED; style = Paint.Style.STROKE; strokeWidth = 5f } canvas.drawCircle(100f, 100f, 50f, paint) } only draws a red stroke, no fill. override fun onDraw(canvas: Canvas) { super.onDraw(canvas) val paint = Paint().apply { color = Color.BLACK; style = Paint.Style.FILL } canvas.drawCircle(100f, 100f, 50f, paint) } draws a black filled circle only. override fun onDraw(canvas: Canvas) { super.onDraw(canvas) val paint = Paint().apply { color = Color.RED; style = Paint.Style.FILL; strokeWidth = 5f } canvas.drawCircle(100f, 100f, 50f, paint) } sets strokeWidth but style is FILL, so no stroke border.

4. Final Answer:

   Uses two Paint objects: red FILL then black STROKE with 5f width -> Option D

5. Quick Check:

   Draw fill then stroke with separate Paints [OK]

Hint: Use two Paints: one FILL red, one STROKE black [OK]

Common Mistakes:

• Using strokeWidth with FILL style only
• Drawing stroke before fill causing overlap issues
• Using one Paint for both fill and stroke