Looking at some open source code I see that people barely use AbsoluteLayouts, and I think the main reason of that is because they might not know how to use it.
In this article, I’m going to explain step by step how to use it, why, and what you can achieve with it.
Let’s start with the basics
AbsoluteLayout is a layout type that allows you to position elements in the page using the X, Y, Width, and Height. It is really helpful when you want to add some elements that are not too precisely aligned each other.
Create an AbsoluteLayout is really simple, you just have to:
1-Add the Tag ‘AbsoluteLayout’
XAML:
<AbsoluteLayout></AbsoluteLayout>
C# CODE:
var layout = new AbsoluteLayout();
2-Add the position and height of each child
In absolute layouts, we have to specify two properties: Layout Bounds and Layout Flags.
Layout bounds
In this property, we will set the height, width, x, y properties.
Indicating with the first two properties the position of the element (X, Y relative to parent), and with the last ones the width/height.
Layout Flags
Indicates how values specified in the layout bounds will be interpreted. It can be Absolute or Proportional.
Proportional: Position the view using proportional values, that means that the element will be scalable according to the value specified. These values are expressed as doubles with values between 0 and 1.
So for example, if you want to say that a view occupies 100% of the screen, it will be 1 – 30% = 0.3 etc.
As you can see here, we want the BoxView to be positioned in the 0,0 of the screen and expand to the whole screen using 1 in X and 1 in Y. also in the LayoutFlags property we are specifying that the size of each element is proportional.
If all the properties are proportional, an easy way to express it is using the property All:
Absolute: Position the view using fixed sizes. These values are expressed as any double value.
For example:
As you can see here we have a box view, positioned in x= 30, y=30 with size 40×50.
Also, we are not specifying the flags, that’s because you only will specify the elements that are proportional. As none of the elements here are proportional then the property is not required.
Mix Proportional and Absolute types
If you want to use a mix of both, you can do it, just make sure to specify ONLY which values will be proportional.
For example:
As only X and Y are proportional, we only specify these.
Also if both positions (X, Y) are proportional instead of specifying them separately, you can use PositionProportional to indicate that both are proportional.
Same with size using SizeProportional.
Why use AbsoluteLayouts
- Complex UI: It helps you to achieve a complex UI, positioning elements that could not be aligned using any other layout.
- Relative Layout: Another way to achieve the position is using Relative Layout, but the Absolute Layout has a better performance. Also, the RelativeLayout does support positioning elements outside of its own bounds.
What else can we achieve using Absolute Layouts?
- Responsive UI
Code: https://gist.github.com/Char0394/9dfe3fb0beaa45fa2c80353e3b07f137
- Complex UI
Code: https://gist.github.com/Char0394/9dfe3fb0beaa45fa2c80353e3b07f137
- Put an element over the other
Code: https://gist.github.com/Char0394/9dfe3fb0beaa45fa2c80353e3b07f137
Good References
- https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/absolute-layout
- https://docs.microsoft.com/en-us/xamarin/xamarin-forms/creating-mobile-apps-xamarin-forms/summaries/chapter14
- https://stackoverflow.com/questions/39178880/absolute-layout-vs-relativelayout-in-xamarin
That’s all for now.
Happy coding!
6 Comments
Really we are so thankful to u ,I am expecting some custom radio buttons,check box from you , ect
Hi
Nice article. Your blog inspires to try new things and do better.
Nice Explanation
Thank you for your detailed explanations. They’re much more intuitive and useful than the Xamarin Docs!
Very efficient explanation.
Thank you.