Languages

Menu
Sites
Language
Color of progressbar (process/small style)

Hi,

How can I change the color of progress(process/small)?

Thank you,

 

Evas_Object *progress = elm_progressbar_add(layout);

elm_object_part_content_set(layout, "progress", progress);

elm_object_style_set(progress, "process/small");

List

Responses

6 Replies
woochan lee

We dont have easy way yet.

I hope it will be changed to simple thing since tizen 3.0

 

Anyway, my guide is theme customizing to support your request.  

please refer to theme customizing guide here :

https://developer.tizen.org/development/ui-practices/native-application/efl/ui-component-infrastructure-modules/customizing-components

 

Add attached edc code in your custom edc

the progressbar color will be shown with red color in your application.

 

I get below code in efl-theme-tizen/mobile/widget/progressbar.edc in public tizen_2.4 git.

then change only color and replace defined value.

 

I hope it helps

group { name: "elm/progressbar/horizontal/custom_progress";
   data.item: "vector_ux" "process_small";
   parts {
      part { name: "access";
         type: RECT;
         description { state: "default" 0.0;
            fixed: 1 1;
            color: 0 0 0 0;
         }
      }
      part { name: "elm.swallow.bar";
         type: SWALLOW;
         description { state: "default" 0.0;
            visible: 0;
         }
      }
      part { name: "clipper";
         type: RECT;
         mouse_events: 0;
         scale: 1;
         description { state: "default" 0.0;
            min: 44 44;
            max: 44 44;
            color: 255 0 0 255;
         }
      }
      part { name: "tizen_vg_shape1";
         type: SWALLOW;
         mouse_events: 0;
         scale: 1;
         clip_to: "clipper";
         description { state: "default" 0.0;
            rel1.to: "clipper";
            rel2.to: "clipper";
         }
      }

      part { name: "tizen_vg_shape2";
         type: SWALLOW;
         mouse_events: 0;
         scale: 1;
         clip_to: "tizen_vg_shape2_clipper";
         description { state: "default" 0.0;
            rel1.to: "clipper";
            rel2.to: "clipper";
         }
      }

      part { name: "tizen_vg_shape2_clipper";
         type: RECT;
         mouse_events: 0;
         scale: 1;
         description { state: "default" 0.0;
            color: 255 0 0 255;
         }
      }
      part { name: "tizen_vg_shape3";
         type: SWALLOW;
         mouse_events: 0;
         scale: 1;
         clip_to: "tizen_vg_shape3_clipper";
         description { state: "default" 0.0;
            rel1.to: "clipper";
            rel2.to: "clipper";
         }
      }
      part { name: "tizen_vg_shape3_clipper";
         type: RECT;
         mouse_events: 0;
         scale: 1;
         description { state: "default" 0.0;
            color: 255 0 0 255;
         }
      }
   }
   programs {
      program { name: "start_pulse";
         signal: "elm,state,pulse,start";
         source: "elm";
         action: STATE_SET "default" 0.0;
         target: "clipper";
      }
      program { name: "stop_pulse";
         signal: "elm,state,pulse,stop";
         source: "elm";
         action: ACTION_STOP;
         target: "start_pulse";
         after: "init_pulse";
      }
      program { name: "init_pulse";
         action: STATE_SET "default" 0.0;
         target: "clipper";
      }
   }
Kim

Hi,

Thank you for your solution.

I appended your edc code in my custom theme edc, but It's not working, it shows only horizontal default progressbar with below code.

elm_object_part_content_set(layout, "loading_progress", progress);
elm_object_theme_set(progress, get_theme());
Eina_Bool ret = elm_object_style_set(progress, "elm/progressbar/horizontal/custom_progress");
LOG_D("set progress style : %d",ret);

get_theme() returns parent theme edj file and it includes custom edc files.

apptheme = elm_theme_new();
elm_theme_ref_set(apptheme, NULL);
elm_theme_extension_add(apptheme, get_edj_path(EDC_THEME_MAIN));

EDC_THEME_MAIN(edje/widget_theme.edj)

collections
{
    #include "../../edc/theme/button.edc"
    #include "../../edc/theme/progressbar.edc"
}

I don't know what's the problem.

Thank you.

 

 

woochan lee

hello

 

can you try like that?

 

elm_object_style_set(progress, "custom_progress");
woochan lee

you don't have to call  below APIs

apptheme = elm_theme_new();
elm_theme_ref_set(apptheme, NULL);

 

Add below code before style set for progressbar.

/* Base Layout */
app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
/* Appends a theme extension to the list of extensions */
elm_theme_extension_add(NULL, edj_path);

 

hope you got solution.

Kim

Thank you Lee. But, It's not workning.

I think we used wrong progressbar theme. The style(process/small) is wearable UI.

I'm sorry I didn't tell you this sooner.

As far as I kown. "process_small" style is not included in wearable SDK.

 

Alex Dem

Hi,
fyi, of cause you could try to select the color with evas_object_color_set, but it will affect whole component (not sure that it is good way).
Alexey.