⚡ Guide to Custom Views in Android

Remember that time you needed a widget that Android doesn’t provide out of the box? Maybe a circular progress bar that looks like a pizza being eaten? Well, grab your favorite beverage, because we’re about to dive into the world of custom views!

Why Create Custom Views?

Sometimes the standard Android widgets just don’t cut it. Maybe you need:

A special animation effect
A unique user interaction
That perfect design your UI/UX team dreamed up

The Basics: Anatomy of a Custom View

Here’s a simple custom view that draws a circle that changes color when touched:

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

    private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
    private var currentColor = Color.BLUE
    
    init {
        // Enable touch events
        isClickable = true
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        
        // Get the center and radius
        val centerX = width / 2f
        val centerY = height / 2f
        val radius = min(width, height) / 3f
        
        // Draw the circle
        paint.color = currentColor
        canvas.drawCircle(centerX, centerY, radius, paint)
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                // Change color randomly
                currentColor = Color.rgb(
                    Random.nextInt(256),
                    Random.nextInt(256),
                    Random.nextInt(256)
                )
                invalidate() // Redraw the view
                return true
            }
        }
        return super.onTouchEvent(event)
    }
}

Understanding the View Lifecycle

Measurement and Layout

The view lifecycle is crucial for proper rendering. Here’s how to handle measurement and layout:

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    // Calculate the ideal size of the view based on content
    val desiredWidth = suggestedMinimumWidth + paddingLeft + paddingRight
    val desiredHeight = suggestedMinimumHeight + paddingTop + paddingBottom

    // Reconcile size with any constraints from the parent
    val finalWidth = resolveSize(desiredWidth, widthMeasureSpec)
    val finalHeight = resolveSize(desiredHeight, heightMeasureSpec)

    // Must call this to save the measurements
    setMeasuredDimension(finalWidth, finalHeight)
}

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
    super.onSizeChanged(w, h, oldw, oldh)
    // Update size-dependent calculations
    circleRadius = min(w, h) / 3f
    
    // Update drawing bounds
    rect.set(
        paddingLeft.toFloat(),
        paddingTop.toFloat(),
        (w - paddingRight).toFloat(),
        (h - paddingBottom).toFloat()
    )
}

State Management

Always handle configuration changes and state restoration:

override fun onSaveInstanceState(): Parcelable {
    val superState = super.onSaveInstanceState()
    return Bundle().apply {
        putParcelable("superState", superState)
        putInt("currentColor", currentColor)
    }
}

override fun onRestoreInstanceState(state: Parcelable?) {
    val bundle = state as Bundle
    super.onRestoreInstanceState(bundle.getParcelable("superState"))
    currentColor = bundle.getInt("currentColor")
    invalidate()
}

Making It Configurable

Let’s make our view configurable through XML with various attribute types:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ColorChangeCircleView">
        <attr name="circleRadius" format="dimension" />
        <attr name="defaultColor" format="color" />
        <attr name="shapeStyle" format="enum">
            <enum name="filled" value="0" />
            <enum name="stroke" value="1" />
        </attr>
        <attr name="strokeWidth" format="dimension" />
        <attr name="enableAnimation" format="boolean" />
    </declare-styleable>
</resources>

And the corresponding Kotlin implementation:

init {
    context.theme.obtainStyledAttributes(
        attrs,
        R.styleable.ColorChangeCircleView,
        0, 0
    ).apply {
        try {
            circleRadius = getDimension(
                R.styleable.ColorChangeCircleView_circleRadius,
                resources.getDimension(R.dimen.default_radius)
            )
            defaultColor = getColor(
                R.styleable.ColorChangeCircleView_defaultColor,
                Color.BLUE
            )
            shapeStyle = getInt(
                R.styleable.ColorChangeCircleView_shapeStyle,
                SHAPE_STYLE_FILLED
            )
            strokeWidth = getDimension(
                R.styleable.ColorChangeCircleView_strokeWidth,
                resources.getDimension(R.dimen.default_stroke_width)
            )
            enableAnimation = getBoolean(
                R.styleable.ColorChangeCircleView_enableAnimation,
                false
            )
        } finally {
            recycle()
        }
    }
    currentColor = defaultColor
}

Advanced Touch Handling

Implement sophisticated touch interactions using GestureDetector:

class ColorChangeCircleView : View {
    private val gestureDetector = GestureDetectorCompat(context,
        object : GestureDetector.SimpleOnGestureListener() {
            override fun onDown(e: MotionEvent): Boolean = true

            override fun onSingleTapUp(e: MotionEvent): Boolean {
                changeColor()
                return true
            }

            override fun onFling(
                e1: MotionEvent?, e2: MotionEvent,
                velocityX: Float, velocityY: Float
            ): Boolean {
                startSpinAnimation(velocityX)
                return true
            }
        })

    override fun onTouchEvent(event: MotionEvent): Boolean {
        return gestureDetector.onTouchEvent(event) || super.onTouchEvent(event)
    }
}

Animation Integration

Add smooth animations to your custom view:

private fun startColorAnimation(newColor: Int) {
    ValueAnimator.ofArgb(currentColor, newColor).apply {
        duration = 300
        interpolator = FastOutSlowInInterpolator()
        addUpdateListener { animator ->
            currentColor = animator.animatedValue as Int
            invalidate()
        }
        start()
    }
}

Accessibility Considerations

Make your custom view accessible to all users:

init {
    // Set content description
    contentDescription = context.getString(R.string.color_circle_description)
    
    // Enable accessibility events
    importantForAccessibility = IMPORTANT_FOR_ACCESSIBILITY_YES
}

override fun onInitializeAccessibilityNodeInfo(info: AccessibilityNodeInfo) {
    super.onInitializeAccessibilityNodeInfo(info)
    info.className = Button::class.java.name
    info.isClickable = true
    info.addAction(AccessibilityNodeInfo.ACTION_CLICK)
}

Performance Tips

Avoid Object Creation in onDraw()

// BAD
override fun onDraw(canvas: Canvas) {
    val paint = Paint() // Don't do this!
    canvas.drawCircle(...)
}

// GOOD
private val paint = Paint() // Create once in initialization
override fun onDraw(canvas: Canvas) {
    canvas.drawCircle(...)
}

Use Hardware Acceleration

android:hardwareAccelerated="true"

Optimize Invalidation

// Only invalidate the necessary area
invalidate(left, top, right, bottom)

// Use post for thread-safe invalidation
postInvalidate()

Debugging Tips

Debug draw mode:

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    if (BuildConfig.DEBUG) {
        paint.style = Paint.Style.STROKE
        paint.color = Color.RED
        canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), paint)
    }
}

Log measurements:

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    if (BuildConfig.DEBUG) {
        val widthMode = MeasureSpec.getMode(widthMeasureSpec)
        val widthSize = MeasureSpec.getSize(widthMeasureSpec)
        Log.d(TAG, "Width Mode: ${getModeString(widthMode)}, Size: $widthSize")
    }
}

Testing Custom Views

Here’s a basic test setup:

@RunWith(AndroidJUnit4::class)
class ColorChangeCircleViewTest {
    private lateinit var view: ColorChangeCircleView
    
    @Before
    fun setup() {
        view = ColorChangeCircleView(
            InstrumentationRegistry.getInstrumentation().targetContext
        )
    }
    
    @Test
    fun testColorChange() {
        val initialColor = view.getCurrentColor()
        view.performClick()
        assertNotEquals(initialColor, view.getCurrentColor())
    }
}

A Real-World Example: Custom Progress View

Here’s a more practical example - a custom progress view that fills up like a battery:

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

    private var progress = 0f
    private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
    private val rect = RectF()
    
    fun setProgress(value: Float) {
        progress = value.coerceIn(0f, 100f)
        invalidate()
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        
        // Draw battery outline
        paint.style = Paint.Style.STROKE
        paint.color = Color.GRAY
        rect.set(0f, 0f, width.toFloat(), height.toFloat())
        canvas.drawRect(rect, paint)
        
        // Draw battery level
        paint.style = Paint.Style.FILL
        paint.color = when {
            progress < 20f -> Color.RED
            progress < 50f -> Color.YELLOW
            else -> Color.GREEN
        }
        
        val levelWidth = (width * (progress / 100f))
        rect.set(0f, 0f, levelWidth, height.toFloat())
        canvas.drawRect(rect, paint)
    }
}

Resources for Further Learning

Conclusion

Custom views are like cooking - start with the basic recipe, then add your own flavors!

Stay tuned for more Android development articles!

Why Create Custom Views?#

The Basics: Anatomy of a Custom View#

Understanding the View Lifecycle#

Measurement and Layout#

State Management#

Making It Configurable#

Advanced Touch Handling#

Animation Integration#

Accessibility Considerations#

Performance Tips#

Debugging Tips#

Testing Custom Views#

A Real-World Example: Custom Progress View#

Resources for Further Learning#

Conclusion#