Circle Button for Xamarin.Forms

Simple but elegant way of display circle buttons with an icon in your Xamarin.Forms projects.

Setup

• Available on NuGet:
• 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.ttf</string>
  <string>fontawesome.ttf</string>
</array>

UWP

In your UWP project add materialicons.ttf and fontawesome.ttf files to:

Assets/Fonts

You can download this file here:
Material Design icons
FontAwesome

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	No
Windows Phone RT	No
Windows Store RT	Yes(beta)	8.1+
Windows 10 UWP	Yes (beta)	Build 105086+
Xamarin.Mac	No

List of icons

You can see name of icons for FontAwesome here and for Material design icon 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,
  FontIcon = Fonts.Material
  Icon = "md-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 
        FontIcon="Material"
        Icon="md-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

GitHub Link

You can find the source code for the plugin in GitHub