AbsoluteLayout doesnt align controls as expected when positions are same

Question

I am trying to get the similar popup as below on Androd, see the X close button is nicely lays on top of the frame. I copied code from the github to test but actual code is also not working. half of the button is always behind the frame. I thought that first added control goes below and 2nd one comes above if their position lays on each other. is there any exception here? whatever I tried i couldnt set button obove the frame. Can somebody sheds some light on usage of absolutelayout here?

 <ScrollView
    HorizontalOptions="Center"
    VerticalOptions="Center">
    <AbsoluteLayout>
      <Frame
        x:Name="FrameContainer"
        Margin="15"
        HorizontalOptions="Center"
        BackgroundColor="White">
        <StackLayout
            IsClippedToBounds="True"
            Padding="10, 5"
            Spacing="3">
            <Image
              HorizontalOptions="Center"
              x:Name="OctocatImage"
              Margin="10"
              HeightRequest="150"
              WidthRequest="150">
              <Image.Source>
                <OnPlatform
                  x:TypeArguments="ImageSource"
                  Android="github_octocat.png"
                  iOS="github_octocat.png"
                  WinPhone="Assets/github_octocat.png"/>
              </Image.Source>
            </Image>
            <Entry
              HorizontalOptions="Center"
              x:Name="UsernameEntry"
              Style="{StaticResource EntryStyle}"
              Placeholder="Username" />
            <Entry
              HorizontalOptions="Center"
              x:Name="PasswordEntry"
              Style="{StaticResource EntryStyle}"
              Placeholder="Password"
              IsPassword="True"/>
          <Button
            Margin="10, 5"
            BackgroundColor="#7dbbe6"
            HorizontalOptions="Fill"
            Clicked="OnLogin"
            x:Name="LoginButton"
            Text="Login">
            <Button.HeightRequest>
              <OnPlatform x:TypeArguments="x:Double" Android="50" iOS="30" WinPhone="30"/>
            </Button.HeightRequest>
          </Button>
          </StackLayout>
      </Frame>
      <ContentView
          AbsoluteLayout.LayoutFlags="PositionProportional"
          AbsoluteLayout.LayoutBounds="1, 0, -1, -1">
        <ContentView.GestureRecognizers>
          <TapGestureRecognizer Tapped="OnCloseButtonTapped"/>
        </ContentView.GestureRecognizers>
        <Image
          x:Name="CloseImage"
          HeightRequest="30"
          WidthRequest="30">
          <Image.Source>
            <OnPlatform
              x:TypeArguments="ImageSource"
              Android="close_circle_button.png"
              iOS="close_circle_button.png"
              WinPhone="Assets/close_circle_button.png"/>
          </Image.Source>
        </Image>
      </ContentView>
    </AbsoluteLayout>
  </ScrollView>

I just tried with a fresh project and below is how it looks like for me. Close button is always behind the frame. here you can find repro test project

Answer 1

It's a bug, set HasShadow="False" on your Frame and it should work.

Answer 2

Removed Frame and moved some attributes onto StackLayout. Related bug https://bugzilla.xamarin.com/show_bug.cgi?id=55744

<?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:test"
             x:Class="test.MainPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="EntryStyle" TargetType="Entry">
                <Setter Property="PlaceholderColor" Value="#9cdaf1"/>
                <Setter Property="TextColor" Value="#7dbbe6"/>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <ScrollView
    HorizontalOptions="Center"
    VerticalOptions="Center">
            <AbsoluteLayout>

                    <StackLayout Margin="15" BackgroundColor="White"
                    IsClippedToBounds="True"
                    Padding="10, 5"
                    Spacing="3">
                        <Image
                          HorizontalOptions="Center"
                          x:Name="OctocatImage"
                          Margin="10"
                          HeightRequest="150"
                          WidthRequest="150">
                            <Image.Source>
                                <OnPlatform
                                  x:TypeArguments="ImageSource"
                                  Android="icon.png"
                                 />
                            </Image.Source>
                        </Image>
                        <Entry
              HorizontalOptions="Center"
              x:Name="UsernameEntry"
              Style="{StaticResource EntryStyle}"
              Placeholder="Username" />
                        <Entry
              HorizontalOptions="Center"
              x:Name="PasswordEntry"
              Style="{StaticResource EntryStyle}"
              Placeholder="Password"
              IsPassword="True"/>
                        <Button
            Margin="10, 5"
            BackgroundColor="#7dbbe6"
            HorizontalOptions="Fill"

            x:Name="LoginButton"
            Text="Login">
                            <Button.HeightRequest>
                                <OnPlatform x:TypeArguments="x:Double" Android="50" iOS="30" WinPhone="30"/>
                            </Button.HeightRequest>
                        </Button>
                    </StackLayout>

                <ContentView
          AbsoluteLayout.LayoutFlags="PositionProportional"
          AbsoluteLayout.LayoutBounds="1, 0, -1, -1">
                    <Image
          x:Name="CloseImage"
          HeightRequest="30"
          WidthRequest="30">
                        <Image.Source>
                            <OnPlatform
              x:TypeArguments="ImageSource"
              Android="close_circle_button.png"
             />
                        </Image.Source>
                    </Image>
                </ContentView>
            </AbsoluteLayout>
        </ScrollView>
    </ContentPage.Content>


</ContentPage>