Button Circle Control Plugin for Xamarin.Forms

Simple but elegant way of display circle buttons with an icon in your Xamarin.Forms projects. This project is based in ImageCirclePlugin Project developed by James Montemagno

Setup

Available on NuGet: https://www.nuget.org/packages/Plugins.Forms.ButtonCircle
Install into your PCL project and Client projects.

Android

In your Android project call:

ButtonCircleRenderer.Init();

iOS

In your iOS project call:

ButtonCircleRenderer.Init();

And add this key in your Info.plist

<key>UIAppFonts</key>
    <array>
      <string>MaterialIcons-Regular.ttf</string>
    </array>

You must do this AFTER you call Xamarin.Forms.Init();

Platform Support

Platform	Supported	Version
Xamarin.iOS	Yes	iOS 7+
Xamarin.Android	Yes	API 14+
Windows Phone Silverlight	Is coming
Windows Phone RT	Is coming
Windows Store RT	Is coming
Windows 10 UWP	Is coming
Xamarin.Mac	No

List of icons

You can see name of icons here

Usage

Instead of using an Button simply use a CircleButton instead!

You MUST set the width & height requests to the same value. Here is a sample:

new ButtonImage
{
  BorderColor = Color.Black,
  BorderThickness = 5,
  HeightRequest = 150,
  WidthRequest = 150,
  HorizontalOptions = LayoutOptions.Center,
  Icon = "ic_add"
}

XAML:

First add the xmlns namespace:

xmlns:local="clr-namespace:ButtonCircle.FormsPlugin.Abstractions;assembly=ButtonCircle.FormsPlugin.Abstractions"

Then add the xaml:

<local:CircleButton 
        Icon="ic_directions_bike" 
        FontSize="30" TextColor="Black" 
        HeightRequest="70" WidthRequest="70" 
        BorderThickness="5" BorderColor="Black" 
        BackgroundColor="#DCDCDC" Clicked="CircleButton_Clicked">
</local:CircleButton>

License

Licensed under MIT, see license file