How to set background colour of selected item in a list

How-to
1

Description

I would like to set the background colour of a list

What MCU/Processor/Board and compiler are you using?

Simlator

What LVGL version are you using?

8.1

What do you want to achieve?

lv_dropdown_get_list(

What have you tried so far?

  lv_obj_t * list = lv_dropdown_get_list(roller_temp); /*Get the list*/
  lv_obj_set_style_bg_color(list, lv_color_hex(MAIN_BG_COLOUR), LV_PART_MAIN);
  lv_obj_set_style_border_color(list, MAIN_BORDER_COLOUR, LV_PART_MAIN);
  lv_obj_set_style_bg_color(list, lv_color_hex(0x01a2b1), LV_PART_INDICATOR | LV_PART_SELECTED);
  lv_obj_set_style_bg_color(list, lv_color_hex(0x01a2b1), LV_PART_MAIN | LV_PART_SELECTED);
  lv_obj_set_style_bg_color(list, lv_color_hex(0x01a2b1), LV_PART_SELECTED);
  lv_obj_set_style_bg_color(list, lv_color_hex(0x01a2b1), LV_PART_INDICATOR);
  lv_obj_set_style_bg_color(list, lv_color_hex(0x01a2b1), LV_PART_INDICATOR | LV_PART_SELECTED);
  lv_obj_set_style_bg_color(list, lv_color_hex(0x01a2b1), LV_PART_ITEMS | LV_PART_SELECTED);

Code to reproduce

Above

Screenshot and/or video

image
image1025×634 29.1 KB

Any help would be much appreciated!

2

@bader any ideas on this one?

Thanks!

3

Yes, it can be done by using LV_PART_SELECTED | LV_STATE_CHECKED in lv_obj_set_style_bg_color function. Something like this:

lv_obj_t* list = lv_dropdown_get_list(dd); /*Get the list*/
lv_obj_set_style_bg_color(list, lv_palette_main(LV_PALETTE_INDIGO), LV_PART_SELECTED | LV_STATE_CHECKED);

I found it in lv_theme_default.c file, where all styles are applied there.
https://github.com/lvgl/lvgl/blob/d56ce08782852ff274141f69271464da87de96bc/src/extra/themes/default/lv_theme_default.c#L961

1 Like
4

Awesome!!!

Thank you so much!

It now looks like it should:

image
image1027×637 30 KB

Thanks again!

lv_obj_set_style_bg_color(list, lv_color_hex(0x01a2b1), LV_PART_SELECTED | LV_STATE_CHECKED);
5

Good job, you are so welcome!