Smooth circular imageView on android

You must Login before you can answer or comment on any questions.

I am trying to make an imageView circular, with a white "border", then a light grey border around that.

But whenever I round the image, it is not smooth at all - it's all pixelated around the sides... Does anyone know how I can make it smoother?

This is what I currently have: 

var profile_pic = Titanium.UI.createImageView({
    width:100, height:100,
    backgroundImage: 'http://img.modelbase.ch/thumb/50/gallery/3353/49744.jpg',
    gallerytype: 'gallery',
    borderColor: '#fff',
    borderRadius: 50,
    borderWidth: 3
});
 
var profile_outer = Titanium.UI.createView({
    width: 102,
    height: 102,
    backgroundColor: '#fff',
    borderColor: '#ddd',
    borderRadius: 52,
    borderWidth: 2,
})
 
profile_outer.add(profile_pic); 
win.add(profile_outer);
Thanks

— asked 1 year ago by Ben M
0 Comments

2 Answers

Try to use image property instead of backgroundimage. As backgroundImage will be attached to the View itself but the image property will be free from any view transformation. try it..

— answered 1 year ago by Ajeet pratap Maurya
answer permalink
4 Comments

  • Originally I tried to use the image property but setting the border radius seemed to have no effect on it. Maybe I'm doing something wrong when I'm defining it: 

    var profile_pic = Titanium.UI.createImageView({
                width:'50dp', 
                height:'50dp',
                image: 'http://img.modelbase.ch/thumb/50/gallery/3353/49744.jpg',
                gallerytype: 'gallery',
                borderColor: '#fff',
                borderRadius: 50,
                borderWidth: 3
            });

    — commented 1 year ago by Ben M

  • here is the code which I tried and it worked. The images were not pixelated 

    var win1 = Titanium.UI.createWindow({  
    title:'roundImage',
    backgroundColor:'#fff'
 
});
 
var myimage = Ti.UI.createImageView({
   image:'http://img.modelbase.ch/thumb/50/gallery/3353/49744.jpg',
   width:50,
   height:50,
   borderRadius:25,
   borderWidth:5
});
 
win1.add(myimage);
win1.open();
    here the very simple logic is the border radius should be exactly half of the width, if you want a perfect round view. hope that work for you. :))

    — commented 1 year ago by Ajeet pratap Maurya

  • And the actual image size is 50x50 so it is not good to make it 100x100 and expect the image not to be pixelated.

    — commented 1 year ago by Ajeet pratap Maurya

  • Show 1 more comment

Have you tried a higher resolution source? Your source image is 50x50. You scale it to 100x100.

— answered 1 year ago by Stephen Feather
answer permalink
1 Comment

  • I've tried dropping it to 50x50, same problem (the outside is still really bumpy).

    — commented 1 year ago by Ben M

Your Answer

Think you can help? Login to answer this question!