How to create a button with an icon iside?

Question

as stated in the title question, I want to create a button that uses an icon as background. I am using the wearable circle emulator with 360x360.

I tried a lot of code and examples but with no success.

Last code used:

static void
create_base_gui(appdata_s *ad)
{
    /* Window */
    ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
    elm_win_autodel_set(ad->win, EINA_TRUE);

    if (elm_win_wm_rotation_supported_get(ad->win)) 
    {
        int rots[4] = { 0, 90, 180, 270 };
        elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
    }

    eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);

    /*Box*/
    ad->box = elm_box_add(ad->win);
    evas_object_size_hint_weight_set(ad->box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    evas_object_show(ad->box);
    elm_win_resize_object_add(ad->win, ad->box);

    ad->button2 = elm_button_add(ad->box);
    elm_object_text_set(ad->button2, "Click me");
    evas_object_size_hint_weight_set(ad->button2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    evas_object_size_hint_align_set(ad->button2, EVAS_HINT_FILL, EVAS_HINT_FILL);

    ad->icon2 = elm_icon_add(ad->box);
    elm_image_file_set(ad->icon2, "C/Tizen/testWorkspace/BasicUI/shared/res/basicui.png", NULL);
    elm_image_resizable_set(ad->icon2, EINA_TRUE, EINA_TRUE);
    elm_object_part_content_set(ad->button2, "icon", ad->icon2);
    elm_object_content_set(ad->button2, ad->icon2);

    elm_box_pack_end(ad->box, ad->button2);

    evas_object_show(ad->button2);

    /* Show window after base gui is set up */
    evas_object_show(ad->win);
}

The button is created and it's clickable (no behaviour defined yet). The icon is not displayed.

What am I doing wrong ?

Thanks

PS: based on https://developer.tizen.org/ko/development/ui-practices/native-application/efl/ui-components/wearable-ui-components/creating-wearable-buttons?langredirect=1

and on the default BasicUI example

stove · Answer 1 · 2018-04-16T12:00:53.180

You need to declare the path from the tizen system point of view. The correct path is then

/opt/usr/apps/org.somepackage.yourapp/shared/res/youricon.png

needless to say that org.somepackage.yourapp is the package path to your app and youricon.png is your icon.

You can even check the location of your icon in the device manager. On the following image it is

/opt/usr/apps/org.example.settingsui/shared/res/settingsui.png

This is not imho very good solution, but there is a better way of doing this:

You can use either function

app_get_shared_resource_path();
app_get_resource_path();

You can write method like this:

static void
app_get_shared_resource(const char *file_in, char *path_out, int path_max)
{
    char *res_path = app_get_shared_resource_path();

    if (res_path) {
        snprintf(path_out, path_max, "%s%s", res_path, file_in);
        free(res_path);
    }
}

and then use it like this

char icon_path[128] = {0,};
app_get_shared_resource("youricon.png", icon_path, 128);
// create your button and stuff and then
elm_image_file_set(ic, icon_path, NULL);

All these are more valuable for tizen 2.3.X and lower. Since Tizen 2.4 you can use Resource Manager

This comes slightly later than expected. Nevertheless thank you for your input. — ossx, Apr 16 '18 at 06:46
@ossx I know its late for you, but I was dealing with the same problem and hoping this may help someone else in the future :) — stove, Apr 16 '18 at 12:01

score 0 · Answer 2 · answered Jun 10 '16 at 09:54

0

My guess is that the icon should be added on button control instead of box control.

So this:

ad->icon2 = elm_icon_add(ad->box);

should be:

ad->icon2 = elm_icon_add(ad->button);

Hope that helps!

answered Jun 10 '16 at 09:54

NeverHopeless

11,077
4
35
56

How to create a button with an icon iside?

2 Answers2