Creating a circular bitmap in Android in C#

A while ago, I was looking for a way to change a bitmap into a circular bitmap.
There are a lot of good examples on the internet, but none of them completely met my requirements.
So I used one of them as base to create my own helper for creating a circular bitmap.

public static Bitmap CreateRoundedBitmap(Bitmap bitmap, int padding)
{
    Bitmap output = Bitmap.CreateBitmap(bitmap.Width, bitmap.Height, Bitmap.Config.Argb8888);
    var canvas = new Canvas(output);

    var paint = new Paint();
    var rect = new Rect(0, 0, bitmap.Width, bitmap.Height);
    var rectF = new RectF(rect);

    paint.AntiAlias = true;
    canvas.DrawARGB(0, 0, 0, 0);
    canvas.DrawOval(rectF, paint);
    paint.SetXfermode(new PorterDuffXfermode(PorterDuff.Mode.SrcIn));

    canvas.DrawBitmap(bitmap, rect, rect, paint);
    return output;
}

I’m not a fan of static methods, but when no context is used, I’m not that bothered.

A border can be added by drawing a second oval with a stroke width and a color property set to the paint instance.

 var rect2 = new Rect(padding, padding, bitmap.Width - padding, bitmap.Height - padding);
 var p = new Paint();
 p.Color = Color.White;
 p.StrokeWidth = 10;
 p.AntiAlias = true;
 canvas.DrawOval(new RectF(rect2), p);
 

This example creates a white border around the circular bitmap.

In my app, I use a lot of white circular bitmaps. To keep the code as DRY as possible, I created another helper method for creating white bitmaps.

public static Bitmap CreateWhiteBitmap(int width = 160, int height = 160)
{
    var bitmap = Bitmap.CreateBitmap(width, height, Bitmap.Config.Argb8888);
    Canvas c = new Canvas(bitmap);
    c.DrawColor(Color.White);
    c.Save();
    return bitmap;
}

Another static. Still can’t be bothered, because no context is used.
I do like to point out that statics can be very dangerous. When statics are used as repositories to read static variables, files or whatever kind of data, remember to at least always use locks, but even better… just don’t use statics!!

Now let’s bring it all together.

In my activity, I use the following code to create a bitmap, change it to a circular bitmap and add it to an ImageView (with id “Image” in my Layout file):

var bitmap = BitmapHelper.CreateWhiteBitmap();
bitmap = BitmapHelper.CreateRoundedBitmap(bitmap, 10);
var imageView = view.FindViewById<ImageView>(Resource.Id.Image);
imageView.SetImageBitmap(bitmap);

That’s it! Hope this helps!

The following two tabs change content below.
I'm a software developer from Utrecht. Interested in DDD, continuous delivery, new technologies & frameworks.

Latest posts by Vincent Keizer (see all)

2 Replies to “Creating a circular bitmap in Android in C#”

  1. Great post!

    BUT, am i correct in saying that this draws the white background OVER the image?

    Shouldn’t

    canvas.DrawBitmap(bitmap, rect, rect, paint);

    come AFTER

    canvas.DrawOval(new RectF(rect2), p);

    and the image is always bigger than the circle so you can’t see the background!

    1. Hi dot_ly,

      Thanks for your reply. You’re absolutely right! The second oval is only required when you want to draw a border.
      I have updated my post. Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *