NOTE!
Absolute Layout is provided by Xamarin.Forms: So, we Need to Include Xamarin.Forms Framework in Our project to use this layout. Learn how to use Xamarin.Forms:
Absolute Layout:
Absolute Layout let us specify the exact Location of its children using X and Y coordinates.
Absolute Layout are harder to Maintain for different Mobile screen sizes than other Layouts because of its positioning model. In Absolute Layout, we specify the exact locations of a child view using X-coordinate (from left) and Y-coordinate (from top). This positioning is not as useful in world of various screen resolutions and aspects ratios.
Declaration:
The Absolute layout could be used to positioned the elements anywhere in the layout by using the following syntax:
<AbsoluteLayout>
<Children
AbsoluteLayout.LayoutBounds="x, y, width, height"
AbsoluteLayout.LayoutFlags="Set Flags"
/>
</AbsoluteLayout>
In Absolute layout, Views take five things to set its position. Distance from left side of Parent (X), distance from top of the Parent (Y), height & width of view and The Layout Flag. In order to set any Child Anywhere in the layout, we need to know about two Important Things -
Layout Bounds:
In Layout bounds, we set the Height and width of the view, and distance from the top (y-coordinate) and distance from the left side of view (X-coordinate). In Layout, the bounds values are set as a comma-separated list values in that order - X, Y, Width, Height - Using LayoutBounds property as shown in the following XML code -
AbsoluteLayout.LayoutBounds="x, y, width, height"
We can set the above Layout Bounds value using two ways:
Layout Flags:
The Layout Flags specifies how Layout bounds values will be interpreted. In XAML, bounds and flags are set as a part of the definition of views within the layout using the following syntax.
<Button
AbsoluteLayout.LayoutBounds="x, y, width, height"
AbsoluteLayout.LayoutFlags="Set Flags"
/>
Same Like Layout Bounds, The Layout Flags are also specified in the Declaration of views in the layout using the LayoutFlags Property. The Flags can be combined in XAML using a comma-separated list. Following are the Predefined Options of Layout Flags.
| Option | Description: |
|---|---|
| None | Default Value - Interprets all values as absolute. |
| All | Interprets All Values as Proportional. |
| WidthProportional | Interprets Only the Width value as proportional with all other values absolute. |
| HeightProportional | Interprets Only the Height value as proportional with all other values absolute. |
| XProportional | Interprets Only The X value as proportional, with all other values absolute. |
| YPorportional | Interprets Only The Y value as Proportional, with all other values absolute. |
| PositionProportional | Interprets the X and Y values as proportional, while the size values are interpreted as absolute. |
| SizeProportional | Interprets the Width and Height values as proportional, while the size values are interpreted as absolute. |
Absolute Value
Absolute Values Explicitly define where views should be Positioned within the layout. Absolute values will fix the position of views that will not be able to change its position dynamically for other screen sizes. Using Absolute Values for Positioning can be dangerous, when the size of the layout is Unknown. If we fix our view in center of screen at one size using Absolute values, it could be offset on any other device screen at different size. Therefore, it is important to test our app across the various screen sizes of our supported devices.
In Order to use Absolute values, We set layout bounds using x and y coordinates and explicit sizes, then set Layout flags to none. as shown in the given XAML Code -
<Button
AbsoluteLayout.LayoutBounds="85, 185, 200, 200"
/>
Consider the following example where we align the button (view) in the center of the screen using Absolute value. We set the values to align the view in Portrait Orientation. let's turn it to Landscape Orientation and check if the view is still in center.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Layout"
x:Class="Layout.MainPage">
<ContentPage.Content>
<AbsoluteLayout>
<Button
BackgroundColor="Teal"
Text="Hi, I am Centered, am i?"
AbsoluteLayout.LayoutBounds="85, 185, 200, 200"
/>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
In Above Example, The view is centered in Portrait orientation, but when we turn our device into the landscape, the view is still at its position (the same distance from the left and top). in different sizes screen, it would be different.
EXAMPLE: Absolute Layout using Absolute Values:
Check out the given example, where we set the view's in Absolute layout using absolute values. We set these value on Landscape Orientations on Xperia Z2 smartphone, So the result could be different on Portrait Orientations as well as on the phone with different screen sizes.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Layout_"
x:Class="Layout_.MainPage">
<ContentPage.Content>
<AbsoluteLayout>
<BoxView
Color="White"
AbsoluteLayout.LayoutBounds="0, 0, 100, 100"
/>
<Button
BackgroundColor="#008080"
AbsoluteLayout.LayoutBounds="0, 0, 300, 150" Text="x=0, y=0"
/>
<Button
BackgroundColor="#184757"
AbsoluteLayout.LayoutBounds="295, 0, 300, 150" Text="x=295, y=0"
/>
<Button
BackgroundColor="#184757"
AbsoluteLayout.LayoutBounds="0, 182, 300, 150" Text="x=0, y=182"
/>
<Button
BackgroundColor="#008080"
AbsoluteLayout.LayoutBounds="295, 182, 300, 150" Text="x=295, y=182"
/>
<Button
BackgroundColor="YellowGreen"
AbsoluteLayout.LayoutBounds="150, 92, 300, 150" Text="x=150, y=92"
/>
<Button
BackgroundColor="Orange"
AbsoluteLayout.LayoutBounds="115, 130, 80, 70" Text="x=115, y=130"
/>
<Button
BackgroundColor="Orange"
AbsoluteLayout.LayoutBounds="400, 130, 80, 70" Text="x=400, y=130"
/>
<Button
BackgroundColor="Orange"
AbsoluteLayout.LayoutBounds="255, 50, 80, 70" Text="x=255, y=50"
/>
<Button
BackgroundColor="Orange"
AbsoluteLayout.LayoutBounds="255, 210, 80, 70" Text="x=255, y=210"
/>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
Proportional Value:
The Proportional Values define a relationship between a Layout and a View. Unlike Absolute values, Proportional values will not fix the position of views. the views can change dynamically its position and its size. The Proportional values are expressed as double with the values between 0 and 1. the 0(zero) mean 0%, and 1 mean 100%. In simple, the layout set its views value in percentage using proportional value. If we set the view at the top left corner by assigning the value 0(zero) to both x and y, it will be same for all devices.
In Order to use Proportional values, we set layout bounds using x and y coordinates and proportional sizes, then set Layout flags to All. as shown in the given XAML Code -
<Button
AbsoluteLayout.LayoutBounds=".50, .50, .50, .30"
AbsoluteLayout.LayoutFlags="All"
/>
Consider the following example where we align the button (view) in the center of the screen using Proportional value. We set the values to align the view in Portrait Orientation. let's turn it to Landscape Orientation and check if the view is still in center.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Layout"
x:Class="Layout.MainPage">
<ContentPage.Content>
<AbsoluteLayout>
<Button
BackgroundColor="Teal"
Text="Hi, I am Centered, am i?"
AbsoluteLayout.LayoutBounds=".50, .50, .50, .30"
AbsoluteLayout.LayoutFlags="All"
/>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
EXAMPLE: Absolute Layout using Proportional Values:
Check out the given example, where we set the view's in Absolute layout using Proportional values. We set these value on Portrait Orientations using Xperia Z2 smartphone. The views will change its position and size dynamically on Landscape Orientations as well as on the phone with different screen sizes.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Layout_"
x:Class="Layout_.MainPage">
<ContentPage.Content>
<AbsoluteLayout>
<BoxView
Color="White"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0, 0, 100, 100"
/>
<Button
BackgroundColor="#008080"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0, 0, .48, .45" Text="x=0, y=0"
/>
<Button
BackgroundColor="#184757"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds=".99, 0, .48, .45" Text="x=.99, y=0"
/>
<Button
BackgroundColor="#184757"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0, .99, .48, .45" Text="x=0, y=.99"
/>
<Button
BackgroundColor="#008080"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds=".99, .99, .48, .45" Text="x=.99, y=.99"
/>
<Button
BackgroundColor="YellowGreen"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds=".50, .50, .48, .45" Text="x=.50, y=.50"
/>
<Button
BackgroundColor="Orange"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds=".20, .50, .18, .18" Text="x=.20, y=.50"
/>
<Button
BackgroundColor="Orange"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds=".80, .50, .18, .18" Text="x=.80, y=.50"
/>
<Button
BackgroundColor="Orange"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds=".50, .20, .18, .18" Text="x=.50, y=.20"
/>
<Button
BackgroundColor="Orange"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds=".50, .80, .18, .18" Text="x=.50, y=.80"
/>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
Absolute Layout is relatively straightforward to position elements with any side of the layout or in the center because of its Positioning Model. Using Proportional sizes and Positions, the elements can scale automatically to any view size. For the elements where only the position matter, not the size, absolute and proportional values can be mixed. We can use Absolute layout to set our elements anywhere within a view and it is especially useful when we want to align elements to edges.
