Absolute Layout inside Stack Layout

Question

I'm trying to add a floating button in the bottom right corner of my page inside the StackLayout

<?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:fab="clr-namespace:FAB.Forms;assembly=FAB.Forms"
    x:Class="Hura.Pages.LatestNews"
    Title="Latest news">
    <StackLayout Spacing="10" Padding="5">
        <Label Text="Latest news" FontSize="Medium"/>
        <ListView x:Name="lsvNews"/>

        <Label Text="Latest activities" FontSize="Medium"/>
        <ListView x:Name="lsvActivities"/>

        <Label Text="Good Mording" FontSize="Large" HorizontalOptions="Center"/>
        <AbsoluteLayout x:Name="xyz"
            BackgroundColor="Transparent"
            HorizontalOptions="End"
            VerticalOptions="End">
            <Button Text="gggggg"/>
        </AbsoluteLayout>
    </StackLayout>
</ContentPage>

but the button appears bellow the label. But I want it to appear above the label and not below it.

How can I position the button in the bottom-left corner above the label?

Answer 1

Your issue here is that the StackLayout is simply going to position items in the order that you add them. So since you added the AbsoluteLayout after adding your Label, your Button is going to show up lower than your Label.

Obviously you could move the Label beneath your AbsoluteLayout and get the effect you are asking for like so:

...


<AbsoluteLayout x:Name="xyz"
                BackgroundColor="Transparent"
                HorizontalOptions="End"
                VerticalOptions="End">
  <Button Text="gggggg"/>
</AbsoluteLayout>
<Label Text="Good Mording" FontSize="Large" HorizontalOptions="Center"/>

...

But the whole point of a floating button is for it to actually float above other content. In the example that you show, your Button would never float above anything. In order to get the Button to float over other items you would need to add the entire StackLayout to your AbsoluteLayout. Something like this (note that I have not tested this code so you may need to play with it a bit):

<AbsoluteLayout VerticalOptions="FillAndExpand"  
                HorizontalOptions="FillAndExpand">
  <StackLayout Spacing="10"
               Padding="5"
               AbsoluteLayout.LayoutFlags="All"  
               AbsoluteLayout.LayoutBounds="0,0,1,1">
      ...
  </StackLayout>

  <Button Text="gggggg"
          AbsoluteLayout.LayoutFlags="PositionProportional"   
          AbsoluteLayout.LayoutBounds="1,1,AutoSize,AutoSize"/>
</AbsoluteLayout>

The important bits above are that everything is within the AbsoluteLayout, which means you are able to stack your controls correctly. The other important items are the AbsoluteLayout.LayoutFlags and AbsoluteLayout.LayoutBounds. The LayoutFlags and LayoutBounds on the StackLayout basically just tell the StackLayout that it can take up the entire screen. The LayoutFlags and LayoutBounds on the Button say that the Button needs to be in the bottom right corner and that it can size itself.