How to remove space between buttons in list?

How-to
1

Description

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.
Annotation%202019-10-08%20141440

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);
lv_theme_set_current(th);

/*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->style.list.bg);
styleBG.body.border.width = 0;
styleBG.body.padding.top = 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);
styleBtnREL.body.padding.top = 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->style.list.btn.pr);
styleBtnPR.body.padding.top = 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);
styleBtnTGLREL.body.padding.top = 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);
styleBtnTGLPR.body.padding.top = 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);
styleBtnINA.body.padding.top = 3;
styleBtnINA.body.padding.bottom = 3;
lv_list_set_style(list1, LV_LIST_STYLE_BTN_INA, &styleBtnINA);
2

Reducing the body.padding on LV_LIST_STYLE_SCRL should work.

3

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);
styleSCRL.body.padding.top = 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);
4

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
5

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 ?

6

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

7

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
8

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?

9

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.

10

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 …

11

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

12

image
115AC003-6C47-41BC-9220-E86CDF679527.jpeg640×515 77.4 KB

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 …

13

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 theme.style.cb.bg to a new style which uses the themes font.