Circular image edges are jagged in Alloy appcelerator

Question

I am trying to make an circular image view in Alloy appcelerator formerly Titanium like this

XML

<ImageView id="profile_photo"  />

TSS

"#profile_photo_view_holder":{
    width: 80,
    height: 80,
    borderRadius: 40,
    borderWidth:2,
    borderColor:"black"     
}

The image view is rendering properly but jaggy in its edges looks like an anti aliasing problem.

I use image factory module to scale down also but no luck.

resizedImage = ImageFactory.imageAsResized(blob, {
    width : 80,
    height : 80,
    quality : 0.9
});
$.profile_photo.image = resizedImage;

are you developing your Android or iOS? On Android, there is a hack to also set the borderWidth which ensures to smooth the corners. — Hans Knöchel
You set a borderWidth to 1px which should smooth the corners. — Hans Knöchel
borderWidth is already given and it is 1px only but the border is not jagged while it is clearly visible of image edges which are jagged. I am using 1280x720 resolution. Tested with native code in android which are rendering fine. — Debashis Banerjee
This might make a great feature request to improve how this is rendered. Stack Overflow is not the right place for that. Please check if it has already been requested at the Appcelerator JIRA. If it has not, create a ticket, link to this question but also provide a complete description in the ticket. Don't forget to drop a link to the ticket here so that others can watch it with you. — Fokke Zandbergen

Carlos Zinato Carlos Zinato · Accepted Answer · 2016-02-29T10:59:43

on Android you will need to make use of a module to achieve it. This module is quite new and looks great:

Hope it helps