SuaveControls.FloatingActionButton 2017.10.17

There is a newer version of this package available.
See the version list below for details.
dotnet add package SuaveControls.FloatingActionButton --version 2017.10.17
NuGet\Install-Package SuaveControls.FloatingActionButton -Version 2017.10.17
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="SuaveControls.FloatingActionButton" Version="2017.10.17" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add SuaveControls.FloatingActionButton --version 2017.10.17
#r "nuget: SuaveControls.FloatingActionButton, 2017.10.17"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install SuaveControls.FloatingActionButton as a Cake Addin
#addin nuget:?package=SuaveControls.FloatingActionButton&version=2017.10.17

// Install SuaveControls.FloatingActionButton as a Cake Tool
#tool nuget:?package=SuaveControls.FloatingActionButton&version=2017.10.17

Xamarin.Forms.Controls.FloatingActionButton

A custom view to create a FloatingActionButton for both Android and iOS as part of Material Design

That's right, even on iOS!

How to use

Clone the repository and open include the src projects in your Xamarin.Forms and Platform projects.

Special note for iOS: Make sure to call FloatingActionButtonRenderer.InitRenderer(); in your AppDelegate.cs in order to avoid linking it out.

Then you can include it in your XAML or call it from C# (See the example projects for a demo):

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:SuaveControls.FabExample"
             xmlns:controls="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
             x:Class="SuaveControls.FabExample.MainPage">
    <StackLayout Margin="32">
        <Label Text="This is a Floating Action Button!" 
           VerticalOptions="Center" 
           HorizontalOptions="Center"/>
        
        <controls:FloatingActionButton x:Name="FAB" HorizontalOptions="CenterAndExpand" WidthRequest="50" HeightRequest="50"  VerticalOptions="CenterAndExpand" Image="ic_add_white.png" ButtonColor="#03A9F4" Clicked="Button_Clicked"/>
    </StackLayout>
</ContentPage>

Android Example

Android Floating Action Button

iOS Example

iOS Floating Action Button

TODO:

  • Make it more flexible. Add Different color states, add sizing adjustments, etc.
  • Create UWP implementation
  • Create Nuget package
  • Create Xamarin Component
Product Compatible and additional computed target framework versions.
MonoAndroid monoandroid80 is compatible. 
Xamarin.iOS xamarinios10 is compatible. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on SuaveControls.FloatingActionButton:

Package Downloads
IT-Enterprise.Xamarin.CoreStandard

IT-Enterprise CoreStandard for Xamarin Forms

GitHub repositories (1)

Showing the top 1 popular GitHub repositories that depend on SuaveControls.FloatingActionButton:

Repository Stars
SuavePirate/Xamarin.Forms.Controls.FloatingActionButton
A custom view to create a FloatingActionButton for both Android and iOS as part of Material Design
Version Downloads Last updated
2018.3.1-pre1 11,302 3/1/2018
2018.1.5 79,848 1/5/2018
2017.11.27 1,645 11/27/2017
2017.10.17 5,916 10/17/2017

Initial Release