How to resize Icons in Tizen (Wearable)

Question

I am trying to make a simple app for my Galaxy Watch which runs on Tizen. All I want to do for now is to display a white screen with two circular buttons on the top and bottom (plus and minus buttons). I seem to have the white screen part settled. But, when I try to display the icon, the icon fills the whole window. I need help, please.

(PS: I have some knowledge on Android app development. But, Tizen is a completely different ball game. I know C & C++ to a certain extent)

    Evas_Object *bg = elm_bg_add(ad->win);
    elm_bg_color_set(bg, 255, 233, 26);
    evas_object_size_hint_weight_set(bg, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    elm_win_resize_object_add(ad->win, bg);
    evas_object_show(bg);

    /* Plus Icon */
    Evas_Object *plusIcon = elm_icon_add(bg);
    elm_image_file_set(plusIcon, "/opt/usr/apps/org.example.basicui/res/images/plus.png", NULL);
    elm_object_content_set(bg, plusIcon);

The Tizen documentation is really confusing and lacklustre (unlike Android's). Also, I can't find any wholesome tutorial regarding Tizen Native Wearable App Development. If you know of any such tutorial, please share it with me.

Thanks again.

score 1 · Answer 1 · answered May 29 '19 at 04:55

"/opt/usr/apps/org.example.basicui/res/images/plus.png"

is there plus.png file in this path?

if(!elm_image_file_set(plusIcon,...
  elm_bg_color_set(bg, 255, 0, 0);

If there is no file, the background will be red.

If you want to create a clickable widget, you can use elm_button. Make the button's style "circle". Then create elm_image and set it to elm_object_content_set(). However, this style may vary depending on your tizen version.

So I recommend the following way.

/*BG - box(container) - image(clicked event)
                        image(clicked event)*/


Evas_Object *bg, box, *image;
// Make BG
bg = elm_bg_add(parent); 
elm_bg_color_set(bg, 255, 233, 26);
evas_object_size_hint_weight_set(bg, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_show(bg);

// Make container
box = elm_box_add(bg);
evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
evas_object_show(box);

// Make image
image = elm_image_add(box);
if(!elm_image_file_set(image, /* Image path*/, NULL))
  return;
evas_object_size_hint_min_set(image, 100, 100);  // minimum size
evas_object_show(image);
evas_object_smart_callback_add(image, "clicked",  /* event callback function */, NULL);
elm_box_pack_end(box, image);

image = elm_image_add(box);
if(!elm_image_file_set(image, /* Image path*/, NULL))
  return;
evas_object_size_hint_min_set(image, 100, 100); // minimum size
evas_object_smart_callback_add(image, "clicked", /* event callback function */, NULL);
evas_object_show(image);
elm_box_pack_end(box, image);

elm_object_content_set(bg, box);

elm_win_resize_object_add(ad->win, bg);

elm_box https://developer.tizen.org/ko/development/guides/native-application/user-interface/efl/building-ui-layouts/box

elm_image https://developer.tizen.org/ko/development/guides/native-application/user-interface/efl/ui-components/wearable-ui-components/image

Thank you so much. I would really appreciate if you can help me with this: [XML](https://stackoverflow.com/questions/56341019/how-to-add-icon-to-button-tizen-wearable-equivalent-of-relativelayout-in-tiz) — Edwin Youbirdmurali, May 29 '19 at 07:02

How to resize Icons in Tizen (Wearable)

1 Answers1