Rectangle Button with click effect
Simple rectangle button - improved code from https://developer.tizen.org/community/code-snippet/native-code-snippet/custom-button-style-press-effect-and-changable-color
#define WHITE "white"
#define SEMI_WHITE "semi_transparent_white"
#define TRANSPARENT "transparent"
#define BLACK "black"
#define BUTTON_DEFAULT_H 78
#define BUTTON_DEFAULT_TEXT_LR 32
#define TRANSITION_GLIDE(duration) CUBIC_BEZIER (duration) 0.25 0.46 0.45 1.0
color_classes {
color_class {
name: TRANSPARENT;
color: 0 0 0 0;
}
color_class {
name: BLACK;
color: 0 0 0 255;
}
color_class {
name: WHITE;
color: 255 255 255 255;
}
color_class {
name: SEMI_WHITE;
color: 225 225 225 255;
}
}
collections {
base_scale: 1.0;
group { "elm/button/base/custom";
data.item: "vector_ux" "default";
data.item: "corner_radius" 50;
script {
public set_up() {
set_state(PART:"center", "default", 0.0);
set_state(PART:"elm.text", "default", 0.0);
}
}
parts {
swallow { "shape"; scale;
}
rect { "base"; scale;
desc { "default";
rel1.to: "shape";
rel2.to: "shape";
color_class: WHITE;
}
}
swallow { "elm.swallow.background"; scale;
nomouse;
desc { "default";
rel1.to: "base";
rel2.to: "base";
visible: 1;
}
}
rect { "center"; scale;
desc { "default";
rel1.offset: 5 5;
rel2.offset: -5 -5;
color_class: BLACK;
}
desc { "pressed";
inherit: "default";
color_class: WHITE;
}
}
spacer { "spacer.base"; scale;
desc { "default";
min: 0 BUTTON_DEFAULT_H;
}
}
spacer { "spacer.left"; scale;
desc { "default";
fixed: 1 0;
min: BUTTON_DEFAULT_TEXT_LR 0;
align: 0.0 0.5;
rel1.relative: 0.0 0.0;
rel2.relative: 0.0 1.0;
}
}
spacer { "spacer.right"; scale;
desc { "default";
fixed: 1 0;
min: BUTTON_DEFAULT_TEXT_LR 0;
align: 1.0 0.5;
rel1.relative: 1.0 0.0;
rel2.relative: 1.0 1.0;
}
}
text { "elm.text";
nomouse;
desc { "default";
rel1 { relative: 1.0 0.0; to_x: "spacer.left"; }
rel2 { relative: 0.0 1.0; to_x: "spacer.right"; }
color_class: WHITE;
text {
font: FN;
size: 40;
align: 0.5 0.5;
text_class: "button_text";
}
visible: 1;
fixed: 0 0;
text.min: 1 1;
text.ellipsis: -1;
}
desc { "pressed";
inherit: "default";
color_class: BLACK;
}
}
rect { "event";
desc { "default";
color: 0 0 0 0;
}
desc { "disabled";
inherit: "default";
visible: 0;
}
}
}
programs {
// click beh
program {
signal: "mouse,down,1";
source: "event";
action: SIGNAL_EMIT "elm,action,press" "elm";
after: "button_click_anim";
}
program { "button_click_anim";
script {
set_state(PART:"center", "pressed", 0.0);
set_state(PART:"elm.text", "pressed", 0.0);
}
}
// unclick beh
program { "button_unclick";
signal: "mouse,up,1";
source: "event";
action: SIGNAL_EMIT "elm,action,unpress" "elm";
after: "button_unclick_anim";
}
program { "button_unclick_anim";
script {
set_state(PART:"center", "default", 0.0);
set_state(PART:"elm.text", "default", 0.0);
}
}
// signal
program {
signal: "mouse,clicked,1";
source: "event";
action: SIGNAL_EMIT "elm,action,click" "elm";
}
}
}
}
--------------------------------------------------------------------------------
char *path = app_get_resource_path();
char buffer[PATH_MAX];
snprintf(buffer, sizeof(buffer), "%s%s", path, "custom_button.edj");
free(path);
elm_theme_extension_add(nullptr, buffer);
Evas_Object *button = elm_button_add(parent);
elm_object_style_set(button, "custom");
elm_object_text_set(button, "Button");