Relative Layout In Xamarin.Forms

Introduction

In this article we are going to make relative layout in xamarin.forms. Xamarin forms have many other types of layouts that include stack layout, grid layout, and absolute layout. If you want to read more about layouts and UI elements of xamarin forms then read this article.

Targeted audience

Targeted audiences are the people with basic knowledge of c-sharp and xaml.

Relative Layout

Relative layout is used to position its elements relative to other elements. For example you have navigation bar at the top of your application and if you want this navigation bar to be always viewed 20 units down from main container, then you may set its y-axis to 20 units down relative to its container.



Implementation

Let’s go through the example of relative layout.

Before starting to implement a relative layout you have to keep these concepts in your mind.

In relative layout you have to set width constraints, height constraints, Y-Constraints, and X-Constraints of an element. And in each constraint you can set constraint expression to  its type, factor, Property and Element Name.

To make it clearer let’s make a box view whose height is 30 percent of the height of the main page and the width is same as the width of the main page. In this example we are going to make height and width relative to its container.

Xaml

<RelativeLayout>

    <BoxView x:Name="Boxview1" BackgroundColor="Fuchsia"
            RelativeLayout.WidthConstraint="{ConstraintExpression
            Type=RelativeToParent,
            Property=Width,
            Factor=1}"
            RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=RelativeToParent,
            Property=Height,
            Factor=0.3}"></BoxView>

</RelativeLayout>

Code Explanation:

Here you see a box view whose height and width is relative to the height and width of its parent. Whenever the height and width of parent is changed it can change. Its height always remains 30 percent of the height of its parent. And its width always remains the same.

Output



That works fine. In this example we make height and width constraints relative to its parent. Now to understand more about relative layout we can make another box and made its x-axis and y-axis relative to the box view we created.

Xaml

<RelativeLayout>

    <BoxView x:Name="Boxview1" BackgroundColor="Fuchsia"
            RelativeLayout.WidthConstraint="{ConstraintExpression
            Type=RelativeToParent,
            Property=Width,
            Factor=1}"
            RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=RelativeToParent,
            Property=Height,
            Factor=0.3}"></BoxView>

    <BoxView BackgroundColor="Lime"
             RelativeLayout.YConstraint="{ConstraintExpression
        Type=RelativeToView,
        ElementName=Boxview1,
        Property=Height,
        Factor=0.9,
        }"
          RelativeLayout.XConstraint="{ConstraintExpression
        Type=RelativeToView,
        ElementName=Boxview1,
        Property=Width,
        Factor=0.5,
        }"
             ></BoxView>

</RelativeLayout>

Code Explanation

Previous box is here and we made another box whose Y-axis is related to height of box view and X-axis is relative to width of the box view. Read the code and think about the output. We set the factor of X-axis to 50 units and Y-axis to 90 units.

Output



Now this is fine. In relative layout you can make more cool and customized layouts according to your desire. So think about one and try to make it.