Draw circle shape in Canvas in Android

Draw circle shape in canvas is very easy thing to do if you are familiar with Canvas in Android. Please checkout this tutorial if you don’t know about how to create basic Canvas, display it to ImageView and save it as Bitmap.

Here we draw one canvas of 500×500 resolution and draw circle shape in the middle of the canvas.

The below line will draw circle shape in canvas.

canvas.drawCircle(x, y, radius, paint);

Here we pass x and y as the center coordinats of the circle. radius represents the radius of the circle being drawn. And paint is the Paint for drawing circle.

Now we will write the full code to draw circle in canvas.

Paint pBackground = new Paint();
pBackground.setColor(Color.WHITE);
canvas.drawRect(0, 0, 512, 512, pBackground);
Paint pCircle = new Paint();
pCircle.setColor(Color.BLACK);
canvas.drawCircle(256, 256, 256, pCircle);

Draw line on Canvas in Android

You can draw different type of line on Canvas in Android. You can change it’s color, stroke, effect, etc. Here we will see the basics of drawing line on Canvas.

Checkout the basics of Canvas if you are new to Canvas: Draw Canvas on ImageView

Here is the example of different parameters you can apply to draw a line on Canvas in Android.

device-2016-08-23-003351

Draw line on Canvas

//simple line
Paint p1 = new Paint();
p1.setAntiAlias(true);
p1.setColor(Color.BLACK);
p1.setStrokeWidth(10);
canvas.drawLine(10, 40, 400, 40, p1);

//line with color
Paint p2 = new Paint();
p2.setAntiAlias(true);
p2.setColor(Color.RED);
p2.setStrokeWidth(10);
canvas.drawLine(10, 80, 400, 80, p2);

//line with round ends
Paint p3 = new Paint();
p3.setAntiAlias(true);
p3.setColor(Color.BLUE);
p3.setStrokeWidth(10);
p3.setStrokeCap(Paint.Cap.ROUND);
canvas.drawLine(10, 120, 400, 120, p3);

//slanted line
Paint p4 = new Paint();
p4.setAntiAlias(true);
p4.setColor(Color.GREEN);
p4.setStrokeWidth(10);
canvas.drawLine(10, 160, 400, 200, p4);

Here we use AntiAlias flag to true to remove distortion in the lines.

How to draw Canvas on ImageView and save Canvas as Bitmap and store in sdcard in Android

In some of the application we draw image, text and line on Canvas object in Android. Canvas is the basic component in android for drawing objects on it.

#1 Create Canvas and display it in ImageView.
Now we create a Canvas and display its content in ImageView.

  public class MyCanvas extends View {
    public MyCanvas(Context context) {
      super(context);
      // TODO Auto-generated constructor stub
    }

    @Override
    protected void onDraw(Canvas canvas) {
      // TODO Auto-generated method stub
      super.onDraw(canvas);
      Paint pBackground = new Paint();
      pBackground.setColor(Color.WHITE);
      canvas.drawRect(0, 0, 512, 512, pBackground);
      Paint pText = new Paint();
      pText.setColor(Color.BLACK);
      pText.setTextSize(20);
      canvas.drawText("Sample Text", 100, 100, pText);
    }
  }

Now set this canvas to your ImageView using following code.

  View v = new MyCanvas(getApplicationContext());
  Bitmap bitmap = Bitmap.createBitmap(500/*width*/, 500/*height*/, Bitmap.Config.ARGB_8888);
  Canvas canvas = new Canvas(bitmap);
  v.draw(canvas);
  ImageView iv = (ImageView) findViewById(R.id.iv);
  iv.setImageBitmap(bitmap);

You can see “Sample Text” in ImageView.

#2 Save canvas bitmap to sdcard.
We will save this bitmap to sdcard so all your drawing on canvas will be stored as image.

Bitmap b = null;

//create directory if not exist
File dir = new File("/sdcard/tempfolder/");
if (!dir.exists()) {
  dir.mkdirs();
}

File output = new File(dir, "tempfile.jpg");
OutputStream os = null;

try {
  os = new FileOutputStream(output);
  b.compress(Bitmap.CompressFormat.JPEG, 100, os);
  os.flush();
  os.close();

  //this code will scan the image so that it will appear in your gallery when you open next time
  MediaScannerConnection.scanFile(this,	new String[] { output.toString() }, null,
    new MediaScannerConnection.OnScanCompletedListener() {
      public void onScanCompleted(String path, Uri uri) {
        Log.d("appname", "image is saved in gallery and gallery is refreshed.");
      }
    }
  );
} catch (Exception e) {
}

If you find any problem or doubt, please mention in comments. Do not forget to share!

Download Source Code: https://github.com/dakshbhatt21/a-computer-engineer