Adding Circular Images To 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.

 

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.

 

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.

 

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().

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.

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
             xmlns:ic="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:PracApp1">
    <ic:CircleImage
        WidthRequest="100"
        HeightRequest="100"
        Aspect="AspectFill"
        Source="http://placekitten.com/400/300"
        VerticalOptions="Center"
        HorizontalOptions="Center"
        ></ic:CircleImage>
</ContentPage>

The results will be like this.

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