Absolute Layout In Xamarin.Forms

Introduction

In this article, we are going to learn about absolute layout in xamarin.froms. There are many layouts in xamarin.forms that include Stack Layout, Grid Layout, Absolute Layout, and Relative Layout. If you want to learn more about layouts and U.I elements of Xamarin.Forms, then read this article: 38 Different Xamarin.Forms UI Controls

Absolute Layout

Absolute layout is used to position its child elements at the absolute requested position. Absolute layouts are used when you want to move away from all the layout restrictions and make layout totally different. We can use absolute and proportional values to set height, width, X-Axis and Y-Axis of an element. As shown in the figure blow,

Example

Let’s go through practical implementation of absolute layout. In this example we are going to make boxes and place them where ever we want by setting their x-axis and y-axis.

Let’s make a box and set it on background of our page.

This is as simple as ABC but you need to keep few things in your mind.

In absolute layout we set layout bounds and layout flags.

Layout Bounds

In layout bounds we will set the values of height, width, x-axis and y-axis in the sequence of X-Axis, Y-Axis, Width and Height. First value you set in layout bound would become the values of x-axis and so on.

Layout Flags

In layout flags we will declare whether of the value in bound layout is proportional or not. The minimum of proportional value is 0 and maximum is 1.

Xaml

Code Explanation

Hope you get an idea of layout bounds and layout flags. In the code above we set height and width to the maximum and declare that these values are proportional in layout flags. Now our box will cover the whole area and act as a background of our app.

Output



Here you see that works perfectly fine. We make a box and set it to the background of our app.

Now make another box and place it in the center of page.

Xaml