How to set tab buttons smaller?

How-to
1

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?

cheers

IMG_8825
IMG_88253024×4032 2.68 MB

2

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

1 Like
3

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?

IMG_8828
IMG_88283024×4032 3.04 MB

    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);
4

The minor extra top padding is added here: https://github.com/lvgl/lvgl/blob/df08d0bd543ae78a4f4b49f8c3a23199a37f6521/src/lv_themes/lv_theme_material.c#L802

You can set pad_top to 0 in LV_TABVIEW_PART_TAB_BG part.

1 Like