Change menu tab color

How-to
1

What LVGL version are you using?

8.2

What do you want to achieve?

Change the blue tab line and blue transparency color of a selected tab.
May be and a small shado effect into the tab instead of the full underline if possible.

What have you tried so far?

I played a bit with back ground and opa color without success.

image

Thanks a lot !

2

I had the same query a while ago,

In the end I used:

    tv = lv_tabview_create(scr, LV_DIR_TOP, HEADERHEIGHT-10);
    lv_obj_set_height(tv, 535);
    lv_obj_set_style_bg_color(tv, lv_color_hex(0x3C4454), 0);

    lv_obj_t * tab_btns = lv_tabview_get_tab_btns(tv);
    lv_obj_set_height(tab_btns, 60);
    lv_obj_set_style_bg_color(tab_btns, lv_color_hex(MAIN_BG_COLOUR), 0);
    lv_obj_set_style_bg_color(tab_btns, lv_color_hex(MAIN_BG_COLOUR), LV_PART_ITEMS | LV_STATE_CHECKED);
    lv_obj_set_style_text_color(tab_btns, lv_color_hex(0xffffff), LV_PART_ITEMS | LV_STATE_CHECKED);
    lv_obj_set_style_border_color(tab_btns, lv_color_hex(0x01a2b1), LV_PART_ITEMS | LV_STATE_CHECKED);
    
    lv_obj_set_style_outline_width(tab_btns, 0, LV_STATE_FOCUS_KEY);
    lv_obj_set_style_outline_width(tab_btns, 0, LV_PART_ITEMS | LV_STATE_FOCUS_KEY);
    lv_obj_set_style_text_font(tab_btns, &lv_font_montserrat_28, LV_PART_MAIN);

Hope that helps

3

Thanks a lot !

We helped me a lot with your code.

The only stuff impossible i think is to have a gradient effect on the border but it’s ok :slight_smile: