About design and nearby

Xamarin.Forms: Power of RelativeLayout

Posted: January 4th, 2017 | Author: | Filed under: Development, Mobile Design and Development | Tags: , , , , , , , , | No Comments »

RelativeLayout is used for creating adaptive layouts based on their parent’s and other views’ position and dimensions.

For me RelativeLayout is the solution to apply an image as the background for some components. Say, I have a Label on page and would like to overlay it with a background image:

RelativeLayout - Image as a background

Each element in the RelativeLayout can define a constraint (RelativeLayout.YConstraint, RelativeLayout.XConstraint, RelativeLayout.WidthConstraint, RelativeLayout.HeightConstraint) which defines how the element relates to other items.

Every constraint can have such values:

  • ElementName: the name of the element that the constraint is relative to.
  • Type: whether the constraint is relative to the parent or another view.
  • Property: which property on the relative element to use for the constraint.
  • Factor: the multiplier for the constraint.
  • Constant: an offset for the constraint.

In XAML constraints are expressed as ConstraintExpressions.

My code for the layout above is

  1. <StackLayout
  2.         Orientation="Horizontal"
  3.         HorizontalOptions="CenterAndExpand">
  4.         <Label
  5.           Text="Hey, it's RelativeLayout! "
  6.           HorizontalOptions="Start" VerticalOptions="Center"/>
  7.         <RelativeLayout>
  8.           <Image
  9.             Source="Heart.png"
  10.             WidthRequest="54"
  11.             HeightRequest="54"
  12.             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Constant=5}"
  13.             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0.10, Constant=0}" />
  14.           <Label
  15.             Text=":)"
  16.             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Constant=15}"
  17.             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0.10, Constant=25}"
  18.             TextColor="#000000"/>
  19.         </RelativeLayout>
  20.       </StackLayout>

The Image:
There are WidthRequest and HeightRequest set for the Image to specify its size.
The Image has two constraints, YConstraint and XConstraint. The Type=RelativeToParent parameter sets the constraint to the parent RelativeLayout.
The Property=Y and Constant=5 values set the Y Position of the Label.
The Property=X and Constant=0 values set the X Position of the Label. The Factor=0.10 sets the Label width to 10% of the parent.

The bottom Label:
The Type=RelativeToParent parameter sets the constraint to the parent RelativeLayout.
The Property=Y and Constant=15 values set the Y Position of the Label.
The Property=X and Constant=25 values set the X Position of the Label. The Factor=0.10 sets the Label width to 10% of the parent.

*Note: It is also possible to define constraints as relative to another View (using x:Name for this View and setting ConstraintExpression Type=RelativeToView, ElementName=YourXNameComesHere).

With such basic knowledge of power of RelativeLayout you are free to create any UI you can imagine :)

Share Button

Check Related Posts:


Leave a Reply


  • four × = 12

Ready to contact a Freelance UI & UX designer for your project? I’m ready to jump onboard!

Let's discuss your project now