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

Responses

0 Replies