Migrating from 7.5 to 8.1 - Tabview outline


How to remove tab view outline

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


What LVGL version are you using?


What do you want to achieve?

Remove the outline

What have you tried so far?


Code to reproduce

    lv_obj_t * tv = lv_tabview_create(scr, LV_DIR_TOP, 50);
    lv_obj_set_height(tv, 535);

    lv_obj_set_style_pad_right(tv, LV_STATE_DEFAULT, LV_HOR_RES / 6);

    lblMenuTime = lv_label_create(lv_scr_act());
    lv_label_set_text(lblMenuTime, "00:00");
    lv_obj_align(lblMenuTime, LV_ALIGN_TOP_RIGHT, -70, 8);

    lv_obj_add_flag(lblMenuTime, LV_OBJ_FLAG_HIDDEN);
	lv_obj_set_style_text_color(lblMenuTime, lv_palette_main(LV_PALETTE_LIME), LV_PART_MAIN);
    lv_label_set_recolor(lblMenuTime, true);
	lv_obj_set_style_text_font(lblMenuTime, &lv_font_montserrat_48, LV_PART_MAIN);

    lv_obj_set_pos(tv, 0, 0);

Screenshot and/or video


This isnt an exact answer to this question, but from a quick glance it looks like all of your questions could be solved by adjusting styles.

In this particular case my best guess would be by the use of lv_obj_set_style_boder_width and choosing a value of 0,

I would suggets having a good look through the style documentation to see what the options are and then if you still have questions you can follow up.

I am primarily a micropython developer and so am not 100% sure that this is correct, but whatever you are using to develop code (VS code for me) should have some form of intelitext to give suggestions about what style options there are.

Again I know this is micropython but as an alternative you could have a look at the simulator (found here: LVGL/MicroPython Simulator) and type scr.set_style_ into the prompt followed by tab, it will show you suggestions.

Hopefully this has been of some help

Thanks for the suggestion but that doesnt seem to exist in the documentation :frowning:

It definitely exists as I have used it, hence my suggestion of using the autocomplete to test things.

Here is a printout from the prompt on the simulator.

You could also have a look at edgeline, the beta doesn’t have all the features and widgets but it does allow setting styles and things like the border width are included.

My bad, i copied your example not noticing the missing “r”…

Haha sorry about that, slight typo there, hopefully thats helped you a bit though

Unfortunately not.

I tried this:

lv_obj_t * tv = lv_tabview_create(scr, LV_DIR_TOP, 50);
lv_obj_set_height(tv, 535);

static lv_style_t style;

lv_style_set_border_width(&style, 0);
lv_obj_add_style(tv, &style, 0);

Maybe I’m missing something?

So I have looked into it a bit, and tabview is a compound widget so it looks like you may need to change the border width of the button matrix.

I am not sure of the correct code in C but I have put together something in the micropython simulator which may provide a clue (look at the last line):


As a complete guess the c code you would need would be:

lv_obj_t * tv = lv_tabview_create(scr, LV_DIR_TOP, 50);
lv_obj_set_height(tv, 535);
lv_bth_matrix_t * tv_btns = lv_get_tab_btns(tv)
static lv_style_t style;

lv_style_set_border_width(&style, 0);
lv_obj_add_style(tv_btns, &style, 0);

thanks for the suggestion.
I get:
undefined reference to `lv_get_tab_btns’
So let me search for the answer…

Its quite odd as the border does disappear if you scroll down:

Looks like it should actually be lv_tabview_get_tab_btns, give that a try

Sorry,no change:

Full print screen:


The outline is added in LV_STATE_FOCUS_KEY state. So it should be visible if you have focused the tabview with a keyboard or encoder input device.

Anyway, it should work:

    lv_obj_t * btnm = lv_tabview_get_tab_btns(tabview);
    lv_obj_set_style_outline_width(btnm, 0, LV_STATE_FOCUS_KEY);
    lv_obj_set_style_outline_width(btnm, 0, LV_PART_ITEMS | LV_STATE_FOCUS_KEY);

Genius, that worked perfectly!
Thank you so much :slight_smile:

1 Like