XamGirl

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!