Box

The box container allows you to arrange the UI components in a specific order horizontally or vertically. The box layout has no theme. If you want to arrange the components vertically, you can also use the form container.

Figure: Box container

Box container

Creating a Box

To create a box:

To create a vertical box, use the elm_box_add() function.
```
Evas_Object *vbox;

vbox = elm_box_add(parent);
```
To create a horizontal box, create a box and set its orientation to horizontal with the elm_box_horizontal_set() function.

By default, the elm_box_add() function creates a vertical box.
```
Evas_Object *hbox;

hbox = elm_box_add(parent);
elm_box_horizontal_set(hbox, EINA_TRUE);
```

Note
The box is a non-graphical object. It adds no graphics to or around the objects it holds.

Adding Objects to the Box

You can add any Evas object to the box. In the following example, 5 button components are created and added to a box.

The most important function in the following code is elm_box_pack_end(), which is used to add the button component to the end of the box.

int i;
Evas_Object *bt;
Evas_Object *vbox;

vbox = elm_box_add(parent);

for (i = 0; i < 5; i++)
{
   char tmp[16];
   snprintf(tmp, sizeof(tmp), "Button %d", i);
   bt = elm_button_add(vbox);
   elm_object_text_set(bt, tmp);
   elm_box_pack_end(vbox, bt);
   evas_object_show(bt);
}
evas_object_show(vbox);

Setting the Padding

You can set the padding between the objects in a box by using the elm_box_padding_set() function. The padding values are the number of pixels horizontally and vertically.

elm_box_padding_set(vbox, 16, 64);

Handling the Element Size

You can add elements of different sizes to a container. For example, to add an image with a size of 128 x 128 pixels as the first element in a box, use the elm_box_pack_start() function:

ic = elm_icon_add(vbox);
elm_image_file_set(ic, "./c1.png", NULL);
evas_object_size_hint_min_set(ic, 128, 128);
evas_object_show(ic);
elm_box_pack_start(vbox, ic);

Evas is requested to set the size hint for the icon object by using the elm_object_size_hint_min_set() function. Evas tries to set the minimum size of this object accordingly.

If you want to create a homogeneous box, where all objects have the same height or width, depending on the orientation of the box, use the elm_box_homogeneous_set() function:

elm_box_homogeneous_set(vbox, EINA_TRUE);

Elementary sets the height of the tallest object as the height of all objects, or the width of the widest object as the width of all objects.

Setting the Alignment

You can set the alignment of UI components inside a box using the elm_box_align_set() function. The function takes 2 doubles values, a horizontal value and a vertical value, representing the percentage between 0 and 1.0 of the alignment in the horizontal and vertical axes. When you add a UI component with the elm_box_pack_end() or elm_box_pack_start() function, Elementary computes the global size of the box. If the global size is bigger than the size of the box's parent, the box takes up all the space occupied by the parent, and the size of the parent can be extended to hold the box. If the global size is smaller than the parent's size, the alignment values set the position of the box inside the parent.

Figure: Alignment

Alignment

To set the alignment to 0.8 vertically:

elm_box_align_set(vbox, 0.0, 0.8);

Note
Alignment only takes effect in the opposite direction than the one defined with the elm_box_horizontal_set() function.

The elm_box_layout_transition() function animates the motion of the objects in a box when switching from one layout to another.

Using Size Hints

Size hints are a set of functions that can be used on any Evas object. You request Evas to take care of various properties, and Evas honors these requests if it can. This is why they are called "hints".

You can also use the respective get functions to get the current hint values.

To set the size hints:

To set the minimum size of an object, use the evas_object_size_hint_min_set() function. Evas respects the minimum size you define for the object. For example, to set the minimum size of an icon to 64 x 64 pixels:
```
evas_object_size_hint_min_set(ic, 64, 64);
```
You can also set a maximum size for the same icon:
```
evas_object_size_hint_max_set(ic, 128, 128);
```
When you resize the parent of the icon, the minimum size of the parent is the minimum hint size of the icon, if there are no constraints to the parent. If you increase the parent size, the icon grows larger until its maximum hint size is reached. After this point, the icon does not grow any larger and there is empty space around the icon within the parent.
To fix the dimensional proportions of the object, use the evas_object_size_hint_aspect_set() function. When the aspect size hint is set, Evas tries to fix the dimensional proportions of the object. In the following example, the proportion of the icon is respected, and the width is the same as the height:
```
evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 1, 1);
```
In this example, the width is twice the height:
```
evas_object_size_hint_aspect_set(ic, EVAS_ASPECT_CONTROL_VERTICAL, 2, 1);
```
To change the alignment of the icon relative to the parent, use the evas_object_size_hint_align() function. By default, the icon is centered, so it is aligned with a value of 0.5. To change the alignment:
```
evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
```
In the above case, the icon is aligned to the bottom left corner of the parent.
To set a weight size hint, use the evas_object_size_hint_weight_set() function. By default, the weight is not set, so the size of the icon is the minimum size. But if you set this value to 1, the icon expands as much as it can inside the container.
```
evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
```

You can also use the alignment and weight hints together. In the following example, the icon takes up all the space in its parent:

evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);

Note
Except as noted, this content is licensed under LGPLv2.1+.