Xamarin Forms : AbsoluteLayout

Use AbsoluteLayout to create pixel-perfect UIs.

AbsoluteLayout positions and sizes child elements proportional to its own size and position or by absolute values. Child views may be positioned and sized using proportional values or static values, and proportional and static values can be mixed.

So this article will cover : 

• how to use AbsoluteLayout to achieve your desired design.
• How to deal with Proportional values and absolute values

In the following screenshot we will do something like that : 

Why I used in the screenshot absolutelayout instead of stacklayout, simply absolutelayout has a unique anchor model whereby the anchor of the element is positioned relative to its element as the element is positioned relative to the layout when proportional positioning is used. So you can use elements over absolutelayout and this not in the stacklayout.

you can control over all elements perfect with absolutelayout so How can I do this? 

First every element in the absolutelayout has to proportional to its own size and position, for example in the screenshot, you see where the "profile" "meditate" and "Themes" is and "Relaxe", so for every element has size and position. 

So how I can position and size an element, 

First you have to know the difference between Proportional values and Absolute values

Proportional values : has a value between 0 : 1 just from 0 to 1, left to right 0 to 1, top to button 0 to 1,

Absolute values : its usage units, absolute values are capable of positioning and sizing a view that does not fit within the bounds of the layout.

what does the line 13 mean? 

AbsoluteLayout.LayoutBounds="0,20,1,50"

Views within an AbsoluteLayout.LayoutBounds are positioned using four values:

• X – the x (horizontal) position of the view's anchor 
• Y – the y (vertical) position of the view's anchor
• Width – the width of the view
• Height – the height of the view

You can use two of Proportional values and Absolute values by just specific of what you want to be, by default it's all absolute values so if you need a proportional value : 

AbsoluteLayoutFlags specifies how values will be interpreted and has the following predefined options:

• None – interprets all values as absolute. This is the default value if no layout flags are specified.
• All – interprets all values as proportional.
• WidthProportional – interprets the Width value as proportional and all other values as absolute.
• HeightProportional – interprets only the height value as proportional with all other values absolute.
• XProportional – interprets the X value as proportional, while treating all other values as absolute.
• YProportional – interprets the Y value as proportional, while treating all other values as 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 position values are absolute.

So if you want "Relax" in the screenshot in the middle of the screen, positioning be like 

Line 13 AbsoluteLayout.LayoutBounds="0,20,1,50"

(0 for X position) (20 for Y position) (1 for width) (50 for height)