Custom drawing (Canvas) in Android Kotlin - Mini App: Build & Ship

Build: Custom Drawing Canvas

This screen shows a custom drawing using Canvas. It draws a blue circle and a red rectangle on a white background.

Target UI

---------------------
|                   |
|      (  )         |
|                   |
|   [     ]         |
|                   |
|                   |
---------------------

Create a custom View that overrides onDraw()

Draw a blue circle centered horizontally near the top

Draw a red rectangle below the circle

Set the background color to white

Starter Code

Android Kotlin

package com.example.customdrawing

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.util.AttributeSet
import android.view.View

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

    private val paint = Paint()

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // TODO: Add your drawing code here
    }
}

Task 1

Task 2

Task 3

Solution

Android Kotlin

package com.example.customdrawing

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.util.AttributeSet
import android.view.View

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

    private val paint = Paint().apply {
        isAntiAlias = true
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        // Set background color to white
        canvas.drawColor(Color.WHITE)

        // Draw blue circle
        paint.color = Color.BLUE
        val circleRadius = width.coerceAtMost(height) / 6f
        val circleX = width / 2f
        val circleY = circleRadius + 20f
        canvas.drawCircle(circleX, circleY, circleRadius, paint)

        // Draw red rectangle below the circle
        paint.color = Color.RED
        val rectLeft = width / 4f
        val rectTop = circleY + circleRadius + 20f
        val rectRight = width * 3 / 4f
        val rectBottom = rectTop + circleRadius
        canvas.drawRect(rectLeft, rectTop, rectRight, rectBottom, paint)
    }
}

We override onDraw to do custom drawing on the canvas.

First, we fill the background with white using canvas.drawColor(Color.WHITE).

Then, we draw a blue circle centered horizontally near the top. We calculate the radius as one-sixth of the smaller dimension and position it with some padding.

Below the circle, we draw a red rectangle spanning the middle half of the width and with height equal to the circle's radius, positioned with some spacing.

We use a single Paint object and change its color before each shape.

Final Result

Completed Screen

---------------------
|                   |
|       (  )        |
|                   |
|    [       ]      |
|                   |
|                   |
---------------------

The screen shows a white background with a blue circle near the top center.

Below the circle is a red rectangle horizontally centered.

No user interaction is required; this is a static drawing.

Stretch Goal

Add touch interaction to change the circle color randomly when tapped.

💡 Hint

Override onTouchEvent, detect tap inside the circle bounds, then call invalidate() after changing the paint color.