Custom button style with “press” effect and changable color

#define BUTTON_TEXT_CLASS                   "button_text"
#define BUTTON_COLOR_CLASS_NORMAL           "button_normal"
#define BUTTON_COLOR_CLASS_PRESSED          "button_pressed"
#define BUTTON_COLOR_CLASS_UNPRESSED        "button_unpressed"

#define BUTTON_CORNER_RADIUS "39"
#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


styles {
	style {
		name: "button_main";
		base: "font=Tizen:style=Light font_size=40 align=center color=#fafafa text_class="BUTTON_TEXT_CLASS;
	}
}

color_classes {
	color_class {
		name: BUTTON_COLOR_CLASS_NORMAL;
		color: 82 198 216 255;
	}
	color_class {
		name: BUTTON_COLOR_CLASS_PRESSED;
		color: 0 0 0 77;
	}
	color_class {
		name: BUTTON_COLOR_CLASS_UNPRESSED;
		color: 0 0 0 0;
	}
}

collections {
	base_scale: 2.6;

	plugins {
		plugin {
			name: "touch_sound";
			source: "feedback";
			param: "FEEDBACK_TYPE_SOUND FEEDBACK_PATTERN_TAP";
		}
	}

	group { "elm/button/base/custom";
		data.item: "vector_ux" "default";
		data.item: "corner_radius" BUTTON_CORNER_RADIUS;

		script {
		    public scale_part(part_id, state[], Float:ratio) {
        		new x, y, w, h;
        		get_geometry(part_id, x, y, w, h);
        		new Float:offset = (w < h ? w : h) * (1.0 - ratio) / 2;
        		new Float:rel_w = offset / w;
        		new Float:rel_h = offset / h;

        		custom_state(part_id, state, 0.0);
        		set_state_val(part_id, STATE_REL1, rel_w, rel_h);
        		set_state_val(part_id, STATE_REL2, 1.0 - rel_w, 1.0 - rel_h);
        		set_state(part_id, "custom", 0.0);
        	}
		}
		parts {
			swallow { "tizen_vg_shape"; scale;
				clip_to: "rect.bg";
			}
			rect { "rect.bg"; scale;
				desc { "default";
					rel1.to: "tizen_vg_shape";
					rel2.to: "tizen_vg_shape";
					color_class: BUTTON_COLOR_CLASS_NORMAL;
				}
			}
			swallow { "tizen_vg_shape2"; scale;
				clip_to: "rect.effect_bg";
			}
			rect { "rect.effect_bg"; scale;
				desc { "default";
					rel1.to: "tizen_vg_shape2";
					rel2.to: "tizen_vg_shape2";
					color_class: BUTTON_COLOR_CLASS_UNPRESSED;
				}
				desc { "pressed";
					rel1.to: "tizen_vg_shape2";
					rel2.to: "tizen_vg_shape2";
					color_class: BUTTON_COLOR_CLASS_PRESSED;
				}
			}
			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;
				}
			}
			textblock { "elm.text"; scale;
				desc { "default";
					align: 0.0 0.5;
					rel1 { relative: 1.0 0.0; to_x: "spacer.left"; }
					rel2 { relative: 0.0 1.0; to_x: "spacer.right"; }
					text {
						align: 0.5 0.5;
						style: "button_main";
					}
				}
			}
		}
		programs {
			program {
				name: "pressed";
				signal: "mouse,down,*";
				source: "*";
				script {
					scale_part(PART:"tizen_vg_shape2", "default", 0.7);
					set_state(PART:"rect.effect_bg", "pressed", 0.0);
				}
				after: "pressed_effect";
			}
			program {
				name: "unpressed";
				signal: "mouse,up,*";
				source: "*";
				script {
					new r, g, b, a;
					get_color_class(BUTTON_COLOR_CLASS_PRESSED, r, g, b, a);
					set_color_class(BUTTON_COLOR_CLASS_UNPRESSED, r, g, b, 0);
				}
				after: "unpressed_effect";
			}
			program {
				name: "pressed_effect";
				action: STATE_SET "default" 0.0;
				target: "tizen_vg_shape2";
				transition: TRANSITION_GLIDE(0.15);
			}
			program {
				name: "unpressed_effect";
				action: STATE_SET "default" 0.0;
				target: "rect.effect_bg";
				transition: TRANSITION_GLIDE(0.45);
			}
			program {
				name: "touch_sound";
				signal: "mouse,clicked,*";
				source: "*";
				action: RUN_PLUGIN "touch_sound";
			}
			program {
				name: "clicked";
				signal: "mouse,clicked,*";
				source: "*";
				action: SIGNAL_EMIT "elm,action,click" "";
			}
		}
	}
}

--------------------------------------------------------------------------------

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");

Evas_Object *edje = elm_layout_edje_get(button);
edje_object_color_class_set(edje, "button_normal", 0, 0, 0, 90,	0, 0, 0, 0, 0, 0, 0, 0);

Responses

0 Replies