Edje Part Positioning

An example Image Part container

The Edje positioning model is based heavily on relativity, and it might be difficult for new users to adjust to.

Simply put, every part is located inside a container and that container is located relatively to other container, or if none is set, the whole interface or canvas.

Container definition

Making the container fill the interface with the relative property.

rel1 {
  relative: 0.0 0.0;
  offset:     0   0;
}

rel2 {
  relative: 1.0 1.0;
  offset:    -1  -1;
}

The rel1 and rel2 blocks are used to define the container. Regardless of the content, a container can be imagined as a rectangle in which each rel represent a opposite corner, where rel1 is the left-up corner and rel2 is the right-down corner.

The Relative Property

Changing the size of the container by half modifying the values of the relative property in right-bottom (rel2) corner

relative: X-axis Y-axis;

relative is used to place each corner relatively to something else, it works by taking two decimal values, one for each axis, that go from 0.0 (the beginning) to 1.0 (the end).

It can also be seen as placing a corner in a percentage of that "something else" width and height, with "0.5 0.5" placing the corner at the center, regardless of "something else" size.

The Offset Property

Using the offset property in the right-bottom (rel2) corner to move it 50 pixels to the right

offset: X-axis Y-axis;

offset is used to move one of the corners a fixed amount of pixels along one of the axis.

A positive value moves the corner to the right or bottom, and a negative value moves the corner to the left or up.

The To Property

Using the to property to make the right-bottom (rel2) corner relative to another part, locating it 50 pixels to the right of it's center.

to: "otherPart";

By default the corners of a part are placed relatively to the whole interface, when to is set, the positioning calculations will be made relatively to the selected part container's instead.

to_x: "otherPart_xAxis";
to_y: "anotherPart_yAxis";

Like to, the to_x and to_y properties change the related container of a given corner, but unlike to, they limit the relativity to just one axis, making a corner relative to one part height but another part width, for example.

Relativity Applied

The positioning results

rel1 {
  relative: 0.0 0.0;
  offset:     0   0;
}

rel2 {
  relative: 0.5 0.5;
  offset:    50   0;
  to:       "grey logo";
}

Relative positioning can be hard to grasp at first, a series of practical examples can be found at Edje Relative Positioning Examples.