Custom Views | Ui Design | Android Development Tutorial

Introduction

In Android development, creating custom views allows you to extend the capabilities of the standard UI components or create entirely new ones. Custom views are useful when you need a unique UI element that is not supported by the default views provided by Android.

Creating a Basic Custom View

To create a custom view in Android, you need to extend the View class and override its methods to define its behavior and appearance. Below is a simple example of a custom view that draws a circle.

Create a new class named CustomCircleView:

public class CustomCircleView extends View {
    private Paint paint;

    public CustomCircleView(Context context) {
        super(context);
        init();
    }

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

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

    private void init() {
        paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setAntiAlias(true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        int radius = Math.min(width, height) / 2;
        canvas.drawCircle(width / 2, height / 2, radius, paint);
    }
}

Using the Custom View in XML Layout

Once you have created your custom view class, you can use it in your XML layouts just like any other view:

Add the following to your activity_main.xml file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

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

</LinearLayout>

Handling Custom Attributes

To make your custom view more flexible, you can define custom attributes that can be set in XML. This involves defining the attributes in a res/values/attrs.xml file and then retrieving them in your custom view class.

Add the custom attributes to attrs.xml:

<resources>
    <declare-styleable name="CustomCircleView">
        <attr name="circleColor" format="color"/>
    </declare-styleable>
</resources>

Update the CustomCircleView class to handle the custom attribute:

public CustomCircleView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
    TypedArray a = context.getTheme().obtainStyledAttributes(
        attrs,
        R.styleable.CustomCircleView,
        0, 0);

    try {
        int circleColor = a.getColor(R.styleable.CustomCircleView_circleColor, Color.BLUE);
        paint.setColor(circleColor);
    } finally {
        a.recycle();
    }
}

Use the custom attribute in activity_main.xml:

<com.example.customviews.CustomCircleView
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:circleColor="#FF0000"/>

Improving Performance

When creating custom views, it's important to consider performance. Here are some tips to improve the performance of your custom views:

Minimize object allocations inside the onDraw method.
Use Canvas.drawBitmap() for complex drawing operations.
Cache calculations that don't change between frames.

Conclusion

Creating custom views in Android allows you to build unique and highly customized UI components. By extending the View class and overriding its methods, you can create views that are tailored to your specific needs. Additionally, handling custom attributes and considering performance optimizations can help you create efficient and reusable custom views.