Languages

Menu
Sites
Language
How to create a transparent button

Hi all,

I want to create a button with image, that is transparent. 

This is how the button is defined:

void set_object_image(Evas_Object *object, char *res_path, char *filename){
    Evas_Object *img;
	img = elm_image_add(object);
	char buf[PATH_MAX];
	snprintf(ICON_DIR, PATH_MAX, "%s", res_path);
	snprintf(buf, sizeof(buf), "%s/%s", ICON_DIR, filename);
	dlog_print(DLOG_INFO, APP_TAG, buf);
	elm_image_file_set(img, buf, NULL);
	elm_object_part_content_set(object, "icon", img);
	elm_win_alpha_set(object, EINA_TRUE);
}

i already tried to add an alpha channel, but without success. (even if i think that this function has to be used with an object).

 

List

Responses

16 Replies
Ivan Gualandri

I found it by myself, i can edit the style using the component designer. The only problem is that i can't extend a style i can only modify the existing styles (circle, default, etc). It asks for a name, after i entered it and pressed ok, it doesn't do anything, i was expecting that it should open the component designer. Anyone can help me with this problem?

Shaswati Saha

Hello Ivan Gualandri, 

Did you follow this tutorial to create new custom style using component designer?

Ivan Gualandri

Hi Shaswati, 

no i didn't follow that tutorial. 

Anyway the problem is starting the Component Designer. 

I mean if i click on Style and then press Modify one of the existing styles (from the dialog on the slide 41), then it start the component designer and i can modify it. 

But if i press the Extend button, i expect (maybe i'm wrong?) that it  open the component designer, to create a new style starting from the selected one. 

But what happens is that it ask for a name, and as soon as i press ok, nothing happen.

Maybe i'm doing something wrong?

Shaswati Saha

Unfortunately, I'm not getting that more option button (cue button) beside Style option as shown in slide 41. See below picture

From where did to find that popup shown in slide 41? Would you please help me with this?

Ivan Gualandri

Hi, 

it looks strange. I tried to add a genlist and the style button is there:

This is what i see. Could be a problem with your installation?

Shaswati Saha

What's your Tizen Studio version?

Ivan Gualandri

I'm running version 2.0 (but this button was available also in version 1.4)

Shaswati Saha

Did you just open layout.xml file in UI Builder perspective, or anything else?

Ivan Gualandri

Yes.

Shaswati Saha

Hi Ivan Gualandri,

I think, it would be better to think about EDC programming apart from using UI Builder. Would you please go through the answer in this link? I guess it contains an answer to similar requirement as your's.

Ivan Gualandri

Hi Shaswati,

i prefer to rely on UI Builder when possible, because it make ui design faster. Anyway in that case i understood that maybe it could be better to switch to EDC programming, or anyway customizing the component. So i tried to customize the component style, and i managed to do it with the Component Design Button. 

I'm not sure i know how to do it with EDC only (if you know and you can help me undestanding how, it would be appreciated), anyway the problem is that my idea was, instead of changing one of the default styles for the component, create a new one, extending one of the existing. But when i try to create it, the ui builder ask for a name, then it doesn't open the Component Designer. It opens only if i try to modify an existing style. Is that normal?

And apparently i'm not able to run it from outside Tizen Studio. 

 

Shaswati Saha

Unfortunately, I couldn't find any information or documentation about that on web and that's why I can't ensure you whether it's normal or not. For now, you may try following the link I've shared in my previous post. Meanwhile, I'll try to reach you if I could manage a better way.

Shaswati Saha

Will this type of button (attached image below) do your work? Please let me know.

Shaswati Saha

Hi Ivan,

What's the status right now? Please let me know.

Ivan Gualandri

Hi Shaswati, 

sorry but last week i didn't had time to check replies. 

Anyway the idea is having a customized button, just like in your example (except that in my case what i need is an image, to be trasparent circular and few other things). 

But yeah the idea i suppose is to have it customized.

Thanks

Shaswati Saha

In that case you may try using my code, it'll provide you a view with transparent custom buttom. Have a look below:

EDC code:

#define ICON_NORMAL green.png
#define ICON_PRESSED red.png
#define BUTTON_MIN_WIDTH 50
#define BUTTON_MIN_HEIGHT 50
#define BUTTON_PADDING_LEFT_RIGHT 8
#define BUTTON_ICON_HEIGHT 40
#define BUTTON_ICON_WIDTH 40
#define BUTTON_TEXT_SIZE 30

#define STYLE_TAGS \
   tag:  "br" "\n";\
   tag:  "ps" "ps";\
   tag:  "tab" "\t";\
   tag:  "b" "+ font_weight=Bold";

styles {
   style { name: "button_main";
      base: "font=Tizen:style=Regular font_size="BUTTON_TEXT_SIZE" color=#ffffff ellipsis=1.0";
      STYLE_TAGS
   }
   style { name: "button_main_dim";
      base: "font=Tizen:style=Regular font_size="BUTTON_TEXT_SIZE" color=#ffffff ellipsis=1.0";
      STYLE_TAGS
   }
   style { name: "button_main_press";
      base: "font=Tizen:style=Regular font_size="BUTTON_TEXT_SIZE" color=#ffffff ellipsis=1.0";
      STYLE_TAGS
   }
}
collections {
   base_scale: 1.8;
   group { name: "elm/button/base/customized";
      script {
         public mouse_down = 0;
         public multi_down = 0;
      }
      images {
         image: ICON_NORMAL COMP;
         image: ICON_PRESSED COMP;
      }
      parts {
         part { name: "base";
            scale: 1;
            description { state: "default" 0.0;
               min: BUTTON_MIN_WIDTH BUTTON_MIN_HEIGHT;
               image.normal: ICON_NORMAL;
            }
            description { state: "pressed" 0.0;
               inherit: "default" 0.0;
               visible: 0 ;
            }
         }
         part { name: "bg";
            scale: 1;
            description { state: "default" 0.0;
               rel1.to: "base";
               rel2.to: "base";
               image.normal: ICON_NORMAL;
            }
            description { state: "pressed" 0.0;
               inherit: "default" 0.0;
               image.normal: ICON_PRESSED;
            }
            description { state: "disabled" 0.0;
               inherit: "default" 0.0;
               visible:0;
            }
         }
         part { name: "padding_left_top";
            type: SPACER;
            scale: 1;
            description { state: "default" 0.0;
               align: 0.0 0.0;
               rel2.relative: 0.0 0.0;
               min: BUTTON_PADDING_LEFT_RIGHT 0;
               fixed: 1 1;
            }
         }
         part { name: "padding_right_bottom";
            type: SPACER;
            scale: 1;
            description { state: "default" 0.0;
               align: 1.0 1.0;
               rel1.relative: 1.0 1.0;
               min: BUTTON_PADDING_LEFT_RIGHT 0;
               fixed: 1 1;
            }
         }
         part { name: "icon_rect";
            type: SPACER;
            scale: 1;
            description { state: "default" 0.0;
               align: 0.0 0.5;
               rel1 {
                  relative: 1.0 1.0;
                  to: "padding_left_top";
               }
               rel2 {
                  relative: 1.0 0.0;
                  to_x: "padding_left_top";
                  to_y: "padding_right_bottom";
               }
               min: 0 0;
               fixed: 1 1;
            }
            description { state: "visible" 0.0;
               inherit: "default" 0.0;
               min: BUTTON_ICON_HEIGHT BUTTON_ICON_WIDTH;
               max: BUTTON_ICON_HEIGHT BUTTON_ICON_WIDTH;
               fixed: 1 1;
            }
         }
         part { name: "elm.swallow.content";
            type: SWALLOW;
            scale: 1;
            description { state: "default" 0.0;
               visible: 0;
               align: 0.0 0.5;
               rel1 {
                  relative: 1.0 1.0;
                  to: "padding_left_top";
               }
               rel2 {
                  relative: 1.0 0.0;
                  to_x: "padding_left_top";
                  to_y: "padding_right_bottom";
               }
               fixed: 1 0;
            }
            description { state: "visible" 0.0;
               fixed: 1 1;
               min: BUTTON_ICON_HEIGHT BUTTON_ICON_WIDTH;
               align: 1.0 0.5;
               rel1 {
                  relative: 0.0 1.0;
                  to_x: "elm.text";
                  to_y: "padding_left_top";
               }
               rel2 {
                  relative: 0.0 0.0;
                  to_x: "elm.text";
                  to_y: "padding_right_bottom";
               }
            }
            description { state: "icononly" 0.0;
               min: BUTTON_ICON_HEIGHT BUTTON_ICON_WIDTH;
            }
         }
         part { name: "elm.text";
            type: TEXTBLOCK;
            mouse_events: 0;
            scale: 1;
            description { state: "default" 0.0;
               fixed: 1 1;
               rel1 {
                  relative: 1.0 1.0;
                  to_x: "icon_rect";
                  to_y: "padding_left_top";
               }
               rel2 {
                  relative: 0.0 0.0;
                  to: "padding_right_bottom";
               }
               text {
                  max: 1 0;
                  style: "button_main";
               }
            }
            description { state: "pressed" 0.0;
               inherit: "default" 0.0;
               text.style: "button_main_press";
            }
            description { state: "disabled" 0.0;
               inherit: "default" 0.0;
               text.style: "button_main_dim";
            }
            description { state: "invisible" 0.0;
               inherit: "default" 0.0;
               visible: 0;
            }
         }
         part { name: "event";
            scale: 1;
            type: RECT;
            description { state: "default" 0.0;
               rel1.to: "base";
               rel2.to: "base";
               color: 0 0 0 0;
            }
         }
      }
      programs {
         program { name: "clicked";
            signal: "mouse,clicked,1";
            source: "event";
            script {
               new st[31];
               new Float:vl;
               if (get_int(multi_down) == 0) {
                  get_state(PART:"bg", st, 30, vl);
                  if (strcmp(st, "disabled")) {
                     emit("elm,action,click", "");
                  }
               }
            }
         }
      }
   }
}

C code:

char edj_path[PATH_MAX] = "";
app_get_resource("edje/custom_button.edj", edj_path, (int)PATH_MAX);
elm_theme_extension_add(NULL, edj_path);

Evas_Object *custom_button = elm_button_add(ad->conform);
elm_object_style_set(custom_button, "customized");
elm_object_text_set(custom_button, "Custom Button");
evas_object_size_hint_weight_set(custom_button, 1.0, 0.0);
evas_object_size_hint_align_set(custom_button, -1.0, 0.0);
evas_object_show(custom_button);

Hope, it'll help you.