XAML code to put button in bottom right corner

Question

I'm trying to get my floating action button in the bottom left corner of my application.

Currently it looks like this:

And I want it to look like this:

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"
         xmlns:local="clr-namespace:xxx;assembly=xxx"
         x:Class="xxx.xxx.xxx.xxxx"> 

 <AbsoluteLayout HorizontalOptions="FillAndExpand"  VerticalOptions="FillAndExpand">

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

        <StackLayout Orientation="Vertical" VerticalOptions="StartAndExpand">
            <StackLayout HorizontalOptions="CenterAndExpand"  Margin="0,15,0,0" Orientation="Vertical">
                <!--<local:CustomImage Source="logo.png" HeightRequest="100" WidthRequest="100" HorizontalOptions="Center" />-->

                <local:CustomImageButton  WidthRequest="150" Image="Foto.png" ClassId="Eigendommen" x:Name="buttonFoto" HeightRequest="150"/>

            </StackLayout>

            <StackLayout Orientation="Vertical" VerticalOptions="CenterAndExpand" Margin="10,0,0,0" x:Name="MainStack" >
                <BoxView BackgroundColor="#F15A35" HeightRequest="1" WidthRequest="400" Margin="0,-2,0,5" />
                <Label Text="Toegevoegd:" FontSize="Medium" FontAttributes="Bold" />
                <StackLayout Orientation="Horizontal">
                    <StackLayout Orientation="Vertical"  IsVisible="False" Margin="10,0,10,0" x:Name="hideImage1">
                        <local:CustomImage HeightRequest="100" WidthRequest="100"/>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="Verwijderen" FontSize="Small" VerticalTextAlignment="Center" />
                            <local:CustomImageButton Image="close_zwart.png" BackgroundColor="White" Clicked="Hide_Image_Click" HeightRequest="40" WidthRequest="40" />
                        </StackLayout>
                    </StackLayout>
                    <StackLayout Orientation="Vertical" Margin="10,0,10,0" x:Name="hideImage2" IsVisible="False">
                        <local:CustomImage HeightRequest="100" WidthRequest="100"/>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="Verwijderen" FontSize="Small" VerticalTextAlignment="Center" />
                            <local:CustomImageButton Image="close_zwart.png" Clicked="Hide_Image_Click" BackgroundColor="White" HeightRequest="40" WidthRequest="40" />
                        </StackLayout>
                    </StackLayout>
                    <StackLayout Orientation="Vertical" Margin="10,0,10,0" x:Name="hideImage3" IsVisible="False">
                        <local:CustomImage HeightRequest="100" WidthRequest="100"/>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="Verwijderen" FontSize="Small" VerticalTextAlignment="Center" />
                            <local:CustomImageButton Image="close_zwart.png" Clicked="Hide_Image_Click" BackgroundColor="White" HeightRequest="40" WidthRequest="40" />
                        </StackLayout>
                    </StackLayout>
                </StackLayout>

            </StackLayout>

        </StackLayout>

    </StackLayout>

    <StackLayout 
             AbsoluteLayout.LayoutFlags="All"
             AbsoluteLayout.LayoutBounds="1,1,0.25,0.25">

        <StackLayout HorizontalOptions="End" VerticalOptions="End" Margin="0,0,0,0">
            <local:FloatingActionButton Image="checktaak.png" x:Name="insertTaak"  HeightRequest="60" WidthRequest="60" />
        </StackLayout>

    </StackLayout>

</AbsoluteLayout>

</ContentPage>

You can find the my floating action button at the bottom of all the code ( the last stacklayout). if you need more code let me know in the comments. Edit I want the button always there even if it overlaps a other stacklayout

Answer 1

Assuming FloatingActionButton inherits from Button and the AbsoluteLayout is the child of a ContentPage and the expected margin for the floating button as (15,15) from right and bottom borders,

<AbsoluteLayout>
    <!-- SOME OTHER ELEMENTS -->

    <local:FloatingActionButton Image="checktaak.png"
                                CornerRadius="30"
                                WidthRequest="60" HeightRequest="60"
                                AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="1,1,75,75"
                                HorizontalOptions="Center" VerticalOptions="Center" />
</AbsoluteLayout>

To NOTE,

• Use AbsoluteLayout.LayoutFlags="PositionProportional" to make only the positioning proportional

  Then for AbsoluteLayout.LayoutBounds set X and Y, 1 and 1 to push it to the bottom right corner. The Width and Height is set to 75 and 75 to position the element 75 points left from the layout's right border and 75 points top from the layout's bottom border.

  The 75 is calculated as,

  60(element width/height request) + 15(right/bottom margin) = 75

• Since the WidthRequest and HeightRequest is 60, half of it 30 will be the CornerRadius of the element.

Answer 2

Found it!

Just had to tweak the layoutbounds a little, I didn't knew I could go over 1. This is my new layoutbound for the stacklayout that includes the fab:

 AbsoluteLayout.LayoutBounds="0.94,1.18,0.5,0.25"