Adding Circular Images To Your Application

In this article, you are going to learn how to add rounded images in your application.

Targeted Audience

People with a basic knowledge of C# and Xamarin.

Tools

Visual Studio with Xamarin Installed.

By default, in Xamarin.Forms, you cannot display rounded images, we need a plugin for that. So, first, let us add the plugin via NuGet. Right-click on each project to manage NuGet packages. You can use this URL “Xam.Plugins.Forms.ImageCircle” to add the image circle plugin. Don’t forget to add this in each project in order to get cross-platform results. Follow these steps to add the NuGet package.

Adding Circle Image To Your Application
 
Adding Circle Image To Your Application

In each application project, we have a class which bootstraps our application.

iOS

In iOS, it's AppDelegate.cs. In this file, we have a function FInishedLaunching which has .Init() to actually kickstart our application. Below this, we need to call the “ImageCircleRenderer.Init()” method. You will get an error. To resolve this, you can add “using ImageCircle.Forms.Plugin.iOS;” on the top.

Adding Circle Image To Your Application
 

Android

For Android, there is “MainActivity.cs” class where you will see the almost similar code. So, below the .Init() method, you have to write the same lines as we did in iOS.

Adding Circle Image To Your Application
 

Windows

In Windows, you will find .Init() somewhere in the “App.xaml.cs” so as above, we have to write the same line below .InIt().

Adding Circle Image To Your Application

Once you initialize the init circle plugin, let’s have a look at how we will use image circle. First, we need to add the xml namespace declaration because you want to use a type by an element that is defined somewhere else. I am using the prefix ‘ic’ which denotes the image circle.

Place this in the XML namespace

xmlns:ic="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"

This is just a namespace and assembly in which circle image type is defined.

Adding Circle Image To Your Application

Now, instead of using image source, use ic:CircleImage. We need to set some properties which are the requirements for the circular image, like height, width, aspect, source. The important thing here is that you need to set both height and width, with the same values.

XAML Code
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage   
  3.              xmlns:ic="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"  
  4.              xmlns="http://xamarin.com/schemas/2014/forms"  
  5.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  6.              xmlns:local="clr-namespace:PracApp1">  
  7.     <ic:CircleImage   
  8.         WidthRequest="100"  
  9.         HeightRequest="100"  
  10.         Aspect="AspectFill"  
  11.         Source="http://placekitten.com/400/300"  
  12.         VerticalOptions="Center"  
  13.         HorizontalOptions="Center"  
  14.         ></ic:CircleImage>  
  15. </ContentPage>  

The results will be like this.

Adding Circle Image To Your Application

Now, you can easily add a rounded image to your application for places like profile photos and others.