How to make a Tabview with lots of tabs that do not fit on the screen

Hi!
Can someone help me to understand if it is possible to create a Tabview with lots of Tabs that normally would be created from INI-file. Right now I create them manually and they look awful.

Environment

  • MCU/MPU/Board: STM32H753
  • LVGL version: 9.6.0

Hi @Zed!

Maybe you can try put it in a blank lv_obj to act as a container and make it scrollable? Tell me if this help you.

Thank you very much for your suggestion, but how could I implement it in my example?

  lv_obj_t* tabview;
  uint32_t tab_count = 0;
  uint32_t i = 0;

  tabview = lv_tabview_create(lv_screen_active());
  lv_tabview_set_tab_bar_position(tabview, LV_DIR_TOP);
  lv_tabview_set_tab_bar_size(tabview, 40);

  lv_obj_set_style_bg_color(tabview, lv_palette_lighten(LV_PALETTE_RED, 2), 0);

  lv_obj_t* tab_buttons = lv_tabview_get_tab_bar(tabview);
  lv_obj_set_style_bg_color(tab_buttons, lv_palette_darken(LV_PALETTE_GREY, 3), 0);
  lv_obj_set_style_text_color(tab_buttons, lv_palette_lighten(LV_PALETTE_GREY, 5), 0);

  //Add 5 tabs (the tabs are page (lv_page) and can be scrolled
  lv_obj_t* tab1 = lv_tabview_add_tab(tabview, "Home");
  lv_obj_t* tab2 = lv_tabview_add_tab(tabview, "gView");
  lv_obj_t* tab3 = lv_tabview_add_tab(tabview, "Graph");
  lv_obj_t* tab4 = lv_tabview_add_tab(tabview, "ISensor");
  lv_obj_t* tab5 = lv_tabview_add_tab(tabview, "FSensor");
  lv_obj_t* tab6 = lv_tabview_add_tab(tabview, "FSensor");
  lv_obj_t* tab7 = lv_tabview_add_tab(tabview, "FSensor");
  lv_obj_t* tab8 = lv_tabview_add_tab(tabview, "FSensor");
  lv_obj_t* tab9 = lv_tabview_add_tab(tabview, "FSensor");
  lv_obj_t* tab10 = lv_tabview_add_tab(tabview, "FSensor");
  lv_obj_t* tab11 = lv_tabview_add_tab(tabview, "FSensor");
  lv_obj_t* tab12 = lv_tabview_add_tab(tabview, "FSensor");
  lv_obj_t* tab13 = lv_tabview_add_tab(tabview, "FSensor");
  lv_obj_t* tab14 = lv_tabview_add_tab(tabview, "FSensor");
  lv_obj_t* tab15 = lv_tabview_add_tab(tabview, "FSensor");
  lv_obj_t* tab16 = lv_tabview_add_tab(tabview, "FSensor");
  lv_obj_t* tab17 = lv_tabview_add_tab(tabview, "FSensor");
  lv_obj_t* tab18 = lv_tabview_add_tab(tabview, "FSensor");
  lv_obj_t* tab19 = lv_tabview_add_tab(tabview, "FSensor");

  tab_count = lv_tabview_get_tab_count(tabview);
  for(i = 0; i < tab_count; i++) {
	  lv_obj_t * button = lv_obj_get_child(tab_buttons, i);
	  lv_obj_set_style_border_side(button, LV_BORDER_SIDE_RIGHT, LV_PART_MAIN | LV_STATE_CHECKED);
  }
  lv_obj_set_style_bg_color(tab2, lv_palette_lighten(LV_PALETTE_AMBER, 3), 0);
  lv_obj_set_style_bg_opa(tab2, LV_OPA_COVER, 0);

  //Add content to the tabs
  lv_obj_t * label = lv_label_create(tab1);
  lv_label_set_text(label, "First tab");

  label = lv_label_create(tab2);
  lv_label_set_text(label, "Second tab");

  label = lv_label_create(tab3);
  lv_label_set_text(label, "Third tab");

  label = lv_label_create(tab4);
  lv_label_set_text(label, "Fourth tab");

  label = lv_label_create(tab5);
  lv_label_set_text(label, "Fifth tab");

  lv_obj_remove_flag(lv_tabview_get_content(tabview), LV_OBJ_FLAG_SCROLLABLE);

Sorry, but I just started learning LVGL.
Thank you!

Sorry, my solution is not going to work…

Setting the tab_bar width to be larger will allow you to scroll horizontally and prevent the buttons from cramping up, but it won’t work exactly the way you want. I’ll keep looking for a solution; if you have any breakthroughs, let me know!

Thanks anyway!
At the moment, I do not have any idea, but I’ll keep searching. Maybe Claude knows. I’ll be in touch.
THX!