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: