Grid rows overlap on Android but not on iOS - user-interface

Question

I am using a Grid Layout to make a registration form. I have a Grid which contains two rows. The first row is an image, the second row is another Grid and has the problem that on Android the entries (which are in a StackLayout) overlap the button, but this doesn't make sense because the grid should never overlap its other rows. Indeed, it works on iOS.
XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition
Height="*" />
</Grid.RowDefinitions>
<Image
Source="blue_background.png"
Aspect="Fill"
Grid.Row="0"
Grid.Column="0" />
<Image
Source="icon.png"
Grid.Row="0"
Grid.Column="0"
VerticalOptions="Center" />
<Grid
Padding="10"
Grid.Row="1"
Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition
Height="*" />
<RowDefinition
Height="2*" />
<RowDefinition
Height="*" />
<RowDefinition
Height="Auto" />
</Grid.RowDefinitions>
<Label
Text="Unisciti a Youni!"
FontSize="Large"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
TextColor="#174668"
Grid.Row="0"
Grid.Column="0"
VerticalOptions="Center" />
<StackLayout
Grid.Row="1"
Grid.Column="0"
Spacing="0"
VerticalOptions="Fill">
<Entry
Text="{Binding RegName}"
Placeholder="Nome"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegSurname}"
Placeholder="Cognome"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegEmail}"
Placeholder="Email"
Keyboard="Email"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegPassword}"
Placeholder="Password"
IsPassword="true"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegPasswordConfirm}"
Placeholder="Conferma password"
IsPassword="true"
VerticalOptions="FillAndExpand" />
</StackLayout>
<Button
Command="{Binding RegisterCommand}"
Text=" Registrati "
TextColor="White"
BackgroundColor="#3A8FDA"
Grid.Row="2"
Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Center" />
<StackLayout
Orientation="Horizontal"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Row="3"
Grid.Column="0">
<StackLayout.Spacing>
<OnPlatform
x:TypeArguments="x:Double">
<On
Platform="Android"
Value="-10" />
<On
Platform="iOS"
Value="3" />
</OnPlatform>
</StackLayout.Spacing>
<Label
Text="Sei già registrato?"
FontSize="Small"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center" />
<Button
x:Name="LoginSwitchButton"
Pressed="LoginSwitch_Handle_Pressed"
Released="LoginSwitch_Handle_Released"
Command="{Binding LoginSwitchCommand}"
Text="Passa al login"
FontSize="Small"
TextColor="#45BFEE"
BackgroundColor="Transparent" />
</StackLayout>
</Grid>
</Grid>

Answer 1

My suggestion to fix your issue would be to start by simplifying your layout because you have extra nested views inside of grids when one single Grid could probably be used for the entire thing. For example:
<Grid ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Grid.ColumnSpan="2" Source="blue_background.png" Aspect="Fill" />
<Image Grid.ColumnSpan="2" Source="icon.png" VerticalOptions="Center" HorizontalOptions="Center"/>
<Label Grid.Row="1" Grid.ColumnSpan="2" Text="Unisciti a Youni!" FontSize="Large" FontAttributes="Bold" TextColor="#174668" VerticalOptions="Center" HorizontalOptions="Center"/>
<Entry Grid.Row="2" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegName}" Placeholder="Nome" VerticalOptions="FillAndExpand" />
<Entry Grid.Row="3" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegSurname}" Placeholder="Cognome" VerticalOptions="FillAndExpand" />
<Entry Grid.Row="4" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegEmail}" Placeholder="Email" Keyboard="Email" VerticalOptions="FillAndExpand" />
<Entry Grid.Row="5" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegPassword}" Placeholder="Password" IsPassword="true" VerticalOptions="FillAndExpand" />
<Entry Grid.Row="6" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegPasswordConfirm}" Placeholder="Conferma password" IsPassword="true" VerticalOptions="FillAndExpand" />
<Button Grid.Row="7" Grid.ColumnSpan="2" Command="{Binding RegisterCommand}" Text=" Registrati " TextColor="White" BackgroundColor="#3A8FDA" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Grid.Row="8" Text="Sei già registrato?" FontSize="Small" VerticalOptions="Center" HorizontalOptions="End" />
<Button Grid.Row="8" Grid.Column="1" x:Name="LoginSwitchButton" Command="{Binding LoginSwitchCommand}" Text="Passa al login" VerticalOptions="Center" HorizontalOptions="Start" FontSize="Small" TextColor="#45BFEE" BackgroundColor="Transparent" />
</Grid>
Then from there I'd adjust the row heights and spacing to match your designs accordingly.

Answer 2

Just change your root container layout to ScrollView
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition
Height="*" />
</Grid.RowDefinitions>
<Image
Source="blue_background.png"
Aspect="Fill"
Grid.Row="0"
Grid.Column="0" />
<Image
Source="icon.png"
Grid.Row="0"
Grid.Column="0"
VerticalOptions="Center" />
<Grid
Padding="10"
Grid.Row="1"
Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition
Height="*" />
<RowDefinition
Height="2*" />
<RowDefinition
Height="*" />
<RowDefinition
Height="Auto" />
</Grid.RowDefinitions>
<Label
Text="Unisciti a Youni!"
FontSize="Large"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
TextColor="#174668"
Grid.Row="0"
Grid.Column="0"
VerticalOptions="Center" />
<StackLayout
Grid.Row="1"
Grid.Column="0"
Spacing="0"
VerticalOptions="Fill">
<Entry
Text="{Binding RegName}"
Placeholder="Nome"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegSurname}"
Placeholder="Cognome"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegEmail}"
Placeholder="Email"
Keyboard="Email"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegPassword}"
Placeholder="Password"
IsPassword="true"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegPasswordConfirm}"
Placeholder="Conferma password"
IsPassword="true"
VerticalOptions="FillAndExpand" />
</StackLayout>
<Button
Command="{Binding RegisterCommand}"
Text=" Registrati "
TextColor="White"
BackgroundColor="#3A8FDA"
Grid.Row="2"
Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Center" />
<StackLayout
Orientation="Horizontal"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Row="3"
Grid.Column="0">
<StackLayout.Spacing>
<OnPlatform
x:TypeArguments="x:Double">
<On
Platform="Android"
Value="-10" />
<On
Platform="iOS"
Value="3" />
</OnPlatform>
</StackLayout.Spacing>
<Label
Text="Sei già registrato?"
FontSize="Small"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center" />
<Button
x:Name="LoginSwitchButton"
Pressed="LoginSwitch_Handle_Pressed"
Released="LoginSwitch_Handle_Released"
Command="{Binding LoginSwitchCommand}"
Text="Passa al login"
FontSize="Small"
TextColor="#45BFEE"
BackgroundColor="Transparent" />
</StackLayout>
</Grid>
</Grid>
</ScrollView>
Put your Grid in ScrollView