I am trying to add a clickable image button that will eventually switch screens. However i don’t know how to implement this, i’m unable to make images appear on the screen. While following the tutorial at:

https://developer.tizen.org/ko/development/ui-practices/native-application/efl/ui-components/wearable-ui-components/button

i have tried adding an icon to a button. This is a segment of my code:

    //Button
	ad->button = elm_button_add(ad->box);
	evas_object_size_hint_weight_set(ad->button, EVAS_HINT_EXPAND,EVAS_HINT_EXPAND);
	evas_object_size_hint_align_set(ad->button, EVAS_HINT_FILL, 1);
	elm_object_text_set(ad->button, "Click Me!");
	elm_box_pack_end(ad->box, ad->button);

	Evas_Object *ic;
	ic = elm_icon_add(ad->button);
	elm_image_file_set(ic, "./basicui.png", NULL);
	elm_object_part_content_set(ad->button, "icon", ic);

	evas_object_show(ad->button);
	evas_object_show(ic);
	evas_object_show(ad->win);

When i run the programme without adding the image the “Click Me!” text is centered in the button, however once i add the icon, the text is offset, could this be a sign that something was added to the button? My only theory is that the image file path is wrong. If i simply enter “” , into the file path parameter the same offset effect occurs.

The basicui.png file is located both in the src file and parent file, BasicUI. How can i ensure the image is loaded? is there a better, more accurate, way to specify the file path?

Furthermore am i correct in thinking i can add an image to the box itself and implement a “clicked” smart callback to it to make an image button?

Any help is greatly appreciated.