CODEWITHSUNDEEP
tizen-wearable-sdktizen-native-app
ossx
ossx

Reputation: 147

How to create a button with an icon iside?

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

Upvotes: 1

Views: 392

Answers (2)

stove
stove

Reputation: 576

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

enter image description here

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

Upvotes: 1

NeverHopeless
NeverHopeless

Reputation: 11233

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!

Upvotes: 0

Related Questions