When designing the application layout to be scalable, you must pay attention to the following key concepts:

• Understand the character of the relative position and the fixed position
• Use the relative position
• Do not fill the width or height out with a fixed size only

In the relative position, the size is determined in proportion to the size of the referred object. For example, if an orange rectangle occupies 30% of the green rectangle, and the green rectangle is expanded, the orange rectangle is expanded accordingly. However, if the scaling value is changed and the green rectangle is not scaled, the orange rectangle remains unchanged too.

In the fixed position, the size is determined by a value set for the object. For example, the orange rectangle set to the size of 10. If the green rectangle is expanded, the orange rectangle does not change. However, if the scaling value is, for example, doubled, the size of the orange rectangle grows to 20.

If you set the object size as a percentage, the ratio remains fixed regardless of the changes in the screen size or resolution. If you want the object size changed in proportion of the window size, use the relative position.

If you use the EDC file to set up the layout, you can set the scale in the part element:

parts
{
   part
   {
      name: "box";
      type: RECT;
      scale: 1;
   }
}

If you set the fixed size in C code, you can use the ELM_SCALE_SIZE macro:

evas_object_size_hint_min_set(object, ELM_SCALE_SIZE(100), ELM_SCALE_SIZE(100));

If you fill the entire height out with a fixed size only and it is scaled, the end result can be larger than the screen size.

If you set a partial width or height with a fixed size and leave the remaining area flexible, the layout does not expand outside the screen.