Languages

Menu
Sites
Language
How to implement image button?

Hi all,

I want to know how to implement a image button.

When I implemented that by referencing Sample Native Project, the image was in blue circle alwalys. I want to diplay just image without blue circle.

I tried with Image widget not button widget, but Image widget did not allow 'pressed' callback.

My code is as follows

Evas_Object *btn = elm_button_add(parent_layout);
Evas_Object *icon = elm_image_add(parent_layout);

elm_image_file_set(icon, icon_id, NULL);
elm_image_resizable_set(icon, EINA_TRUE, EINA_TRUE);
elm_object_content_set(btn, icon);

evas_object_smart_callback_add(btn, "pressed", cb_pressed, info);
evas_object_smart_callback_add(btn, "clicked", cb_clicked, info);
evas_object_show(btn);

 

List

Responses

15 Replies
colin Rao

That's easy. Try the button widget sample code in IDE help

Section: 

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

Button Widget

KJ Lee

Hi,

Thank you for your answer.

The sample code which is in above link is approximately equal to my code.

When I use this way, image is in blue circle always.

What I want is just displaying the image without blue circle.

Is it impossible?

 

KJ Lee

You're right!

I missed calling 'elm_object_style_set' function.

My code is as follows

Evas_Object *btn = elm_button_add(parent_layout);
elm_object_style_set(btn,"icon_expand_add");

Evas_Object *icon = elm_icon_add(btn);
elm_image_file_set(icon, icon_id, NULL);
elm_object_part_content_set(btn, "icon", icon);
evas_object_show(btn);

 

KJ Lee

You're right!

I missed calling 'elm_object_style_set' function.

My code is as follows

Evas_Object *btn = elm_button_add(parent_layout);
elm_object_style_set(btn,"icon_expand_add");

Evas_Object *icon = elm_icon_add(btn);
elm_image_file_set(icon, icon_id, NULL);
elm_object_part_content_set(btn, "icon", icon);
evas_object_show(btn);

 

Alex Ashirov

Hi,

Does it really work now? As far as I understand “icon_expand_add” style means button with sign “+” and “icon_expand_delete” style means button with sign “-”. Am I wrong?

KJ Lee

Hi,Sorry, I attatched wrong code.My code is exactly as follows

Evas_Object *btn = elm_button_add(parent_layout);
elm_object_style_set(btn,"custom");

Evas_Object *icon = elm_icon_add(btn);
elm_image_file_set(icon, icon_id, NULL);
elm_image_resizable_set(btn, EINA_TRUE, EINA_TRUE);
elm_object_part_content_set(btn, "icon", icon);
evas_object_show(btn);

As far as I know, Button widget does not have 'custom' style.

I think Button may have empty button when unknown style is set.

I don't know where it is correct way.

Alex Ashirov

Hi,

According to my experiments if a wrong style name is provided then “default” is used.

Ashwini Kumar

Hi All,

 

I came across this thread.

I am new to Tizen App development.

I was looking at the Native samples in Tizen SDK. In these examples it does set the style of the Object.

All these styles are not there by default in EFL, but also there is no additional EDC file in the sample project.

Can you please help me in locating where all these styles come from? 

And where I can see the exhaustive list of all the styles supported by different Widgets in Tizen

It will be a great help.

 

Thanx,

Ashwini

Alex Ashirov

Hi,

Please take a look at this link:

https://developer.tizen.org/dev-guide/2.3.0/org.tizen.mobile.native.appprogramming/html/guide/ui/style_guide.htm

I am not sure that this list is comprehensive, but anyway I hope this helps.

Ashwini Kumar

Alex Thanks for the link.

But this lists the styles which are supported by defualt in EFL .

I want to know the styles which are extended/customized by Tizen Mobile.

As in the Native example for SNS app, it appears to have "2line.top", but the app doesn't have any separate edc file associated with it.

 

Thanks,

Ashwini

colin Rao

Did you means you want to read the source edc content of the default Tizen widgets. Hope this link can help you. :)

https://review.tizen.org/git/?p=platform/core/uifw/efl-theme-tizen.git;a=tree;f=themes/widgets;hb=HEAD

Ashwini Kumar

Hi,

This does help me to some extent.

In the Tizen mobile SDK, I see this file "tizen-2.3-mobile-WVGA.edj" which has the specified style ("2line.top") used in the

sample app. A "grep" on this file did say so.

The EDCs you shared doesn't contain this. Can't this source be reached or atleast a document relating to all the theme customizations done 

for Tizen mobile. A one place for all this docs?

 

Thanx,

Ashwini

Jean Yang

Hi,

There is way to implemented the icon button by give the fix size of icon, then you will not see the bule circle of button, hope this can help you. For example, if you icon style is circle:

 Evas_Object *bt = elm_button_add(parent);
 elm_object_style_set(bt, "circle");
 Evas_Object *ic = elm_icon_add(bt);
 app_get_resource("icon/arrow-left1.png", icon_path, 4096);
 elm_image_file_set(ic_back, icon_path, NULL);

 evas_object_size_hint_min_set(ic, 100, 100);
 evas_object_size_hint_max_set(ic, 100, 100);
 evas_object_size_hint_align_set(ic, EVAS_HINT_FILL, EVAS_HINT_FILL);
 evas_object_size_hint_weight_set(ic, EVAS_HINT_EXPAND,
 EVAS_HINT_EXPAND);
 evas_object_smart_callback_add(bt, "clicked", play_back_cb, ad);
 elm_object_part_content_set(bt, "icon", ic);
 evas_object_show(ic);
 evas_object_show(bt)

 

 

Ashwini Kumar

Hi Yang,

If we don't set the 'size_hint_min' or 'max', shouldn't the ICON resize to the available area on the button.

becos the hint_align anf hint_weight are set to FILL and EXPAND.

What I observed is, its not expanding to the size of the button

Thanx,

Ashwini

Jean Yang

Hi, Ashwini,

Yes, as you said, if we don's set the size_hint_min,max, the ICON will not resize to available area even if we set weight and algin to EXPAND and FILL. From my understanding for weight and Align they just give a hint to system they wants have EXPAND and FILL effect, but that is not a size enforcement in any way. Or I guess for the containor(button here) itself doesn't allow the other object full fill it.

Best Regards,

Jean