How to set tab buttons smaller?

Hi all!

I am wondering how I can minimize button size of the tab?
I have read smaller text makes it smaller but also there is relatively large spacing between buttons and other objects. I have a small screen (320x240) and the buttons occupies more than 20% of the screen. I wish to make it smaller. Is there any settings or hack?


Modify style of LV_TABVIEW_PART_TAB_BTN part locally or implement it in your custom theme.

1 Like

Thanks Nusret.

After adding a style like you said it’s better but I can’t get rid of that top padding still. I did styling for tabview. Should i do styling for screen? If yes how then? Do you know about it?

    static lv_style_t style_tab;
    lv_style_set_pad_top(&style_tab, LV_STATE_DEFAULT, LV_DPX(1));
    lv_style_set_pad_bottom(&style_tab, LV_STATE_DEFAULT, LV_DPX(1));
    lv_style_set_pad_left(&style_tab, LV_STATE_DEFAULT, LV_DPX(1));
    lv_style_set_pad_right(&style_tab, LV_STATE_DEFAULT, LV_DPX(1));
    lv_obj_reset_style_list(tabview, LV_TABVIEW_PART_TAB_BTN ); /*Remove the styles,coming from the theme*/
    lv_obj_add_style(tabview, LV_TABVIEW_PART_TAB_BTN , &style_tab);

The minor extra top padding is added here:

You can set pad_top to 0 in LV_TABVIEW_PART_TAB_BG part.

1 Like