Search code examples
androidandroid-custom-viewshapes

Drawing Custom View

I want to create a custom view which has check mark inside a circle. Refer image below.

Drawing circle would be easy. I need some suggestion on drawing tick mark.

Any help appreciated.

enter image description here

Solution

  • If you do not have a specific requirement to create a custom view, I recommend simply using a vector drawable:

    <?xml version="1.0" encoding="utf-8"?>
<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">

    <path
        android:pathData="M0 12a12 12 0 1 1 0 0.01z"
        android:fillColor="#8ab88c"/>

    <path
        android:pathData="M5.25 12l4.5 4.5l9 -9"
        android:strokeColor="#ffffff"
        android:strokeWidth="2.5"/>

</vector>

    The first <path> element uses the elliptical arc command to draw the circle, and the second uses two "lineto" commands to draw the check.

    This can be used inside an ImageView with any dimensions you'd like and will scale beautifully.

    If you must implement a custom view, I would use the same general technique inside my onDraw() implementation:

    @Override
protected void onDraw(Canvas canvas) {
    rectF.set(getLeft(), getTop(), getRight(), getBottom());
    canvas.drawOval(rectF, fillPaint);

    float checkmarkWidth = getWidth() * 0.5626f;
    float delta = checkmarkWidth / 3.0f;

    float initialX = (getWidth() - checkmarkWidth) / 2.0f;
    float initialY = getHeight() / 2.0f;

    path.reset();
    path.moveTo(initialX, initialY);
    path.rLineTo(delta, delta);
    path.rLineTo(2 * delta, -2 * delta);

    strokePaint.setStrokeWidth(getWidth() / 9);
    canvas.drawPath(path, strokePaint);
}