Android – Draw Circle Border

In our previous tutorial – Draw Shape on Canvas, we learned how to draw a shape like oval onto the canvas. Circle is a special case of oval.

We can also draw border for circle, and set specific border thickness, border color, etc.

In this tutorial, we shall learn how to draw a border for a circle on Canvas.

Steps to Draw Circle Border in Android

To draw a circle border to Canvas using Paint, follow these steps.

  1. Initialize a Paint Object
    1. Set AntiAlias and Dither effects to true, to get a smooth drawing effect of circle.
    2. Set paint style to STROKE. Geometry and text drawn with this style will be stroked, respecting the stroke-related fields on the paint.
    3. Set stroke width. Provide a float value.
    4. Set the color.
  2. Draw Circle using Canvas and Paint Objects.

Following is a sample screenshot, after we are done drawing a border to a circle on Canvas in Android.

Android Draw Circle Border

Example – Draw Circle Border in Android

Create an Android Application with Empty Activity and replace the content of layout and Activity files with the following.

Complete code for XML layout file and MainActivity is given below.

activity_main.xml

</>
Copy
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageV"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</android.support.constraint.ConstraintLayout>

MainActivity.kt

</>
Copy
package com.tutorialkart.drawshapeoncanvas

import android.graphics.Canvas
import android.graphics.Color
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*
import android.graphics.Bitmap
import android.graphics.Paint
import android.graphics.drawable.BitmapDrawable
import android.util.DisplayMetrics


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val bitmap = Bitmap.createBitmap(700, 1000, Bitmap.Config.ARGB_4444)
        val canvas = Canvas(bitmap)

        // canvas background color
        canvas.drawARGB(255, 78, 168, 186);

        var paint = Paint()
        paint.setColor(Color.parseColor("#FFFFFF"))
        paint.setStrokeWidth(30F)
        paint.setStyle(Paint.Style.STROKE)
        paint.setAntiAlias(true)
        paint.setDither(true)

        // get device dimensions
        val displayMetrics = DisplayMetrics()
        windowManager.defaultDisplay.getMetrics(displayMetrics)
        // circle center
        System.out.println("Width : "+displayMetrics.widthPixels)
        var center_x = (displayMetrics.widthPixels/2).toFloat()
        var center_y = (displayMetrics.heightPixels/2).toFloat()
        var radius = 300F

        // draw circle
        canvas.drawCircle(center_x, center_y, radius, paint)
        // now bitmap holds the updated pixels

        // set bitmap as background to ImageView
        imageV.background = BitmapDrawable(getResources(), bitmap)
    }
}

Run this Android Application in your Android phone or Emulator. You would get a Circle on the screen with specified border properties.

Conclusion

In this Kotlin Android Tutorial – Draw Circle Border, we have learnt to use Paint and Canvas to draw a circle with only border onto a ImageView.