title: Xamarin.Forms Universal App 2 Column Layout independent of device size
body: <p>I am very new to Xamarin.Forms to create universal app. Actually I have to migrate a large native app to Xamarin.Forms technology.</p>
  
  <p>I have to create a two column layout (e.g. Registration Page) which is independent of device size.</p>
  
  <p>I am trying to achieve the same using RelativeLayout. Code for the same is below:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;ContentPage BackgroundColor="Yellow" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="LearningXamarin.Views.TestPage"&gt;
      &lt;ContentPage.Content&gt;
          &lt;RelativeLayout&gt;
              &lt;StackLayout x:Name="mainLayout" BackgroundColor="Maroon" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                  RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=0}"
                  RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=0}"&gt;
                  &lt;RelativeLayout&gt;
                      &lt;BoxView x:Name="firstView" BackgroundColor="Yellow" HeightRequest="30"
                          RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0, Constant=5}"
                          RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=20}"
                          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.48, Constant=0}"
                      /&gt;
                      &lt;BoxView BackgroundColor="Green" HeightRequest="30"
                          RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=firstView, Property=Width, Factor=1, Constant=10}"
                          RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=firstView, Property=Y, Factor=1, Constant=0}"
                          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=firstView, Property=Width, Factor=1, Constant=0}"
                      /&gt;
                  &lt;/RelativeLayout&gt;
  
              &lt;/StackLayout&gt;
          &lt;/RelativeLayout&gt;
      &lt;/ContentPage.Content&gt;
  &lt;/ContentPage&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/1hlYd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1hlYd.png" alt="result of the above code"></a></p>
  
  <p>Please suggest is this the correct way to achieve two column layout or is there any other correct way.</p>