How to make a FloatingActionButton work on top of a ListView and position it correctly

Question

I am trying to get a SuaveControls.FloatingActionButton to work on top of a ListView following the example on this page - https://devlinduldulao.pro/how-to-create-a-floating-action-button/

My ListView is inside a StackLayout so I decided to wrap them into an AbsoluteLayout

Here is the View/XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
             xmlns:local="clr-namespace:DPM.XForms"
             x:Class="DPM.XForms.ProjectListPage" 
             Title="Drive Plus Mobile"
             >
    <AbsoluteLayout>
        <StackLayout Orientation="Vertical" Spacing="1">

            <Label Text="TopBar             ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
            <!-- Project Search/Filter toolbar-->
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
                <Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
                <StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
                    <Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
                </StackLayout>
            </StackLayout>
            <Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />



            <ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <!-- Project Row -->
                            <StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
                                <Button 
                                Image="Colombia.png" 
                                BackgroundColor="White" 
                                HorizontalOptions="Center"
                                VerticalOptions="Center"
                                WidthRequest="54"
                                HeightRequest="54"
                                >
                                </Button>
                                <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
                                    <Label 
                                    Text="{Binding Name}" 
                                    TextColor="Black"
                                    Font="Bold,17"
                                    HorizontalOptions="StartAndExpand"
                                    VerticalOptions="Start" 
                                />
                                    <Label 
                                   Text="{Binding Brand}" 
                                   TextColor="Black"
                                   HorizontalOptions="Start"
                                   VerticalOptions="Start" 
                                />
                                    <Label 
                                   Text=".." 
                                   TextColor="Black"
                                   HorizontalOptions="Start"
                                   VerticalOptions="End" 
                                />
                                </StackLayout>
                                <Button Text="3"  WidthRequest="44"></Button>
                                <Button Text=">"  WidthRequest="44" BackgroundColor="White" ></Button>

                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
        <views:FloatingActionButton 
            Image="CreateProject.png" 

            WidthRequest="80" 
            HeightRequest="80" 
            HorizontalOptions="CenterAndExpand" 
            VerticalOptions="CenterAndExpand"
            Clicked="FloatingActionButton_Clicked"
            >

        </views:FloatingActionButton>
    </AbsoluteLayout>

</ContentPage>

But with this approach two things are happening

1. When the device is in Landscape mode the ListView is not growing as it did before adding the AbsoluteLayout

2. Dont know how to position the FloatingActionButton to always stay on the lower right corner of any device

I have also tried placing the FloatingActionButton inside the current StackLayout but it does not float is just added below or above the listview as a regular "row" like is shown here

Feel free to use the comments if something is not clear.

Answer 1

Based on @Swift_Talt answer and this discussion- https://forums.xamarin.com/discussion/52420/create-a-layered-page-layering-controls

I found this solution using a Grid of one (1) cell where the ListView (background) and the FloatingActionButton are on the same unique cell

This is how it looks:

And here is the View/Page

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
             xmlns:local="clr-namespace:DPM.XForms"
             x:Class="DPM.XForms.ProjectListPage" 
             Title="Drive Plus Mobile"
             >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <StackLayout Grid.Row="0" Grid.Column="0" Orientation="Vertical" Spacing="1">

            <Label Text="TopBar             ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
            <!-- Project Search/Filter toolbar-->
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
                <Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
                <StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
                    <Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
                </StackLayout>
            </StackLayout>
            <Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />



            <ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <!-- Project Row -->
                            <StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
                                <Button 
                                Image="Colombia.png" 
                                BackgroundColor="White" 
                                HorizontalOptions="Center"
                                VerticalOptions="Center"
                                WidthRequest="54"
                                HeightRequest="54"
                                >
                                </Button>
                                <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
                                    <Label 
                                    Text="{Binding Name}" 
                                    TextColor="Black"
                                    Font="Bold,17"
                                    HorizontalOptions="StartAndExpand"
                                    VerticalOptions="Start" 
                                />
                                    <Label 
                                   Text="{Binding Brand}" 
                                   TextColor="Black"
                                   HorizontalOptions="Start"
                                   VerticalOptions="Start" 
                                />
                                    <Label 
                                   Text=".." 
                                   TextColor="Black"
                                   HorizontalOptions="Start"
                                   VerticalOptions="End" 
                                />
                                </StackLayout>
                                <Button Text="3"  WidthRequest="44"></Button>
                                <Button Text=">"  WidthRequest="44" BackgroundColor="White" ></Button>

                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
        <StackLayout Grid.Row="0" Grid.Column="0"  HorizontalOptions="End" VerticalOptions="End" Spacing="0" Margin="15">
            <views:FloatingActionButton 
            Image="CreateProject.png" 

            WidthRequest="80" 
            HeightRequest="80" 
            HorizontalOptions="CenterAndExpand" 
            VerticalOptions="CenterAndExpand"
            Clicked="FloatingActionButton_Clicked"
            >

            </views:FloatingActionButton>
        </StackLayout>
    </Grid>
</ContentPage>