How to modify the padding_inner to change the spacing between objects(e.g. btn) in a container?

Important: unclear posts may not receive useful answers.

Before posting

  • Get familiar with Markdown to format and structure your post
  • Be sure to update lvgl from the latest version from the master branch.
  • Be sure you have checked the relevant part of the documentation.
  • If applicable use the Simulator to eliminate hardware related issues.

Delete this section if you read and applied the mentioned points.


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


What LVGL version are you using?


What do you want to achieve?

I want adjust the spacing (padding_inner) of object (e.g. btn) in a container with LV_LAYOUT_GRID or in a btn matrix

What have you tried so far?

I have tried the function lv_obj_set_style_local_pad_all(), but it is useless!

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

/*uint16_t left_pos_panel = 700;
    uint16_t top_pos_panel = 0;
    uint8_t padding_inner = 1;
    uint8_t w_btn = 60;
    uint8_t h_btn = 30;

    lv_obj_t* ctrl_panel_cont = lv_cont_create(lv_scr_act(), NULL);
    //lv_cont_set_layout(ctrl_panel_cont, LV_LAYOUT_GRID);
    lv_obj_set_pos(ctrl_panel_cont, 620, 0);
    lv_obj_set_size(ctrl_panel_cont, 400, 200);
    lv_cont_set_layout(ctrl_panel_cont, LV_LAYOUT_OFF);
    lv_obj_t* btnm1 = lv_btnmatrix_create(ctrl_panel_cont, NULL);
    lv_btnmatrix_set_map(btnm1, btnm_map);
    lv_obj_set_style_local_pad_all(btnm1, LV_BTNMATRIX_PART_BG , LV_STATE_DEFAULT, 1);
    lv_obj_set_style_local_pad_all(btnm1, LV_BTNMATRIX_PART_BTN, LV_STATE_DEFAULT, 1);

    lv_btnmatrix_set_btn_width(btnm1, 10, 2);        /*Make "Action1" twice as wide as "Action2"*/
    lv_btnmatrix_set_btn_ctrl(btnm1, 10, LV_BTNMATRIX_CTRL_CHECKABLE);
    lv_btnmatrix_set_btn_ctrl(btnm1, 11, LV_BTNMATRIX_CTRL_CHECK_STATE);
    lv_obj_align(btnm1, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_obj_set_event_cb(btnm1, event_handler);*/

As the figure shows, the spacing between body of the btn_matrix and the spacing between do not be changed.
The same problem occurs in the case of buttons in a container with LV_LAYOUT_GRID which arranges the objects accroding to padding_inner. How can I modify the padding_inner to change the spacing between objects and spacing between the objects and container?

thank you very much, best wishes

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

To make some space between the edge of the parent and the edge of the children you need to set pad_left/right/top/bottom on the container.

Thanks for your suggestion。
But I want to modify(control) the space between child object when the grid layout is used in container.

You’re looking for lv_obj_set_style_pad_row & lv_obj_set_style_pad_col.

Thank you for your suggestion.
Since I use v8 now, I will try function lv_obj_set_grid_cell(). As shows in the example " lv_example_grid_5(), it seems to work fine. If it can not achieve my requirement, I will try your suggestion.

Just to be clear for anyone reading this these are V8 commands. The equivalent for V7 is lv_style_set_pad_inner or lv_obj_set_style_local_pad_inner.

1 Like