Changing Tabview Font Size

[Timm_Carson]

I am very new to coding, sorry if this is trivial.

Description

I want to change the font size of the tabs I am using. I am using the Material theme. My first attempt got me close. I think I am copying the default style and not the material theme style. Maybe there is a better way?

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

ESP32 Dev board with an ILI9341 display
PlatformIO on Windows 10
Couldn’t get the simulator to work

What do you want to achieve?

Increase Font Size of tabs to make symbols bigger

What have you tried so far?

Based on this https://github.com/littlevgl/lvgl/issues/628
I added these lines

    // TMC Change Button Font Size by changing style  
    static lv_style_t style_tv_btn_rel;
    lv_style_copy(&style_tv_btn_rel, &lv_style_btn_rel);
    style_tv_btn_rel.text.font = &lv_font_roboto_28;
    lv_tabview_set_style(tabview, LV_TABVIEW_STYLE_BTN_REL, &style_tv_btn_rel);

Code to reproduce

To this:

    /*Create a Tab view object*/
    lv_obj_t *tabview;
    tabview = lv_tabview_create(lv_scr_act(), NULL);
    
    // TMC Change Button Font Size by changing style  
    static lv_style_t style_tv_btn_rel;
    lv_style_copy(&style_tv_btn_rel, &lv_style_btn_rel);
    style_tv_btn_rel.text.font = &lv_font_roboto_28;
    lv_tabview_set_style(tabview, LV_TABVIEW_STYLE_BTN_REL, &style_tv_btn_rel);



    /*Add 3 tabs (the tabs are page (lv_page) and can be scrolled*/
    lv_tabview_set_btns_pos(tabview, LV_TABVIEW_BTNS_POS_LEFT);  // TMC Changed BTNs To left side 
    lv_obj_t *tab1 = lv_tabview_add_tab(tabview, LV_SYMBOL_VOLUME_MAX);  // TMC Changed Text to Symbol 
    lv_obj_t *tab2 = lv_tabview_add_tab(tabview, LV_SYMBOL_SETTINGS);  // TMC Changed Text to Symbol 
    lv_obj_t *tab3 = lv_tabview_add_tab(tabview, LV_SYMBOL_DOWNLOAD);  // TMC Changed Text to Symbol 
    

    /*Add content to the tabs*/
    lv_obj_t * label = lv_label_create(tab1, NULL);
    lv_label_set_text(label, "This the first tab\n\n"
                             "If the content\n"
                             "of a tab\n"
                             "become too long\n"
                             "the it \n"
                             "automatically\n"
                             "become\n"
                             "scrollable.");

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

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

Screenshot and/or video

Before

After

Thanks for any help

[embeddedt]

Copy from the tabview’s current style, make your changes, and then set the new style.

    static lv_style_t style_tv_btn_rel;
    lv_style_copy(&style_tv_btn_rel, lv_tabview_get_style(tabview, LV_TABVIEW_STYLE_BTN_REL));
    style_tv_btn_rel.text.font = &lv_font_roboto_28;
    lv_tabview_set_style(tabview, LV_TABVIEW_STYLE_BTN_REL, &style_tv_btn_rel);

[Timm_Carson]

Thanks @embeddedt

That make sense, I need to adjust the other button styles and it should be what I am after

[Timm_Carson]

@embeddedt

do you think this is a bug or is there something else I should change? the buttons look good in the night theme but not in alien or material. Same code in all three.

  static lv_style_t style_tv_btn_rel;
  lv_style_copy(&style_tv_btn_rel, lv_tabview_get_style(tabview, LV_TABVIEW_STYLE_BTN_REL));
  style_tv_btn_rel.text.font = &lv_font_roboto_28;
  lv_tabview_set_style(tabview, LV_TABVIEW_STYLE_BTN_REL, &style_tv_btn_rel);
  
  static lv_style_t style_tv_btn_pr;
  lv_style_copy(&style_tv_btn_pr, lv_tabview_get_style(tabview, LV_TABVIEW_STYLE_BTN_PR));
  style_tv_btn_pr.text.font = &lv_font_roboto_28;
  lv_tabview_set_style(tabview, LV_TABVIEW_STYLE_BTN_PR, &style_tv_btn_pr);

  static lv_style_t style_tv_btn_tgl_rel;
  lv_style_copy(&style_tv_btn_tgl_rel, lv_tabview_get_style(tabview, LV_TABVIEW_STYLE_BTN_TGL_REL));
  style_tv_btn_tgl_rel.text.font = &lv_font_roboto_28;
  lv_tabview_set_style(tabview, LV_TABVIEW_STYLE_BTN_TGL_REL, &style_tv_btn_tgl_rel);

  static lv_style_t style_tv_btn_tgl_pr;
  lv_style_copy(&style_tv_btn_tgl_pr, lv_tabview_get_style(tabview, LV_TABVIEW_STYLE_BTN_TGL_PR));
  style_tv_btn_tgl_pr.text.font = &lv_font_roboto_28;
  lv_tabview_set_style(tabview, LV_TABVIEW_STYLE_BTN_TGL_PR, &style_tv_btn_tgl_pr);
  

Material buttons small and what I think is btn_rel has a small font.

Night As expected

Alien has small button with big fonts

[embeddedt]

You may have to increase the padding for alien/material.