Lv_tabview tab button styling

Description

How to add a second state (adding an extra style conditionally based on a state) for a lv_tabview tab button.

What LVGL version are you using?

v8.2.0

What do you want to achieve?

I’m using lv_tabview object on LvGL v8.2. I have made a custom style for the LV_STATE_CHECKED state, to add a blue line under the button. This work well.

I need a second style, which should be applied on a specific tab. What I have in mind is to add another colored line on the top border of a button.

To add a line on the bottom border of the button, the code is the following :

    style_init_reset(&styles->tab_btn);
    lv_style_set_border_color(&styles->tab_btn, CY_BLUE);
    lv_style_set_border_width(&styles->tab_btn, 4);
    lv_style_set_border_side(&styles->tab_btn, LV_BORDER_SIDE_BOTTOM);

(...)

#if LV_USE_TABVIEW
        if(lv_obj_check_type(lv_obj_get_parent(obj), &lv_tabview_class)) {
(...)
            lv_obj_add_style(obj, &styles->tab_btn, LV_PART_ITEMS | LV_STATE_CHECKED);
            return;
        }
#endif

What have you tried so far?

For the second state, I tried to use the LV_STATE_USER_1 state, but without success. I didn’t find any example using this state.

Basically, what I did is :

    style_init_reset(&styles->tab_focus);
    lv_style_set_border_color(&styles->tab_focus, CY_YELLOW);
    lv_style_set_border_width(&styles->tab_focus, 4);
    lv_style_set_border_side(&styles->tab_focus, LV_BORDER_SIDE_TOP);

(...)

#if LV_USE_TABVIEW
        if(lv_obj_check_type(lv_obj_get_parent(obj), &lv_tabview_class)) {
(...)
            lv_obj_add_style(obj, &styles->tab_btn, LV_PART_ITEMS | LV_STATE_CHECKED);
            lv_obj_add_style(obj, &styles->tab_focus, LV_PART_ITEMS | LV_STATE_USER_1);
            return;
        }
#endif

and to use this new state :

void tabscreen_set_focus(int idx, int state)
{
	if (state)
		lv_obj_add_state(tab[idx], LV_STATE_USER_1);
	else
		lv_obj_clear_state(tab[idx], LV_STATE_CHECKED);
}

tab[i] is a lv_obj_t returned by the function lv_tabview_add_tab(...).

I don’t really understand why this doesn’t work. I’m not sure to apply the state to the correct object, or if it is the style that is not on the correct object class. Does anybody have an idea or tips to do what I want to do?

Help would be appreciated :slight_smile:

I have finally found a workaround.

When I need to highlight a tab, I change the button matrix map, add a unicode character (a square icon) at the beginning of the string and colorize the string.

This is not perfect, but this is good enough for now.

If someone has a solution with the state, it would be better.