How to make a Floating Action Button in Xamarin Forms

**

If you want a solution thats simple and without downloading libraries or anything try this:

**

In your xaml you can use a normal button with rounded corners. Just make sure both width and height are the same. To have it float use a absolute layout and put the button on the bottom. I pasted mine and its style entry from my app.xml resource dictionary.

(Ive used both the james montenago packages and the suave controls. The first doesn't work on iOS and the latter doesn't show images on Android. This solution works on both iOS and Android.)

XAML:

<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<!-- other content goes here -->      
  <Button x:Name="yourname" Image="baseline_menu_white_24"
                Clicked="OnFabMenuClick" IsVisible="True"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                AbsoluteLayout.LayoutBounds="1, 1, AutoSize, AutoSize"
                Style="{StaticResource FABPrimary}"  />
            </AbsoluteLayout>

Resource dictionary entry:

<Color x:Key="DarkButtonBackground">#921813</Color> 
            <Style x:Key="FABPrimary" TargetType="Button">
                <Setter Property="CornerRadius" Value="100"/>
                <Setter Property="BackgroundColor" Value="{StaticResource DarkButtonBackground}"/>
                <Setter Property="HeightRequest" Value="55"/>
                <Setter Property="WidthRequest" Value="55"/>
                <Setter Property="HorizontalOptions" Value="CenterAndExpand"/>
                <Setter Property="VerticalOptions" Value="CenterAndExpand"/>
                <Setter Property="Padding" Value="15"/>
                <Setter Property="Margin" Value="0,0,0,15"/>
            </Style>

• You can ignore the resource dictionary entry if you want and instead put the properties directly in the button declaration in your xaml file.
• I have found that on some iOS devices, the buttons do not display correctly if the radius is set to 100. This can be fixed to setting the CornerRadius to half of the width and height, or you can use OnPlatform like this:

     <Setter Property="CornerRadius">
          <OnPlatform iOS="25" Android="100"/>
     </Setter>

(When height and width are both 50.)

the quickest way:

1. Install this Nuget: https://github.com/jamesmontemagno/FloatingActionButton-for-Xamarin.Android
2. Position the Floating Action Button (FAB) Like this:

      <?xml version="1.0" encoding="utf-8" ?>
        <ContentPage
            x:Class="Tawsil.Views.DemoPage"
            xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:fab="clr-namespace:Refractored.FabControl;assembly=Refractored.FabControl">

            <AbsoluteLayout>
                <Grid AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">

                    <!-- your content here -->

                </Grid>

                <!-- the FAB -->
                <fab:FloatingActionButtonView AbsoluteLayout.LayoutBounds="1, 1, AutoSize, AutoSize" AbsoluteLayout.LayoutFlags="PositionProportional" ImageName="add.png" />
            </AbsoluteLayout>
        </ContentPage>

Don't forget to add the "add.png" icon to your resources

It's pretty easy to add a floating button in xamarin forms. Just add a Grid with one row having Height="*" and inside that, add a ScrollView and a Button, both in Grid.Row="0". Inside your ScrollView, put your design form. For button to be round in shape, put some BorderRadius and HeightRequest as well as WidthRequest should be double of that BorderRadius. Also, to show it at bottom right corner, put Margin="0,0,20,22". To show an Icon inside that button, put FontAwesome Icon as ImageSource of the button. FontAwesome Icons can be defined in a separate class (Please let me know if you need details on how to use FontAwesome Icons as well).

That's it, you are done.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <ScrollView Grid.Row="0">
        
        </ScrollView>
        <Button Grid.Row="0" BorderColor="#2b3c3c" BorderWidth="1" FontAttributes="Bold" BackgroundColor="#1968B3" BorderRadius="35" TextColor="White" 
                    HorizontalOptions="End" VerticalOptions="End" WidthRequest="70" HeightRequest="70" Margin="0,0,20,22" Command="{Binding OpenSearchModalPopupCommand}">
            <Button.ImageSource>
                <FontImageSource FontFamily="{StaticResource FontAwesomeSolidFontFamily}"
                                 Glyph="{x:Static fonts:Icons.FAFilter}" 
                                 Size="20"
                                 Color="White"/>
            </Button.ImageSource>
        </Button>
    </Grid>

You can use an ImageButton (Xamarin.Forms v3.4+)

Create your image with a transparent background in your favorite editor and then assign it a location on the Page.

Example using an AbsoluteLayout, just place your "FAB" as the last element so that its Z-order is highest and it will "float" above the rest of the content.

    <AbsoluteLayout>

         ~~~~

        <ImageButton Source="editFAB.png" 
            BackgroundColor="Transparent"
            AbsoluteLayout.LayoutFlags="PositionProportional"  
            AbsoluteLayout.LayoutBounds=".95,.95,80,80" 
            Clicked="Handle_Clicked" />
    </AbsoluteLayout>

Output: