Post
Ask Question

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).

  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.             }  
  15.   
  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.

 

 
Next Recommended Reading Xamarin.Forms Custom Button