Types Of Xamarin Layouts

The Layout is the view which acts as a container for the other views. It helps to position and arrange the other views in it. Xamarine also provides different types of layouts to design and position the different views and controls. In this article, we will learn about the most used layout which helps to design the Xamarine page rich.

1. Stack Layout
2. Grid
3. Relative Layout
4. Absolute Layout
5. Flex Layout

StackLayout

StackLayout positions its child in a stacked manner. It can be either vertical(Default) or horizontal. we can set the orientation (vertical/horizontal) by Orientation property of StackLayout.

The default spacing between the child is 6, but we can change it by Spacing property. 

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GettingStartedXF.Views.XamarinLayout">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="1" BackgroundColor="LightYellow" HeightRequest="30" />
            <Label Text="2" BackgroundColor="LightGreen" HeightRequest="30"/>
            <Label Text="3" BackgroundColor="PowderBlue" HeightRequest="30"/>
            <Label Text="4" BackgroundColor="IndianRed" HeightRequest="30"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Grid

Grid positions the child elements in rows and columns. It helps us to positions the child in a tabular manner. we have to use Row and Column property to position the children. It also provides RowSpan and ColSpan to set the span in the Grid Row/Column.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GettingStartedXF.Views.XamarinLayout">
    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="0.5*"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <Label Text="Hello," Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Red" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"></Label>
            <Label Text="We" Grid.Row="1" Grid.Column="0" BackgroundColor="YellowGreen" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"></Label>
            <Label Text="are" Grid.Row="1" Grid.Column="1" BackgroundColor="PowderBlue" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"></Label>
            <Label Text="learning" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"  BackgroundColor="LightGreen" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"></Label>
            <Label Text="Xamarin" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="CadetBlue" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"></Label>
        </Grid>
    </ContentPage.Content>
</ContentPage>

AbsoluteLayout

AbsoluteLayout positions the child elements at specified elements relative to its parents. The position can be set through AbsoluteLayout.LayoutBounds and AbsoluteLayout.LayoutFlags. Layoutbounds requires absolute r proportional values of height, width, X-axis, Y-axis and LayoutFlags set the proportional setting.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GettingStartedXF.Views.XamarinLayout">
    <ContentPage.Content>
        <AbsoluteLayout BackgroundColor="PowderBlue">
            <Label Text="Xamarin" BackgroundColor="Red" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="White" AbsoluteLayout.LayoutBounds="0.5,0.1,70,30" 
                   AbsoluteLayout.LayoutFlags="PositionProportional"></Label>
            <Label Text="AbsoluteLayout" BackgroundColor="LawnGreen" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="White" AbsoluteLayout.LayoutBounds="0.5,0.2,100,30" 
                   AbsoluteLayout.LayoutFlags="PositionProportional"></Label>
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

RelativeLayout

RelativeLayout positions its child elements relative to itself or relative to other child elements. For positioning in the RelativeLayout, we use Constraint and BoundsConstraint properties.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GettingStartedXF.Views.XamarinLayout">
    <ContentPage.Content>
        <RelativeLayout x:Name="container">
            <BoxView x:Name="gtboxView" WidthRequest="60" HeightRequest="30" Color="RosyBrown" 
                     RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=-25}"  />
        </RelativeLayout>
    </ContentPage.Content>
</ContentPage>

FlexLayout

FlexLayout position its child elements in a stacked or wrapped manner with many alignment and orientation options.