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=http://schemas.android.com/apk/res-auto 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..

Rahul.

  • Suyog Patki

    Nice utility Rahul, looks good!

  • Bruno

    You have the class named RoundImageView but the class constructors are CircleImageView.
    After those changes, i’m getting an error in the resources, specifically Resource.Attribute.CircleImageView and Resource.Styleable.CircleImageView.

    I believe the file name is also attrs.xml and not attr.xml.
    Can you share a small project with your code working?
    Love the idea you had, really clean way to deal with the issue.

    • Ooops, sorry for that silly typo.. Corrected it. Class should’ve name CircleImageView, not RoundImageView.

      File name can be attrs.xml or attr.xml. while compiling, it considers both. Once you add values to attr / attrs.xml. Rebuild the app and then use it in CircleImageView class. The reason being, resources are generated in R file after you compile / build the app.

    • Hermes

      Hi, Also you need to change CircularImageView_border -> CircleImageView_border , CircleImageView_XXXX .
      I didn’t know how to get Resource.Attribute.circularImageViewStyle so I just change for 0 and is working now.

  • Ozzy

    Hi,
    Nice work!

    public CircleImageView(Context context, IAttributeSet attrs)
    : this(context, attrs, Resource.Attribute.circularImageViewStyle)
    {
    }
    This constructor references a Resource.Attribute.Resource.Attribute.circularImageViewStyle object/class.
    Where did you get that from? Its not compiling from here.

  • Abdulrahman

    Sorry, I got an error tells: “the Resource.Attribute doesn’t contain a definition for ‘CircleImageViewStyle'”!!
    Can u explain me what does it mean?

    Thank u..