How to make tabview horizontal scroll?


I am building a UI with two screens, each full width and height. I want the UI to allow the user to swipe horizontally between the two screens (kind of like swiping between two screens on your phone)

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

PC simulator

What do you want to achieve?

Allow swiping, including on the children of the tabs

What have you tried so far?

Create tabview, add 2 tabs, remove buttons. Cannot swipe from the tabs, only from the padding around the tabs.

What version of LVGL are you using? Can you provide a code sample?

The latest version (lvgl 7). Will post a code sample shortly.

	 /*Create a Tab view object*/
 lv_obj_t *tabview;
 tabview = lv_tabview_create(lv_scr_act(), NULL);
 lv_tabview_set_btns_pos(tabview, LV_TABVIEW_TAB_POS_NONE);

 lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "Tab 1");
 lv_obj_t *tab2 = lv_tabview_add_tab(tabview, "Tab 2");

 /*Add content to the tabs*/
 lv_obj_t *c1 = lv_cont_create(tab1, NULL);
 lv_cont_set_fit(c1, LV_FIT_PARENT);
 lv_obj_set_style_local_bg_color(c1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_RED);

 lv_obj_t *c2 = lv_cont_create(tab2, NULL);
 lv_cont_set_fit(c2, LV_FIT_PARENT);
 lv_obj_set_style_local_bg_color(c2, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_GREEN);

This code renders a red box with a gray border. If i drag the red box, nothing happens. If i drag the border, I can get to the green box.

Screen Shot 2020-07-14 at 2.27.40 PM

Try lv_obj_set_click(c1, false); I think the container is absorbing the click events and preventing them from reaching the tab.

1 Like

Thanks! that worked great. Any tips on getting rid of the border around each tab?

Try adjusting the padding styles.

Unfortunately none of them seem to work. I tried all of these with no effect:

  lv_obj_set_style_local_pad_top(tab_view, LV_TABVIEW_PART_BG, LV_STATE_DEFAULT, 0);
  lv_obj_set_style_local_pad_top(tab_view, LV_TABVIEW_PART_INDIC, LV_STATE_DEFAULT, 0);
  lv_obj_set_style_local_pad_top(tab_view, LV_TABVIEW_PART_BG_SCRLLABLE, LV_STATE_DEFAULT, 0);
  lv_obj_set_style_local_pad_top(tab_view, LV_TABVIEW_PART_TAB_BTN, LV_STATE_DEFAULT, 0);

Any chance you can point me in the right direction?

I think the padding needs to be changed on the tabs themselves, not the tabview’s background.

lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "Tab 1");
/* I think only one of these may be necessary but I can't test it at the moment. */
lv_obj_set_style_local_pad_top(tab1, LV_PAGE_PART_BG, 0);
lv_obj_set_style_local_pad_top(tab1, LV_PAGE_PART_SCRL, 0);