Overflowing button in Xamarin Forms - layout

Question

I've got a mockup with a screen I don't know how to implement properly:
I'm wondering how to position that Login button (and the "sign in with" block). Without "Login", it would be quite easy with a StackLayout. But this makes it less easy and I'm searching for a simple solution.
I presume it's feasible with an AbsoluteLayout with position calculations in the codebehind, but that makes the whole page more complicated than it looks.
The white block is a Frame that's used everywhere in the app. It's not specific to the login page, so I want to reuse it elsewhere.
How would you do that?

Answer 1

I think you can use a Grid... with 3 rows.
Rows 1 and 2 have the same height.
"Login data" (User/pwd...) occupy row 0 and 1
Button occupy row 2 and 2
For Example
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="fev_ventilazione_smartwatch.Pages.MyPageTest">
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="8*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Label Text="TEXT" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="3" BackgroundColor="Aqua"/>
<Button Text="BUTTON" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" BackgroundColor="Fuchsia"/>
</Grid>
</ContentPage.Content>
</ContentPage>
Produce

Answer 2

I presume it's feasible with an AbsoluteLayout with position
calculations in the codebehind, but that makes the whole page more
complicated than it looks.
Yes you are right. It is feasible with AbsoluteLayout. But its not as complicated as it seems.
Construct your basic elements first:
White container/StackLayout for login details
Login Button.
Facebook/Google buttons in a horizontal StackLayout.
"OR" Label
"Create An Account" Button
Put them in AbsoluteLayout and define their AbsoluteLayout.LayoutFlags as well as AbsoluteLayout.LayoutBounds.
Now key here is to understand that how Absolute Layout works?
You can find that out from this page: Absolute Layout
I have wrote some code to achieve something similar below. But make sure you learn it fully and understand everything before you can use it in your app:
<ContentPage.Content>
<ScrollView BackgroundColor="Silver">
<AbsoluteLayout Margin="30" >
<StackLayout BackgroundColor="White" HeightRequest="150" Spacing="20" Padding="10" VerticalOptions="FillAndExpand"
AbsoluteLayout.LayoutBounds="0,0,1,250" AbsoluteLayout.LayoutFlags="XProportional,YProportional,WidthProportional"
>
<Entry Text="Login" HeightRequest="30"/>
<Entry Text="Password" HeightRequest="30" IsPassword="true" />
<Label Text="FORGOT YOUR PASSOWORD?" HorizontalTextAlignment="End"/>
</StackLayout>
<Button
Text="LOGIN"
FontAttributes="Bold"
BackgroundColor="Maroon"
TextColor="White"
HeightRequest="70"
WidthRequest="70"
AbsoluteLayout.LayoutBounds=".5,215,70,70" AbsoluteLayout.LayoutFlags="XProportional" BorderRadius="35"
/>
<StackLayout
Orientation="Horizontal"
HorizontalOptions="EndAndExpand"
AbsoluteLayout.LayoutBounds="1,270,0.5,70" AbsoluteLayout.LayoutFlags="XProportional,WidthProportional"
>
<Button Text="Facebook"/>
<Button Text="Google"/>
</StackLayout>
<Label Text="OR" HorizontalTextAlignment="Center"
AbsoluteLayout.LayoutBounds="0.5,350,50,50"
AbsoluteLayout.LayoutFlags="XProportional"
/>
<Button
Text="CREATE AN ACCOUNT" Margin="15"
BackgroundColor="White" TextColor="Maroon"
BorderColor="Maroon" BorderWidth="1"
BorderRadius="0"
HorizontalOptions="FillAndExpand"
AbsoluteLayout.LayoutBounds="0.5,370,1,150"
AbsoluteLayout.LayoutFlags="XProportional,WidthProportional"
/>
</AbsoluteLayout>
</ScrollView>
</ContentPage.Content>
And here is the result:
NOTE: You can achieve the same look using RelativeLayout as well.
Hope this helps.