Working with AbsoluteLayout in Xamarin Forms

Often, while developing an application we face situations where we have a design that needs to implement different layouts that are not the ones we normally use (For example: StackLayout, GridLayout).

Some mockups have a more complex design in which we need to organize some graphic controls overlapping others. That’s why, now Im going to explain you an easy way to learn how use AbsoluteLayout.

Let’s start!

Learning the structure

To start creating an AbsoluteLayout, we only need to define the AbsoluteLayout tags, declare all the graphic elements that we need, and then, set the properties that allow us to position this elements on the screen: LayoutBounds and LayoutFlags. (I will be explaining you this bellow). 

Step 1⃣: Add the following tags:

Step 2⃣:  Add as much graphic element as you need and add to each one of the AbsoluteLayout.Bounds and AbsoluteLayout.LayoutFlags properties.

AbsoluteLayout.LayoutBounds

This property, it’s only used to set the X,Y positions and the width and height sizes. These values can be Proportional or Absolute, let’s learn one by one:

Proportional values 

Defines a relationship between a layout and a view. This proportion is defined based on a child view’s position in proportion to the layout parent. To use it, we have to make sure of the following things:

 You have to set the AbsoluteLayout.LayoutFlags with “All” as a  value.

X and Y values must be set to any value between 0 and 1.

 To get a right proportional values, you have to apply the following calculation: If you have a view with a width of 600, you should divide the desired proportional value with the proportional width base (In this case 600), for example if we want to get the third part of 600 we just have to do this: 200 / 600 = 0.33. And the 0.33 is the value that will be set in the width position. Here an example of the proportional type:

Absolute values

Defines the values with fixed position, unlike to the proportional, this type just get the position no matter if fits on the screen or not, for example we can add a Button in the middle of the screen of a determinate device, but if we run the applicacion in a device with a diferente size, the button position will be different.

To use it, you don’t have to set the LayoutFlags.

AbsoluteLayout.LayoutFlags

This property is responsible to specify how values will be interpreted on the screen. We have some options to set this property, such as:

 PositionProportional: Gets X and Y as proportional layout, the remaining elements are absolutes.

SizeProportional: Gets the Width and the Height as proportional layout, the remaining elements are absolutes.

 XProportional  – YProportional: Gets X or Y respectively as  proportional layout, the remaining elements are absolutes.

 WidthProportional – HeightProportional: Gets the Width or the Height  respectively as proportional layout, the remaining elements are absolutes.

All: Gets all values as proportional.

If you want to have all the value as absolute, just don’t set this property.

You must set this property as the following line:

But you may ask, what happens if I want to mixed both property types? ?

The answer is Yes! You can do it! ?  You just make sure of the following:

If you want to mix the LayoutBound with proportional and absolute values you must set the values that you want (X, Y, Width and height), and then, you set the LayoutFlags property with the corresponding value. (XProportional, YProportional among others that I explain previously).

Let’s see an example:

In the example, I used the X and the Width as proportional values (0.8 and 0.3 respectively) that’s the reason why in this case are setting the LayoutFlags with  XProportional,WidthProportional values

And now, let’s practice ?

Spanish post:  https://medium.com/@reyes.leomaris/trabajando-con-absolutelayout-en-xamarin-forms-52cbb1947937

References:     https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/absolute-layout

And done!! The absoluteLayout is ready! ?

Thanks for reading!!! ?❣