How to remove space between buttons in list?


I am trying to make a list on a small monochrome screen.

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

Simulator on Visual Studio

What do you want to achieve?

Remove the space between buttons. Marked in red here.

What have you tried so far?

I tried different padding in many of the styles possible in list. I also tried using lv_obj_set_size(). None of them remove the spaces.

Code to reproduce

lv_theme_t * th = lv_theme_mono_init(210, NULL);

/*Create a list*/
lv_obj_t * list1 = lv_list_create(lv_scr_act(), NULL);
lv_obj_set_size(list1, LV_HOR_RES_MAX, LV_VER_RES_MAX);
lv_obj_align(list1, NULL, LV_ALIGN_CENTER, 0, 0);

g = lv_group_create();
lv_indev_set_group(kp_indev, g);
lv_group_set_style_mod_cb(g, my_style_mod_cb);
lv_group_add_obj(g, list1);

const char * list_txts[] = { "File 1", "File 2", "File 3", "File 4", "File 5", "File 6", "" };

uint32_t i;
for (i = 0; list_txts[i][0] != '\0'; i++) {
	lv_obj_t * b;
	b = lv_list_add_btn(list1, NULL, list_txts[i]);
	lv_obj_set_event_cb(b, event_handler);

/*Set style*/
static lv_style_t styleBG;
lv_style_copy(&styleBG, th->;
styleBG.body.border.width = 0; = 0;
styleBG.body.padding.bottom = 0;
styleBG.body.padding.left = 5;
styleBG.body.padding.right = 5;
lv_list_set_style(list1, LV_LIST_STYLE_BG, &styleBG);

static lv_style_t styleBtnREL;
lv_style_copy(&styleBtnREL, th->style.list.btn.rel); = 3;
styleBtnREL.body.padding.bottom = 3;
lv_list_set_style(list1, LV_LIST_STYLE_BTN_REL, &styleBtnREL);

static lv_style_t styleBtnPR;
lv_style_copy(&styleBtnPR, th->; = 3;
styleBtnPR.body.padding.bottom = 3;
lv_list_set_style(list1, LV_LIST_STYLE_BTN_PR, &styleBtnPR);

static lv_style_t styleBtnTGLREL;
lv_style_copy(&styleBtnTGLREL, th->style.list.btn.tgl_rel); = 3;
styleBtnTGLREL.body.padding.bottom = 3;
lv_list_set_style(list1, LV_LIST_STYLE_BTN_TGL_REL, &styleBtnTGLREL);

static lv_style_t styleBtnTGLPR;
lv_style_copy(&styleBtnTGLPR, th->style.list.btn.tgl_pr); = 3;
styleBtnTGLPR.body.padding.bottom = 3;
lv_list_set_style(list1, LV_LIST_STYLE_BTN_TGL_PR, &styleBtnTGLPR);

static lv_style_t styleBtnINA;
lv_style_copy(&styleBtnINA, th->style.list.btn.ina); = 3;
styleBtnINA.body.padding.bottom = 3;
lv_list_set_style(list1, LV_LIST_STYLE_BTN_INA, &styleBtnINA);

Reducing the body.padding on LV_LIST_STYLE_SCRL should work.

I used the following code to reduce body.padding and it had no effect.

static lv_style_t styleSCRL;
lv_style_copy(&styleSCRL, th->style.list.scrl); = 0;
styleSCRL.body.padding.bottom = 0;
styleSCRL.body.padding.left = 0;
styleSCRL.body.padding.right = 0;
lv_list_set_style(list1, LV_LIST_STYLE_SCRL, &styleSCRL);

Those four pads are for the ‘outside’ padding of those objects. Set body.padding.inner instead to control the spacing between those objects in the list.

edit cleared up wording

1 Like

Thank you very much. It worked very well.

This what I have achieved -

image ----- image
Created a label at top with scroll able list below it

I have another short question. The method I have used to set a style in the above code is it correct ? Do I need to edit something to make it more efficient ?

It looks ok to me, but someone else can chime in if they see anything wrong.

The only optimization is to only make the style once during initialization (i.e. share it across all your lists). I assume you are already doing that.

1 Like

Hello and sorry for highjacking this, but it seems to fit nicely, as the question is already answered.
I have a very similar question, just not regarding buttons but a checkbox. it seems immune to the padding setting, i also found it is not even touched in the template. Which setting would affect this?

Can you share the code? I haven’t worked with checkboxes, but if you give me something to look at I’m happy to try.

I am afraid this is all there is in this regard:

 // Checkbox
    lv_obj_t* cb = lv_cb_create(cont_Settings, NULL);     // First check box
    lv_cb_set_text(cb, "Red");
    lv_group_add_obj(displayGroup, cb);

The style setting would work the same as in the top example. There is nothing fancy in my code in regards to the checkboxes. I also realized that they ignore my theme-font setting, and stay with the standard font. I have done quite a lot of code reading today but still have yet to find out why. Labels are doing a similar thing. They stay in the small font even though I have selected a bigger font in the theme initialization. The theme is essentially a copy of the Material theme with only a few paddings and colors changed …

What part of it is not respecting padding the way you want?

This image should illustrate it rather well. The lower parts have all paddings to zero. The checkboxes still have large paddings.
I have solved the problem with the labels. It seems they inherit the style from the parent, and I have set the style of the parent container to the plain preset style. It did not fix the checkboxes though …

There really is a conceptual issue in some styles of the themes.

At some places lv_style_transp/transp_tight/transp_fit is used. The have LV_FONT_DEFULT and the theme doesn’t overrides it.

See here.

I’m thinking what would be the best way to fix it, but until that I suggest setting a custom style for LV_CB_STYLE_BG or update to a new style which uses the themes font.