Elementary includes an extensive set of UI components. You can use elementary UI components to compose your application user interface (UI). While creating the UI, you can set specific properties for the UI components to control the scalable behavior of the UI. Before you try to create a scalable UI using elementary UI components, make sure you understand the following core concepts on how scalability works with elementary UI components.
The Elementary library provides several containers to display UI components in an effective layout. The containers have no visual identity of their own.
The box container makes a layout where child UI components are stacked in either horizontal or vertical direction. The box size is the sum of its child UI components' size:
The box-based linear layout is the best solution to ensure a minimum size for the child UI components in any device or any orientation.
The grid container makes a layout where child UI components set their position and size relative to the container position and size. You can define the virtual width and height of the grid (by default: 100 x 100). You then packs the child UI components into the grid while setting their position and size based on the virtual size of the grid.
The grid-based relative layout can always fill the full screen in any device or any orientation. However, the size of the child UI components is changed based on the screen size.
To make a layout scalable with UI components, the UI components must be packed into a container using only the weight and align properties based on their minimum size. Do not resize the UI components directly using pixels.
The weight and align properties are associated with every elementary UI component, and they serve as hints for the container they are in. They tell the container how the UI component wants to occupy the space and pack itself with other UI components in the container.
You can set the weight property with the
evas_object_size_hint_weight_set(x_weight, y_weight) function:
EVAS_HINT_EXPAND) means that the container allocates all of the remaining
area to the UI component.
You can set the align property with the
evas_object_size_hint_align_set(x_align, y_align) function:
EVAS_HINT_FILL) means that the UI component fills all of the allocated area.