Xamarin.Forms Floating Action Button

Xamarin.Forms Floating Action Button

This time we are talking about the FloatingActionButton or “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).

<RelativeLayout>
<ContentView RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
<ListView x:Name="MainList"
BackgroundColor="White">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding .}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentView>
<fab:FloatingActionButton
x:Name="fabBtn"
Source="icon.png"
Size="Normal"
Clicked="Handle_FabClicked"
NormalColor="Green"
RippleColor="Red"
HasShadow="True"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-75}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-75}" />
</RelativeLayout>

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

public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
PreList();
}
private void PreList()
{
var items = new List<string>();
for (int i = 0; i < 50; i++)
{
items.Add(string.Format("Item {0}", i));
}
MainList.ItemsSource = items;
}
void Handle_FabClicked(object sender, System.EventArgs e)
{
this.DisplayAlert("Floating Action Button", "You clicked the FAB!", "Awesome!");
}
}