Circular ImageView on Xamarin

Question

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

How can this be achieved?

Answer 1

I am using the RoundedImageView library. It is written in Java, but you can write a binding to it without much trouble. Once you do this, 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 RoundedImageView port for Xamarin.Android, based on the library associated with this post. Source code can be found here and NuGet package here , A MvxRoundedImageView also included for use with MvvmCross.

Answer 2

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 the Refractored.controls.CircleImageView link to your project from the nuget package.

Answer 3

Xamarin component is available for him, 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 to the links:

How to create a circular ImageView in Android?

How to make ImageView with rounded corners?

The above code works for native android. You need to configure the code to convert to C # syntax and accept for xamarin android. For your convenience, I 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; }