Custom Views

How Android Draws Views

Every view goes through three phases before it appears on screen:

1. Measure — the parent asks the view how big it wants to be (onMeasure)
2. Layout — the parent assigns the view its position (onLayout — only for ViewGroups)
3. Draw — the view renders itself onto the Canvas (onDraw)

This cycle runs whenever the view's size or content changes. Understanding it is critical for custom views because mistakes in any phase cause incorrect rendering.

The Measure Phase

onMeasure receives width and height constraints from the parent. You must call setMeasuredDimension() with the resolved size:

class CircleView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private var radius = 0f

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        val desiredSize = 200  // fixed size in pixels

        val widthMode = MeasureSpec.getMode(widthMeasureSpec)
        val widthSize = MeasureSpec.getSize(widthMeasureSpec)

        val width = when (widthMode) {
            MeasureSpec.EXACTLY -> widthSize          // match_parent or fixed dp
            MeasureSpec.AT_MOST -> minOf(desiredSize, widthSize)  // wrap_content
            else -> desiredSize                        // unspecified
        }

        setMeasuredDimension(width, width)  // square view
    }
}

MeasureSpec modes:

• EXACTLY — parent says be exactly this size (match_parent or fixed dp)
• AT_MOST — parent says be at most this size (wrap_content)
• UNSPECIFIED — no constraint (rare, used in ScrollView)

The Draw Phase

onDraw receives a Canvas you can draw on:

private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
    color = Color.BLUE
    style = Paint.Style.FILL
}

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    val cx = width / 2f
    val cy = height / 2f
    radius = minOf(width, height) / 2f - 10f
    canvas.drawCircle(cx, cy, radius, paint)
}

When to Call invalidate() vs requestLayout()

Calling requestLayout() when only the color changed wastes CPU time on re-measurement. Call invalidate() when the view's content changes but its bounds stay the same.

Canvas Primitives

The Canvas provides methods for common shapes and paths:

override fun onDraw(canvas: Canvas) {
    // Rectangle with rounded corners
    val rect = RectF(10f, 10f, width - 10f, height - 10f)
    canvas.drawRoundRect(rect, 16f, 16f, paint)

    // Line
    val linePaint = Paint().apply {
        color = Color.RED
        strokeWidth = 4f
    }
    canvas.drawLine(0f, height / 2f, width.toFloat(), height / 2f, linePaint)

    // Path — custom shapes
    val path = Path().apply {
        moveTo(width / 2f, 0f)
        lineTo(width.toFloat(), height.toFloat())
        lineTo(0f, height.toFloat())
        close()
    }
    canvas.drawPath(path, paint)
}

Handling Touch Events

Override onTouchEvent to respond to user interaction:

override fun onTouchEvent(event: MotionEvent): Boolean {
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            // Finger touched down
            lastX = event.x
            lastY = event.y
            performClick()  // accessibility
            return true
        }
        MotionEvent.ACTION_MOVE -> {
            // Finger moved
            val dx = event.x - lastX
            val dy = event.y - lastY
            // Move your drawing element by dx, dy
            lastX = event.x
            lastY = event.y
            invalidate()  // redraw at new position
            return true
        }
        MotionEvent.ACTION_UP -> {
            // Finger lifted
            return true
        }
    }
    return super.onTouchEvent(event)
}

Always call performClick() on ACTION_DOWN for accessibility support (TalkBack).

Custom Attributes

Read custom attributes defined in res/values/attrs.xml:

init {
    attrs?.let {
        val typedArray = context.obtainStyledAttributes(it, R.styleable.CircleView)
        val color = typedArray.getColor(R.styleable.CircleView_circleColor, Color.BLUE)
        val strokeWidth = typedArray.getDimension(R.styleable.CircleView_strokeWidth, 4f)
        paint.color = color
        paint.strokeWidth = strokeWidth
        typedArray.recycle()
    }
}

Performance Tips

1. Never allocate in onDraw — create Paint and Path objects in init or constructors
2. Use hardware acceleration — most Canvas operations are hardware-accelerated by default
3. Call invalidate() sparingly — each call triggers a full redraw
4. Cache expensive computations — if a value doesn't change between draws, compute it once
5. Profile with GPU rendering — Developer Options → Profile GPU Rendering shows frame timing