How to change bar direction

static lv_style_t style_bg;
static lv_style_t style_indic;

lv_style_copy(&style_bg, &lv_style_pretty);
style_bg.body.main_color =  lv_color_make(0x48, 0x5C, 0x70);
style_bg.body.grad_color =  lv_color_make(0x53, 0x7A, 0x88);
style_bg.body.radius = 0;
style_bg.body.border.color = LV_COLOR_WHITE;

lv_style_copy(&style_indic, &lv_style_pretty_color);
style_indic.body.main_color =  lv_color_make(0x0D, 0xF1, 0x2D);
style_indic.body.grad_color =  lv_color_make(0x0D, 0xF1, 0x2D);
style_indic.body.radius = 0;
style_indic.body.shadow.width = 1;
style_indic.body.shadow.color = style_indic.body.main_color;
style_indic.body.padding.left = 1;
style_indic.body.padding.right = 1;
style_indic.body.padding.top = 1;
style_indic.body.padding.bottom = 1;

lv_obj_t * bar = lv_bar_create(page, NULL);
lv_bar_set_style(bar, LV_SLIDER_STYLE_BG, &style_bg);
lv_bar_set_style(bar, LV_SLIDER_STYLE_INDIC,&style_indic);
lv_obj_set_width(bar, LV_DPI * 2);
lv_obj_set_height(bar,50);
lv_obj_align(bar, NULL, LV_ALIGN_CENTER, 0, 0);
lv_bar_set_range(bar, 0, 100);
lv_bar_set_value(bar,50,LV_ANIM_OFF);

How to display it vertically instead of horizontally

Ensure that the width is smaller than the height.

1 Like

It’s perfect,thank you

Hi, I’ve been looking at options for showing a container level filling and lowering. I removed the radius from the bar indicator and the bar works perfectly, with the exception of the width vs height requirement. The bar needs to stay vertical, but the area to fill is wider than it is tall. Is it possible to change the bar to default to vertical regardless? Horizontal bars won’t be used on this particular program. Thanks!