Custom Views in Android UI Design

In the previous chapter, we explored various view components and how to use them within layouts—learning how to construct user interfaces using built-in view components. This chapter delves into custom view design, a crucial step toward building distinctive, personalized interfaces. By creating custom views, you can achieve unique graphical effects and fulfill application-specific requirements.

Fundamental Concepts of Custom Views

A custom view is a view created by developers through extending the View class—or one of its subclasses—to meet specific functional or visual needs. Custom views enable capabilities beyond those offered by standard view components—for example, specialized drawing logic or unique interaction behaviors.

Steps to Create a Custom View

1. Extend the View Class: Create your custom view by inheriting from View or ViewGroup.
2. Override Constructors: Implement appropriate constructors (e.g., with Context and AttributeSet) to initialize the view properly.
3. Implement onDraw(): Define custom rendering logic inside this method.
4. Handle User Interaction: Override methods like onTouchEvent() to respond to touch input.

Creating a Simple Custom View

In this section, we walk through a practical example: building a custom view that displays a centered circular shape.

Step 1: Create the CustomCircleView Class

First, define a new class CustomCircleView, extending View:

public class CustomCircleView extends View {
    private Paint paint;
    private float radius;

    public CustomCircleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setColor(Color.BLUE);
        radius = 100f; // Circle radius
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // Draw a circle centered in the view
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, paint);
    }
}

In this code, we instantiate a CustomCircleView, initialize a Paint object for rendering, and override onDraw() to draw a blue circle centered within the view bounds.

Step 2: Use the Custom View in XML Layout

Reference your custom view directly in an XML layout file:

<com.example.CustomCircleView
    android:layout_width="200dp"
    android:layout_height="200dp" />

Note: Replace com.example with your actual package name.

Step 3: Dynamically Change the Circle’s Color on Touch

To enhance interactivity, add a method to update the circle’s color dynamically—and trigger it when the user taps the view:

@Override
public boolean onTouchEvent(MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
        // Generate a random RGB color
        paint.setColor(Color.rgb((int) (Math.random() * 255),
                                  (int) (Math.random() * 255),
                                  (int) (Math.random() * 255)));
        invalidate(); // Request a redraw
        return true;
    }
    return super.onTouchEvent(event);
}

Here, onTouchEvent() detects tap-down events, assigns a new random color to the Paint object, and calls invalidate() to schedule a redraw—displaying the updated color immediately.

Summary

This chapter introduced the core concepts and workflow for implementing custom views in Android. Through a hands-on example, you learned how to extend View, implement custom drawing logic in onDraw(), and handle user input via onTouchEvent(). Custom views significantly expand your UI design flexibility—enabling richer, more tailored user experiences.

In the next chapter, we’ll further explore advanced techniques for handling user input, deepening your app’s interactivity. We encourage you to apply what you’ve learned here to design increasingly expressive and engaging interfaces.