Xamarin.Forms Floating Action Button

This time we are talking about the FloatingActionButton or “FAB”!

Here are some important links:https://github.com/keannan5390/Xamarin.Plugin.FAB

NuGet package:https://www.nuget.org/packages/FAB.Forms/2.2.0-pre1

FAB is now available on NuGet. So, you can download and install it using the following command.

Install-Package FAB.Forms -Version 2.2.0-pre1

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

  1. <RelativeLayout>
  2. <ContentView RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
  3. RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
  4. <ListView x:Name="MainList"
  5. BackgroundColor="White">
  6. <ListView.ItemTemplate>
  7. <DataTemplate>
  8. <TextCell Text="{Binding .}" />
  9. </DataTemplate>
  10. </ListView.ItemTemplate>
  11. </ListView>
  12. </ContentView>
  13. <fab:FloatingActionButton
  14. x:Name="fabBtn"
  15. Source="icon.png"
  16. Size="Normal"
  17. Clicked="Handle_FabClicked"
  18. NormalColor="Green"
  19. RippleColor="Red"
  20. HasShadow="True"
  21. RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-75}"
  22. RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-75}" />
  23. </RelativeLayout>

And then, we can use some code behind the C# code.

  1. public partial class MainPage : ContentPage
  2. {
  3. public MainPage()
  4. {
  5. InitializeComponent();
  6. PreList();
  7. }
  8. private void PreList()
  9. {
  10. var items = new List<string>();
  11. for (int i = 0; i < 50; i++)
  12. {
  13. items.Add(string.Format("Item {0}", i));
  14. }
  16. MainList.ItemsSource = items;
  17. }
  18. void Handle_FabClicked(object sender, System.EventArgs e)
  19. {
  20. this.DisplayAlert("Floating Action Button", "You clicked the FAB!", "Awesome!");
  21. }
  22. }

Android Example


iOS Example

Make it more flexible

Add different colors by using - NormalColor="Green",

Adjust the height and width of the button by using - HeightRequest="100" WidthRequest="100"

Add shadow by using - HasShadow="True" and etc.