Types Of Xamarin Layouts

This article is about Xamarin Layouts that are used to compose the user interface controls into visual structures.

Target Audience

People with the basic knowledge of C# and Xamarin

Tools

Visual Studio with Xamarin Installed

Layout is basically a view which itself derives from a view. It acts as a container to the other view and is used to position and size the child in it. There are different types of layouts in Xamarin for different purposes. Here, we will discuss about some basic ones which are commonly used. For example -

Stack Layout
Grid Layout
Absolute layout
Relative Layout
Scroll View
Frame

StackLayout

Stack Layout positions its child elements in a stack. The position is based upon the property called “Orientation”. It can either be “Horizontal” or “Vertical”. And the height and width can be set from the property called “HeightRequest” and “WidthRequest”. The picture below shows the Stack layout.

XAML Code

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:PracApp1"
x:Class="PracApp1.MainPage">
<StackLayout Orientation="Vertical" HeightRequest="100" WidthRequest="100">
<Label HorizontalOptions="Center" VerticalOptions="Center" Text="Hello World!"></Label>
<Switch HorizontalOptions="Center" VerticalOptions="Center" ></Switch>
</StackLayout>
</ContentPage>

Grid

Grid consists of rows and columns and places its child according to the indexes of Rows and Columns. It works like a table. You can also apply ColumnSpan and Rowspan to the elements. The image below shows a Grid.

XAML Code

<Grid BackgroundColor="Black">
<Button Grid.Column="0" Grid.Row="1" Text="AC" BackgroundColor="Silver" TextColor="Black"></Button>
<Button Grid.Column="1" Grid.Row="1" Text="*/-" BackgroundColor="Silver" TextColor="Black"></Button>
<Button Grid.Column="2" Grid.Row="1" Text="%" BackgroundColor="Silver" TextColor="Black"></Button>
<Button Grid.Column="3" Grid.Row="1" Text="/" BackgroundColor="Silver" TextColor="Orange"></Button>
<Button Grid.Column="0" Grid.Row="2" Text="7" BackgroundColor="Gray" TextColor="White"></Button>
<Button Grid.Column="1" Grid.Row="2" Text="8" BackgroundColor="Gray" TextColor="White"></Button>
<Button Grid.Column="2" Grid.Row="2" Text="9" BackgroundColor="Gray" TextColor="White"></Button>
<Button Grid.Column="3" Grid.Row="2" Text="X" TextColor="Orange"></Button>
</Grid>

Absolute Layout

It is used to position a child relative to its parent, at any specific position. The position can be given through “Absolutelayout.Layoutbounds” which requires absolute or proportional values of height, width, X-axis, and Y-axis. And “Absolutelayout.Layoutflags” which shows which value is proportional.

XAML Code

<AbsoluteLayout>
<Label Text="Calculator" BackgroundColor="Red" TextColor="White" AbsoluteLayout.LayoutBounds="0.5,0,200,200" AbsoluteLayout.LayoutFlags="PositionProportional"></Label>
</AbsoluteLayout>

Relative layout

Relative layout positions its child element relative to itself or relative to another child element. The position is based upon the constraints which includes a set of properties. The image shows the Relativelayout.

XAML Code

<RelativeLayout BackgroundColor="Black">
<BoxView BackgroundColor="Red" RelativeLayout.XConstraint="{ConstraintExpression
Type=RelativeToParent, Property=Width, Factor=0.4}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height, Factor=0.4}">
</BoxView>
<BoxView
BackgroundColor="Green" RelativeLayout.XConstraint="{ConstraintExpression
Type=RelativeToParent, Property=Width, Factor=0.6}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,Factor=0.4}">
</BoxView>
<BoxView x:Name="BlueBox" BackgroundColor="Blue"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width, Factor=0.4}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height, Factor=0.6}">
</BoxView>
<RelativeLayout x:Name="YellowBox" BackgroundColor="Yellow"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width, Factor=0.6}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height, Factor=0.6}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=BlueBox, Property=Width, Factor=1}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView,
ElementName=BlueBox, Property=Height, Factor=1}">
<BoxView BackgroundColor="White"
RelativeLayout.XConstraint="{ConstraintExpression
Type=RelativeToView, ElementName=YellowBox, Property=Width,
Factor=0.4}" RelativeLayout.YConstraint="{ConstraintExpression
Type=RelativeToView, ElementName=YellowBox, Property=Height,
Factor=0.4}" HeightRequest="10"
WidthRequest="10">
</BoxView>
</RelativeLayout>
</RelativeLayout>

ScrollView

Scroll View simply adds scrolling to your page. When elements exceed the page size, they are unable to be displayed due to the screen size. So Scroll View removes this difficulty and you can scroll vertically, horizontally or both. It depends upon how you set the orientation.

XAML Code

<ScrollView>
<StackLayout>
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
<Label Text="hello" />
</StackLayout>
</ScrollView>

Frame

Frame shows a rectangle around its child. It has different properties like “OutlineColor”, “CornerRadius” and “HasShadow”. Its default padding is 20 Units. Image shows a Frame around a button.

Summary

With layouts, you can design complex user interfaces and make your application more attractive and user-friendly. It is very important to have good knowledge of layouts. This article helps you to do so. I hopw this adds to your knowledge.