How to make a Floating Action Button in Xamarin Forms

Question

I'm building a Xamarin CrossPlatform App!

I wanted to add a floating action button at the bottom right corner of the app page just like this

Here is my XAML code:

 <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Last_MSPL.Views.HomePage">


    <ListView x:Name="Demolist" ItemSelected="OnItemSelected" BackgroundColor="AliceBlue">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.ContextActions>
                        <MenuItem x:Name="OnMore" Clicked="OnMore_Clicked" CommandParameter="{Binding .}"
                                 Text="More" />
                        <MenuItem x:Name="OnDelete" Clicked="OnDelete_Clicked" CommandParameter="{Binding .}"
                                 Text="Delete" IsDestructive="True" />
                    </ViewCell.ContextActions>
                    <StackLayout>

                        <StackLayout Padding="15,0">
                            <Label Text="{Binding employee_name}" FontAttributes="bold" x:Name="en"/>
                            <Label Text="{Binding employee_age}"/>
                        </StackLayout>

                    </StackLayout>

                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>



</ContentPage>

How can I do this using XAML? Help me through this, Thanks!

Answer 1

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: