I'm working on adding a fix half circle overlay in background on the bottom of page.

Structure of all Pages in App (all pages are responsive)

<ContentPage.Content>
    <StackLayout>
        
        // Top Bar => Icons e.t.c
        <StackLayout VerticalOptions="Start">
        </StackLayout>

        // Center => Content
        <StackLayout HorizontalOptions="CenterAndExpand"
                     VerticalOptions="CenterAndExpand">
        </StackLayout>

        // End => Button
        <StackLayout HorizontalOptions="Center"
                         VerticalOptions="End">
        </StackLayout>

    </StackLayout>
</ContentPage.Content>

Now, I wanted to add an Half Circle Overlay, but I couldn't do that by code, so, I used the Image for this half circle overlay.

I wanted to add it in last StackLayout, but can't put RelativeLayout in StackLayout. So, I remove the last StackLayout and pasted the RelativeLayout code instead.

<RelativeLayout
    HorizontalOptions="End">
    <Image
        Source="drawable/background_halfcircle.png"
        RelativeLayout.WidthConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Width}"
        RelativeLayout.HeightConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
    <Grid
        RelativeLayout.WidthConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Width}"
        RelativeLayout.HeightConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Height}">

        <Button
            Text="Button"
            Margin="0,0,0,10"/>
    </Grid>
</RelativeLayout>

Now, the problem is that it pushed all the code in Start & Center StackLayout to the top (stretched it, looking terrible).

How could I add this Half Circle Overlay in the bottom of every page and the above StackLayout aren't get effected?