Circular ImageView on Xamarin

Question

I am working on a Xamarin Android application, and I need to make a Circular ImageView.

How can this be achieved?

Answer 1

I use the RoundedImageView library. It's written in Java, but you can write a binding to it without much problems. Once you do, you can simply add this to your .axml:

<RoundedImageView
    local:riv_corner_radius="15dp"
    local:riv_oval="false"
    android:scaleType="centerCrop"
    android:layout_width="30dp"
    android:layout_height="30dp" />

Edit for future readers: I wrote a port of the RoundedImageView for Xamarin.Android, based on the library linked on this post. The source code can be found here and the NuGet package here. A MvxRoundedImageView is also included for use with MvvmCross.

Answer 2

Refer link: https://github.com/jamesmontemagno/CircleImageView-Xamarin.Android/blob/master/CircleImageSample/Resources/layout/Main.axml?

  <refractored.controls.CircleImageView 
android:id="@+id/ImageProfile"
   android:layout_width="80dp" 
android:layout_height="80dp"
   android:scaleType="fitCenter" 
android:src="@drawable/app_icon"
   android:layout_gravity="center_horizontal"/>

=========================================================================== Add reference of Refractored.controls.CircleImageView to your project from nuget package.

Answer 3

Xamarin component is Available for the same, you can check it here

Answer 4

public class CircleDrawable : Drawable
{
    Bitmap bmp;
    BitmapShader bmpShader;
    Paint paint;
    RectF oval;

    public CircleDrawable (Bitmap bmp)
    {
        this.bmp = bmp;
        this.bmpShader = new BitmapShader (bmp, Shader.TileMode.Clamp, Shader.TileMode.Clamp);
        this.paint = new Paint () { AntiAlias = true };
        this.paint.SetShader (bmpShader);
        this.oval = new RectF ();
    }

    public override void Draw (Canvas canvas)
    {
        canvas.DrawOval (oval, paint);
    }

    protected override void OnBoundsChange (Rect bounds)
    {
        base.OnBoundsChange (bounds);
        oval.Set (0, 0, bounds.Width (), bounds.Height ());
    }

    public override int IntrinsicWidth {
        get {
            return bmp.Width;
        }
    }

    public override int IntrinsicHeight {
        get {
            return bmp.Height;
        }
    }

    public override void SetAlpha (int alpha)
    {

    }

    public override int Opacity {
        get {
            return (int)Format.Opaque;
        }
    }

    public override void SetColorFilter (ColorFilter cf)
    {

    }
}

Source: https://github.com/xamarin/xamarin-store-app/blob/master/XamarinStore.Droid/Views/CircleDrawable.cs

Answer 5

Refer these links:

How to create a circular ImageView in Android?

How to make an ImageView with rounded corners?

The above code works for native android. You need to tweak the code to convert into c# syntax and adopt for xamarin android. For your convenience I have changed the code to c#.

public class ImageHelper
{
    public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
    Bitmap output = Bitmap.CreateBitmap(bitmap.Width, bitmap.Height
            , Android.Graphics.Bitmap.Config.Argb8888);
    Canvas canvas = new Canvas(output);
    Color color = Color.DodgerBlue;
    Paint paint = new Paint();
    Rect rect = new Rect(0, 0, bitmap.Width, bitmap.Height);
    RectF rectF = new RectF(rect);
    float roundPx = pixels;

    paint.AntiAlias = true;
    canvas.DrawARGB(0, 0, 0, 0);
    paint.Color = color;
    canvas.DrawRoundRect(rectF, roundPx, roundPx, paint);

    paint.SetXfermode(new PorterDuffXfermode(Android.Graphics.PorterDuff.Mode.SrcIn));
    canvas.DrawBitmap(bitmap, rect, rect, paint);

    return output;
}