Circle Image in Xamarin.Forms

Introduction 

Circular images in apps are nowadays very popular in-app development. Most of the applications we need to make user profile as circle image e.t.c. So in this article, we can learn how to make Image circle using Xam.Plugins.Forms.ImageCircle.
If you want to make Image Circle without plugin follow my previous article.

Requirements

Description

The creation of a Xamarin.Forms project is very simple in Visual Studio for Mac. It will create three projects:

1. Shared Code
2. Xamarin.Android
3. Xamarin.iOS

The Mac system with Visual Studio for Mac  doesn't support Windows projects (UWP, Windows, Windows Phone)

The following steps will show you how to create Xamarin.Forms projects in a Mac system with Visual Studio.

First, open Visual Studio for Mac. And click on New Project.

After that, we need to select whether you're doing Xamarin.Forms or Xamarin.Android or Xamarin.iOS project. If we want to create Xamarin.Forms project just follow the below screenshot.

Then, we have to give the app name; i.e., CircleImageDemo.

Note:

In the above screen under Shared Code, select Portable class Library or Use Shared Library.

Then, click on Next Button and the following screenshot will be displayed. In that screen, we have to browse the file path where we want to save that application on our PC.

After clicking on the create button it will create the CircleImageDemo Xamarin.Forms project like below.

And the project structure will be:

• CircleImageDemo: It is for Shared Code
• CircleImageDemo.Droid: It is for Android.
• CircleImageDemo:.iOS: It is for iOS

We need to follow the below steps to make Circle Image.

Portable Class Library (PCL)

Step 1:
First, we need to add Xam.Plugins.Forms.ImageCircle plugin on all platforms through nuget.
Right, click on Packages->AddPackages

Now Search plugin with ImageCircle name.

Step 2:

Create your own Xaml page named ImageCirclePage.xaml, and make sure to refer to  "CircleImage" class in Xaml by declaring a namespace for its location and using the namespace prefix on the control element. The following code example shows how the "CircleImage" plugin renderer class can be consumed by a Xaml page:

ImageCirclePage.xaml

1. <?xml version="1.0" encoding="utf-8"?>    
2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" BackgroundColor="White" xmlns:custom="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  x:Class="CircleImageDemo.CircleImageDemoPage">    
3.     <Grid Padding="10,20,10,10" RowSpacing="10">    
4.         <Grid.RowDefinitions>    
5.             <RowDefinition Height="Auto"/>    
6.             <RowDefinition Height="*"/>    
7.             <RowDefinition Height="Auto"/>    
8.             <RowDefinition Height="Auto"/>    
9.         </Grid.RowDefinitions>    
10.         <Label Text="Normal Image" Grid.Row="0" FontSize="20"  HorizontalOptions="CenterAndExpand"/>    
11.         <Image Aspect="AspectFill" Source="BG.png" Grid.Row="1"  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>    
12.          <Label Text="Circle Image" Grid.Row="2" FontSize="20"  HorizontalOptions="CenterAndExpand"/>    
13.         <custom:CircleImage Grid.Row="3" Source="BG.png" WidthRequest="100" HeightRequest="100" Aspect="AspectFill" VerticalOptions="Start" HorizontalOptions="CenterAndExpand"/>    
14.     </Grid>    
15. </ContentPage>   

Note:
The "custom" namespace prefix can be named anything. However, the clr-namespace and assembly values must match the details of the custom renderer class. Once the namespace is declared the prefix is used to reference the custom control.

ImageCirclePage.xaml.cs

1. using Xamarin.Forms;    
2.     
3. namespace CircleImageDemo    
4. {    
5.     public partial class CircleImageDemoPage : ContentPage    
6.     {    
7.         public CircleImageDemoPage()    
8.         {    
9.             InitializeComponent();    
10.         }    
11.     }    
12. }    

Xamarin.Andriod

MainActivity.cs

1. using Android.App;    
2. using Android.Content.PM;    
3. using Android.OS;    
4. using ImageCircle.Forms.Plugin.Droid;    
5.     
6. namespace CircleImageDemo.Droid    
7. {    
8.     [Activity(Label = "CircleImageDemo.Droid", Icon = "@drawable/icon", Theme = "@style/MyTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]    
9.     public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity    
10.     {    
11.         protected override void OnCreate(Bundle bundle)    
12.         {    
13.             TabLayoutResource = Resource.Layout.Tabbar;    
14.             ToolbarResource = Resource.Layout.Toolbar;    
15.     
16.             base.OnCreate(bundle);    
17.     
18.             ImageCircleRenderer.Init();    
19.     
20.             global::Xamarin.Forms.Forms.Init(this, bundle);    
21.     
22.             LoadApplication(new App());    
23.         }    
24.     }    
25. }    

The call to the ImageCircleRenderer.Init() instantiates an Android ImageView, with a reference to the control being assigned to the renderer's property.
Output:

Xamarin.iOS

AppDelegate.cs

1. using Foundation;    
2. using UIKit;    
3. using ImageCircle.Forms.Plugin.iOS;    
4.     
5. namespace CircleImageDemo.iOS    
6. {    
7.     [Register("AppDelegate")]    
8.     public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate    
9.     {    
10.         public override bool FinishedLaunching(UIApplication app, NSDictionary options)    
11.         {    
12.             global::Xamarin.Forms.Forms.Init();    
13.     
14.             ImageCircleRenderer.Init();    
15.     
16.             LoadApplication(new App());    
17.     
18.             return base.FinishedLaunching(app, options);    
19.         }    
20.     }    
21. }    

The call to the ImageCircleRenderer.Init() instantiates an iOS UIImage, with a reference to the control being assigned to the renderer's property.

Output:

                      

Please download the sample from here.