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!");
}
}

Android Example

iOS Example

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.

7 Comments

Join the conversation! Your thoughts help the community grow.

Ashwini Shelke8y ago
I am new to Xamarin as well as for C#. I have implemented your solution but it's not showing icon. Can you please help me to resolve this.
Noe Franco8y ago
Thanks works like a charm
Deepak Saini8y ago
Dear Sumit,Can you send me full code
- Sumit Singh Sisodia8y ago
  Deepak this my git repo https://github.com/xamarinskills/Floating-Action-Button
Deepak Saini8y ago
Dear Sumit, My icon dindnot show.
- Deepak Saini8y ago
  Dear you was uploaded blank project in git.can you check that..
- Sumit Singh Sisodia8y ago
  Hi Deepak, you can try my git code https://github.com/xamarinskills/Floating-Action-Button