Languages

Menu
Sites
Language
Adding Background Image to Box

Hi All,

I am trying to add background image to a Box container.

But with all option set using below code I am not able to see any background image after installing App.

    Evas_Object *image_box = elm_box_add(mbox);
    elm_box_horizontal_set(image_box, EINA_FALSE);
    elm_box_padding_set(image_box, 16, 10);
    evas_object_size_hint_weight_set(image_box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    evas_object_size_hint_align_set(image_box, EVAS_HINT_FILL, EVAS_HINT_FILL);

    Evas_Object *img_bg = elm_bg_add(image_box);
    char bg_path[200] = {0};
    sprintf(bg_path, "%s%s", app_get_resource_path(), "img/headerbg_portrait.png");
    elm_bg_file_set(img_bg, bg_path, NULL);
    elm_bg_color_set(img_bg, 0,40, 40);
    elm_bg_option_set(img_bg, ELM_BG_OPTION_SCALE);
    evas_object_size_hint_weight_set(img_bg, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    evas_object_size_hint_align_set(img_bg, EVAS_HINT_FILL, EVAS_HINT_FILL);
    evas_object_show(img_bg);
    elm_object_part_content_set(image_box, "elm.swallow.background", img_bg);
    elm_box_pack_end(mbox, image_box);
    evas_object_show(image_box);

 

Is there anything wrong in my code? or Am I missing to use any APIs?

Thank you.

View Selected Answer
List

Responses

9 Replies
colin Rao

I think the box hasn't such part "elm.swallow.background" by default. I've find some backgroud layout guide in the help doc. And taken a try as the guide, but failed.

Paste here for you reference, and many thanks for any guys update on this issue.

Tizen Mobile Native App Programming > Programming Guide > UI: Creating the Application UI > Widgets > Container Widgets > Layout Container

Alex Ashirov

Hi,

It seems that you are using .edc file. If so, could you please share it as well?

Dharmesh Guna

No I am not using .edc file.

Alex Ashirov

Hi,

Then, as mentioned above there is no such part "elm.swallow.background” for box widget by default.

Also, you can check value returned by elm_bg_file_set(). It should be true on success.

Dharmesh Guna

Hi Alex,

Here in my case, elm_bg_file_set() is returning true.

Thank you.

Vikram

Hi Dharmesh

I can see the image as below code, it's similar with your sample code. But it's not the real background image of the box, if you put more widget to the box via eml_box_pack_end,  the background image won't expand to full filling the whole space of box, it will share the box space with other widgets. You can try these code to see the acctually result. 

Also, I don't find the tips about how to set backgroud of box on the IDE help. 

You should to define a .edc layout group for your box and apply it to the box. And in the .edc file, you can define the bg part to full fill the box, and add many swallow parts for handle other widgets which coordinates is relative to the bg part.

    Evas_Object *image_box = elm_box_add(ad->conform);
    elm_box_horizontal_set(image_box, EINA_FALSE);
    elm_box_padding_set(image_box, 16, 10);
    evas_object_size_hint_weight_set(image_box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    evas_object_size_hint_align_set(image_box, EVAS_HINT_FILL, EVAS_HINT_FILL);
    evas_object_show(image_box);

    Evas_Object *img_bg = elm_bg_add(image_box);
    elm_bg_file_set(img_bg, "/opt/usr/apps/org.tizen.test/res/images/mango.jpg", NULL);
    elm_bg_option_set(img_bg, ELM_BG_OPTION_SCALE);
    evas_object_size_hint_weight_set(img_bg, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    evas_object_size_hint_align_set(img_bg, EVAS_HINT_FILL, EVAS_HINT_FILL);
    evas_object_show(img_bg);
    elm_box_pack_end(image_box, img_bg);

    /* Title Label*/
    Evas_Object *title_label = elm_label_add(image_box);
	elm_object_text_set(title_label, "Title Label");
	evas_object_size_hint_align_set(title_label, EVAS_HINT_FILL, EVAS_HINT_FILL);
	evas_object_show(title_label);
	elm_box_pack_end(image_box, title_label);

    elm_object_content_set(ad->conform, image_box);

 

Dharmesh Guna

Hi Vikram,

Thanks for clerifying about bg widget usage.

Mark as answer
colin Rao

Hi Dharmesh

Try below samply code, you can add a bg widget as the only sub-item of the main box as a background. And set the front view as the sub-item of bg widget via its "overlay" part. Please check the Background Widget section on IDE help Tizen Mobile Native App Programming > Programming Guide > UI: Creating the Application UI > Widgets

    Evas_Object *main_box = elm_box_add(ad->conform);
    evas_object_size_hint_weight_set(main_box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    evas_object_size_hint_align_set(main_box, EVAS_HINT_FILL, EVAS_HINT_FILL);
    evas_object_show(main_box);

    /* Creating a background */
    Evas_Object *bg = elm_bg_add(main_box);
    evas_object_size_hint_weight_set(bg, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    evas_object_size_hint_align_set(bg, EVAS_HINT_FILL, EVAS_HINT_FILL);

    /* Use red color for background */
    //elm_bg_color_set(bg, 0xFF, 0x00, 0x00);
    /* Set a file on the disk as background image */
    elm_bg_file_set(bg, "/opt/usr/apps/org.tizen.test/res/images/mango.jpg", NULL);
    /* Set an edje group as background image */
    //elm_bg_file_set(bg, "/path/to/the/edje", "edje_group");

    elm_bg_option_set(bg, ELM_BG_OPTION_STRETCH);
    evas_object_show(bg);

    /* Title Label*/
    Evas_Object *label = elm_label_add(main_box);
    elm_object_text_set(label, "Title Label");
    evas_object_show(label);

    elm_object_part_content_set(bg, "overlay", label);
    elm_box_pack_end(main_box, bg);

    elm_object_content_set(ad->conform, main_box);

 

Dharmesh Guna

Hi Colin,

Thank you for the great explanation. It solved my problem.

It is only working if I add bg in main-box. In the case when I need background to child box it is not working.

But for now my problem is solved.

Thank you.