Background
PUBLISHED
The background UI component is used to set a solid background decoration to a window or a container object. It works like an image, but has some background-specific properties. It can be set to a tiled, centered, scaled, or stretched mode. The background is the most simple UI component in that it emits no signals. For more information, see the Background [1] API.
This feature is supported in mobile applications only.
Basic Usage
To use a background component in your application:
- Add a background with the
elm_bg_add()
function:Evas_Object *bg; bg = elm_bg_add(parent);
- Set the appearance of the background:
- Set a color to the background using the
elm_bg_color_set()
function:elm_bg_color_set(bg, 64, 127, 256);
- Set an Edje group as a background using the
elm_bg_file_set()
function:
elm_bg_file_set(bg, "/path/to/the/edje", "group name");
- Set an image file as a background using the
elm_bg_file_set()
function.For an image background, you can set additional options.
elm_bg_file_set(bg, "/path/to/the/image", NULL);
- Set a color to the background using the
- Set a swallow part:
/* Load content at the topmost layer of the background */ elm_object_content_set(bg, evas_object);
The following example shows a simple use case of the background component.
Example: Background use case
Evas_Object *bg; Evas_Object *box; Evas_Object *label; Evas_Object *nfl; /* Starting right after the basic EFL UI layout code [2] */ /* (win - conformant - naviframe) */ /* Add a background object */ bg = elm_bg_add(nf); /* Set a color (R:64, G:127, B:256) */ elm_bg_color_set(bg, 64, 127, 256); /* Add a box and set it as the background content */ box = elm_box_add(bg); elm_object_content_set(bg, box); label = elm_label_add(box); elm_object_text_set(label, "overlay swallow part"); evas_object_show(label); elm_box_pack_end(box, label); elm_naviframe_item_push(nf, "Background", NULL, NULL, bg, NULL); |
Options
When you set an image, you can set a few background options using the elm_bg_option_set()
function.
The following modes are available:
ELM_BG_OPTION_CENTER
: Centers the background image.ELM_BG_OPTION_SCALE
: Scales the background image, retaining the aspect ratio.ELM_BG_OPTION_STRETCH
: Stretches the background image to fill the UI component's area.ELM_BG_OPTION_TILE
: Tiles the background image at its original size.
Table: Background options
ELM_BG_OPTION_CENTER |
ELM_BG_OPTION_SCALE |
---|---|
ELM_BG_OPTION_STRETCH |
ELM_BG_OPTION_TILE |
Styles
The following table lists the available component styles.
Table: Background styles
Style | Swallow part | Description |
---|---|---|
default |
elm.swallow.content
|
Default background style with an overlay swallow part on the top. |
transparent |
elm.swallow.content
|
Transparent background style with overlay swallow part on the top. |