How to center align of multiple buttons in a window layout

How-to
1

Description

I set the window layout to LV_LAYOUT_GRID, and I try to arrange 5 buttons in 3 rows and 2 columns in the center of the screen, but it doesn’t work. Is there a way to do this without creating an additional container?

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

STM32F767IIT

What LVGL version are you using?

7.10.1

What do you want to achieve?

arrange 5 buttons in 3 rows and 2 columns in the center of the window

What have you tried so far?

  • lv_style_set_margin_left(&style, STATE, margin);
  • lv_obj_set_pos(obj, x, y);
  • lv_obj_set_x(obj, x);
    They didn’t work.

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:

    lv_obj_t * label;
    static lv_style_t style_btn, style_btn1;
    static lv_style_t win_style;

    lv_style_init(&win_style);
    lv_win_add_btn_left(win, LV_SYMBOL_LEFT);
//lv_style_set_margin_left(&style_btn, LV_STATE_DEFAULT, 100);
//lv_obj_add_style(win, LV_WIN_PART_CONTENT_SCROLLABLE, &win_style);

    // window
    lv_win_set_title(win, "test");
    lv_win_set_layout(win, LV_LAYOUT_GRID);

    lv_style_init(&style_btn);
    lv_style_set_text_font(&style_btn, LV_STATE_DEFAULT, &lv_font_montserrat_22);
    //lv_style_set_margin_left(&style_btn, LV_STATE_DEFAULT, 100);

    // --------------------------------------------------------------------------------------
    // Button 1 
    // --------------------------------------------------------------------------------------
	btn_PCA = lv_btn_create(win, NULL);
    lv_obj_set_event_cb(btn_A, event_handler);
    lv_obj_set_size(btn_A, lv_obj_get_width_fit(lv_obj_get_parent(btn_A))*2/5,
                        lv_obj_get_height_fit(lv_obj_get_parent(btn_A))/4);
    lv_obj_set_pos(btn_A, 50, 70);
   // lv_obj_add_style(btn_A, LV_BTN_PART_MAIN, &style_btn);
   // lv_obj_align(btn_A, win, LV_ALIGN_CENTER, 0, 0);
    label = lv_label_create(btn_A, NULL);
    lv_label_set_text(label, "A");

    // --------------------------------------------------------------------------------------
    // Button 2 
    // --------------------------------------------------------------------------------------
    btn_B = lv_btn_create(win, btn_A);
    lv_obj_set_event_cb(btn_B, event_handler);
    label = lv_label_create(btn_B, NULL);
    lv_label_set_text(label, "B");
    // --------------------------------------------------------------------------------------
    // Button 3
    // --------------------------------------------------------------------------------------
    btn_C = lv_btn_create(win, btn_A);
    lv_obj_set_event_cb(btn_C, event_handler);
    label = lv_label_create(btn_C, NULL);
    lv_label_set_text(label, "C");
    // --------------------------------------------------------------------------------------
    // Button 4 
    // --------------------------------------------------------------------------------------
    btn_D = lv_btn_create(win, btn_A);
    lv_obj_set_event_cb(btn_D, event_handler);
    label = lv_label_create(btn_D, NULL);
    lv_label_set_text(label, "D");
    // --------------------------------------------------------------------------------------
    // Button 5 
    // --------------------------------------------------------------------------------------
    btn_E = lv_btn_create(win, btn_A);
    lv_obj_set_event_cb(btn_E, event_handler);
    label = lv_label_create(btn_E, NULL);
    lv_label_set_text(label, "E");

Screenshot and/or video

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

KakaoTalk_20210323_114253137
KakaoTalk_20210323_114253137744×509 72.2 KB

2

Have you tried lv_obj_align??

3

I have tried it but it didn’t work.
lv_obj_align(btn_A, win, LV_ALIGN_IN_TOP_LEFT, 50, 10);

4

Okay I see your prolem. the btn_B and btn_C you have not created yet. So you can’t have a copy them these button. Change your code like this and it may works:

btn_B = lv_btn_create(win, btn_A);
btn_C = lv_btn_create(win, btn_A);
5

I modified it several times and didn’t fix it at the end.
Thanks for pointing out. But it still doesn’t work.
Does this function not work in layout mode?

6

I don’t know if it work or not? Why don’t you use container to rearrange them all??

7

Thanks, tuannt66

If the window is also a kind of container, of course, the align and margin functions seem to work. If it doesn’t work in layout mode, I’ll have to find another way.