Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make ImageView Circular

I have an ImageView which I am attempting to make Circular in Xamarin. This would be simple enough and I would have done it with Core Animation, but the images are being downloaded Asynchronously like this:

this.profileImage.InvokeOnMainThread (() => this.profileImage.SetImage (
    url: new NSUrl (datum.user.profile_picture)
    )
); 

How would I make these images circular?

like image 284
Prad Avatar asked Jan 28 '26 05:01

Prad


2 Answers

This is How I ended Up fixing my issue:

this.profileImage.InvokeOnMainThread (() => this.profileImage.SetImage (
            url: new NSUrl (datum.user.profile_picture)
        )
    );

// Make Image Profile Image Circular
CALayer profileImageCircle = profileImage.Layer;
profileImageCircle.CornerRadius = 30;
profileImageCircle.MasksToBounds = true;
like image 181
Prad Avatar answered Jan 29 '26 17:01

Prad


Following this - Late to the party but can be helpful

** Using OP's Code to make the application more generic as to make any image - regardless of size, circular **

this.profileImage.InvokeOnMainThread (() => this.profileImage.SetImage (
            url: new NSUrl (datum.user.profile_picture)
        )
    );

// Make Image Profile Image Circular
CALayer profileImageCircle = profileImage.Layer;
profileImageCircle.CornerRadius = profileImageCircle.Frame.Size.Width / 2;
profileImageCircle.MasksToBounds = true;

By Adding "profileImageCircle.Frame.Size.Width / 2;" we will get the radius needed for the image we are using, so that it will always be circular - assuming it is a square image.

like image 30
Jared Kove Avatar answered Jan 29 '26 18:01

Jared Kove



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!