As promised, here is another release of one of my GitHub libraries for Xamarin! This time we are talking about the FloatingActionButton
or “FAB”!
Here are some important links:
GitHub project: https://github.com/SuavePirate/Xamarin.Forms.Controls.FloatingActionButton
NuGet package: https://www.nuget.org/packages/SuaveControls.FloatingActionButton
Don’t forget to read up on my original post on how to create your own FloatingActionButton
and how to use it: Xamarin.Controls – Xamarin.Forms FloatingActionButton (including iOS!)
Documentation
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.
Now Available on NuGet!
Install-Package SuaveControls.FloatingActionButton
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
iOS Example
TODO:
- Make it more flexible. Add Different color states, add sizing adjustments, etc.
- Create UWP implementation
- Create Xamarin Component
Come support the project and join the contributors list! We would love to see this TODO
list dropped to nothing!
If you like what you see, don’t forget to follow me on twitter @Suave_Pirate, check out my GitHub, and subscribe to my blog to learn more mobile developer tips and tricks!
Interested in sponsoring developer content? Message @Suave_Pirate on twitter for details.
Hi Alex
after installing the package via nuget and trying to use the same in visual studio 2017, the button does not show the color set and the edges are square, is there anything else that needs to be done?
LikeLike
Did you install it in your platform projects as well? It seems like the renderer isn’t being loaded
LikeLike
yes, it is installed in the projects of each platform.
LikeLike
What platform isn’t working?
LikeLike
android, iOS has not been tested
LikeLike
Perhaps the renderer is being linked out. What are your linker settings?
LikeLike
is set to none
Xamarin.Forms version 2.4.0.282
LikeLike
Check out the example project on GitHub. It actually uses the nuget package too!
LikeLike
hi alex i cant installing the package this error
Attempting to gather dependency information for package ‘SuaveControls.FloatingActionButton.2017.11.27’ with respect to project ‘ContPagos’, targeting ‘.NETPortable,Version=v4.5,Profile=Profile259’
LikeLike
It does not support .NETPortable Profile259. It only supports Profile111
LikeLiked by 1 person
i change profile111 but is showing error Attempting to resolve dependencies for package ‘SuaveControls.FloatingActionButton.2017.11.27’ with DependencyBehavior ‘Lowest’
Circular dependency detected ‘SuaveControls.FloatingActionButton 2017.11.27 => SuaveControls.FloatingActionButton 2017.11.27’.
LikeLike
There is a bug tracked in github for this that I’m looking into
LikeLike
Thank you for reconfirming
LikeLike