Circular ImageView, because you can!

We had a requirement where we needed to make image look circular. Yes, just like those “modern design web and mobile apps”. Android does not provide component for circular images out of the box. We had to extend ImageView widget and do some calculations to make it circular. Here’s the code –


How to use –

  • Add RoundeImageView.cs class (rename or change namespace if you want) to your project.
  • Declare required custom attributes for border, border_width, border_color, shadow in attr.xml  (create new attr.xml if it does not exist inside Resources/values folder).
  • Instead of ImageView, use WrapCode.Util.CircleImageView with some custom attributes, refer the the sample layout below –

Custom elements –

  1. custom:border (type boolean) – set it true if you want picture to have border.
  2. custom:border_color – Color of the border (in hex)
  3. custom:border_width – thickness of border in dp
  4. custom:shadow (type boolean) – set it true for shadow.

Don’t forget to add custom namespace xmlns:custom= in layout to avoid build fails –

I will be adding more customization options in future, I am also working on making a Xamarin Component and Nuget Package out of this. Keep checking this space for updates.


Hope that helped, Cheers..