I'm new to Xamarin forms so would like to ask, if I create a simple XAML page with a grid, and within that another grid and some text, a button and an image, does Xamarin handle the scaling between different device sizes?
My image is svg so should scale, but the rest of the page does not. It appears fine on bigger devices such as 7 and 9 inch tablets, but it's really poor on smaller phones.
Is there something else I have to do to make this appear the same on all devices? For the record it's only on android at the moment and I'm having to manually resize things in code-behind which I don't believe is the best way to do this, so any advice welcome.
Thanks
<?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="CCGT.SimpleLoginPage"
xmlns:artina="clr-namespace:UXDivers.Artina.Shared;assembly=UXDivers.Artina.Shared"
xmlns:local="clr-namespace:CCGT;assembly=CCGT" Title="{ artina:Translate PageTitleSimpleLogin }" BackgroundColor="{DynamicResource BasePageColor}"
xmlns:controls="clr-namespace:TwinTechsForms.NControl;assembly=TwinTechsForms.NControl.SvgImageView">
<ContentPage.Content>
<RelativeLayout HorizontalOptions="CenterAndExpand">
<Grid x:Name="outerGrid" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" Padding="0,0,0,0" BackgroundColor="Teal">
<Grid.RowDefinitions>
<RowDefinition Height="300" />
<RowDefinition Height="*" />
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<!-- inner grid 1-->
<Grid x:Name="innerGrid" Grid.Row="0" BackgroundColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" Padding="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="1200" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1000" />
</Grid.ColumnDefinitions>
<controls:SvgImageView x:Name="logo" BackgroundColor="White"
SvgAssembly="{Binding SvgAssembly}"
SvgPath="CCGT.images.brandSketchArtboard.svg"
WidthRequest="320"
HeightRequest="320" HorizontalOptions="CenterAndExpand"
Grid.Row="0" />
</Grid>
<!-- inner grid 2 - triangle and controls -->
<Grid x:Name="innerGrid2" Grid.Row="1" BackgroundColor="Teal" Padding="0,-10,0,0">
<Grid x:Name="controlsGrid" Grid.Row="0" Grid.Column="0" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<controls:SvgImageView
SvgAssembly="{Binding SvgAssembly}"
SvgPath="CCGT.images.base2.svg"
WidthRequest="1400"
HeightRequest="250" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"
Grid.Row="0" />
</Grid>
</Grid>
<!--inner grid 3 - button -->
<Grid x:Name="buttonsGrid" Grid.Row="2" BackgroundColor="Teal" Padding="0,-8,0,20" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Entry Grid.Row="0" HeightRequest="40" Placeholder="{ artina:Translate StringEmail }" TextColor="WhiteSmoke" BackgroundColor="Teal" PlaceholderColor="White" AutomationId="LoginPage-EmailEntry" HorizontalOptions="{ artina:OnOrientationLayoutOptions
PortraitPhone=Fill,
LandscapePhone=Center,
PortraitTablet=Fill,
LandscapeTablet=CenterAndExpand }" WidthRequest="{ artina:OnOrientationDouble
LandscapePhone=200,
LandscapeTablet=750 }" />
<Label Text="Verify by using your email address" HorizontalOptions="Center" VerticalOptions="Center" TextColor="WhiteSmoke" Grid.Row="1"/>
<artina:Button Grid.Row="2" BackgroundColor="White" TextColor="Teal" VerticalOptions="End" Text="{ artina:Translate StringLogin }" WidthRequest="{ artina:OnOrientationDouble
LandscapePhone=200,
LandscapeTablet=750 }" HorizontalOptions="{ artina:OnOrientationLayoutOptions
PortraitPhone=Fill,
LandscapePhone=Center,
PortraitTablet=Fill,
LandscapeTablet=Center }" AutomationId="LoginPage-SubmitButton"
HeightRequest="40"/>
<Label Grid.Row="3" Text="{ artina:Translate Trademark }" FontSize="13" HorizontalOptions="Center" VerticalOptions="End" TextColor="WhiteSmoke" AutomationId="LoginPage-Trademark"/>
</Grid>
</Grid>
</RelativeLayout>
</ContentPage.Content>
</ContentPage>
I
<RowDefinition Height="Auto" />
or<RowDefinition Height="3*" />
to achieve auto adaptive.