How align lv_list button to center?

[MassimilianoPegaso]

Description

I need to align lv_list button to center.

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

Custom board with NXP iMX RT1052 and MCUXpresso (gcc).

What LVGL version are you using?

LVGL 8.3

What do you want to achieve?

I need to align lv_list button to center.

I have:

I need to have:

What have you tried so far?

I try to use lv_obj_set_align(ui->main_menu_items[i], LV_ALIGN_CENTER); on list button.

Code to reproduce

    lv_obj_t *main_menu = lv_list_create(container);
    create_array_btn(ui, main_menu, &buttonsCfg[0], 2);
    lv_obj_set_pos(main_menu, 0, 130);
    lv_obj_set_size(main_menu, 700, 100);
    lv_obj_set_scrollbar_mode(main_menu, LV_SCROLLBAR_MODE_OFF);
    lv_obj_add_event_cb(main_menu, returnToMain, LV_EVENT_KEY, ui);
...
static void create_array_btn(lv_ui *ui, lv_obj_t *parent, const button_cfg_t *buttonsCfg, uint8_t count)
{
    uint8_t i;

    //Write style state: LV_STATE_DEFAULT for &style_screen_1_list_1_extra_btns_main_default
    static lv_style_t style_default;
    ui_init_style(&style_default);

    lv_style_set_pad_all(&style_default, 5);
    lv_style_set_border_width(&style_default, 0);
    lv_style_set_radius(&style_default, 0);
    lv_style_set_text_color(&style_default, lv_color_hex(0x000000));
    lv_style_set_text_font(&style_default, &lv_font_NotoSansMono_Regular_26);
    lv_style_set_text_opa(&style_default, 255);
    lv_style_set_bg_opa(&style_default, 0);

    //Write style state: LV_STATE_PRESSED for &style_screen_1_list_1_extra_btns_main_pressed
    static lv_style_t style_pressed;
    ui_init_style(&style_pressed);

    lv_style_set_pad_all(&style_pressed, 5);
    lv_style_set_border_width(&style_pressed, 0);
    lv_style_set_radius(&style_pressed, 0);
    lv_style_set_text_color(&style_pressed, lv_color_hex(0x212121));
    lv_style_set_text_font(&style_pressed, &lv_font_NotoSansMono_Regular_26);
    lv_style_set_text_opa(&style_pressed, 255);
    lv_style_set_bg_opa(&style_pressed, 255);
    lv_style_set_bg_color(&style_pressed, lv_color_hex(0x3CB4AC));

    //Write style state: LV_STATE_FOCUSED for &style_screen_1_list_1_extra_btns_main_focused
    static lv_style_t style_focused;
    ui_init_style(&style_focused);

    lv_style_set_pad_all(&style_focused, 5);
    lv_style_set_border_width(&style_focused, 0);
    lv_style_set_radius(&style_focused, 0);
    lv_style_set_text_color(&style_focused, lv_color_hex(0x000000));
    lv_style_set_text_font(&style_focused, &lv_font_NotoSansMono_Regular_26);
    lv_style_set_text_opa(&style_focused, 255);
    lv_style_set_bg_opa(&style_focused, 255);
    lv_style_set_bg_color(&style_focused, lv_color_hex(0x94dbd6));

    for (i = 0; i < count; ++i)
    {
        ui->main_menu_items[i] = lv_list_add_btn(parent, NULL, buttonsCfg[i].text);
        lv_obj_set_align(ui->main_menu_items[i], LV_ALIGN_CENTER);
        lv_obj_add_event_cb(ui->main_menu_items[i], buttonsCfg[i].cb, LV_EVENT_CLICKED, ui);
        lv_obj_remove_style_all(ui->main_menu_items[i]);
        lv_obj_add_style(ui->main_menu_items[i], &style_default, LV_PART_MAIN|LV_STATE_DEFAULT);
        lv_obj_add_style(ui->main_menu_items[i], &style_pressed, LV_PART_MAIN|LV_STATE_PRESSED);
        lv_obj_add_style(ui->main_menu_items[i], &style_focused, LV_PART_MAIN|LV_STATE_FOCUSED);
        lv_obj_add_flag(ui->main_menu_items[i], LV_OBJ_FLAG_EVENT_BUBBLE);
    }
    lv_group_focus_obj(ui->main_menu_items[0]);
}

[Marian_M]

full-width is important here. Instead list try use FLEX

[TridentTD]

In your function void create_array_btn( ...), insert the comment // on the line:

  // lv_obj_remove_style_all(ui->main_menu_items[i]);

And then when your list main_menu is designed, add the following code like this:

    lv_obj_t *main_menu = lv_list_create(container);
    create_array_btn(ui, main_menu, &buttonsCfg[0], 2);
    lv_obj_set_pos(main_menu, 0, 130);
    lv_obj_set_size(main_menu, 700, 100);
    lv_obj_set_scrollbar_mode(main_menu, LV_SCROLLBAR_MODE_OFF);
    lv_obj_add_event_cb(main_menu, returnToMain, LV_EVENT_KEY, ui);

#if LVGL_VERSION_MAJOR == 8
  for(int i = 0; i < lv_obj_get_child_cnt(main_menu) ; i++) {
    lv_obj_t * child = lv_obj_get_child(main_menu, i);
    if(lv_obj_get_class(child)->base_class == &lv_btn_class) {
      lv_obj_set_flex_align(child, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
      for(int j=0; j< lv_obj_get_child_cnt(child); j++){
        lv_obj_t* child2 = lv_obj_get_child(child, j);
        if( lv_obj_get_class(child2) == &lv_label_class) {
          lv_obj_set_flex_grow(child2, 0);
        }
      }
    }
  }
#elif LVGL_VERSION_MAJOR == 9
  for(int i = 0; i < lv_obj_get_child_count(main_menu) ; i++) {
    lv_obj_t * child = lv_obj_get_child(main_menu, i);
    if(strcmp(lv_obj_get_class(child)->name, "list-btn") == 0) {
      lv_obj_set_flex_align(child, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
      lv_obj_set_flex_grow(lv_obj_get_child_by_type(child, 0, &lv_label_class), 0);
    }
  }
#endif

[MassimilianoPegaso]

Hi, thank you for the answere, I tried your solution and seems to work properly, but I have a question.
I use:

lv_obj_remove_style_all(ui->main_menu_items[i]);
...
//Write style state: LV_STATE_FOCUSED for &style_screen_1_list_1_extra_btns_main_focused
static lv_style_t style_focused;
ui_init_style(&style_focused);

lv_style_set_pad_all(&style_focused, 5);
lv_style_set_border_width(&style_focused, 0);
lv_style_set_radius(&style_focused, 0);
lv_style_set_text_color(&style_focused, lv_color_hex(0x000000));
lv_style_set_text_font(&style_focused, &lv_font_NotoSansMono_Regular_26);
lv_style_set_text_opa(&style_focused, 255);
lv_style_set_bg_opa(&style_focused, 255);
lv_style_set_bg_color(&style_focused, lv_color_hex(0x94dbd6));

Bacause i need to have a style like this when item is selected

If I remove lv_obj_remove_style_all(ui->main_menu_items[i]); the style is

Have you a suggestion to have center alignment with this style? i need that the box around the text is only around the text and not full length.

Thank you.

[TridentTD]

In your void create_array_btn( ...)

lv_obj_remove_style_all(ui->main_menu_items[i]);
...
lv_style_set_width(&style_default, LV_SIZE_CONTENT);

and remove the last additional part

#if LVGL_VERSION_MAJOR == 8
...
#endif

change to

 lv_obj_set_flex_align(main_menu, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER,  LV_FLEX_ALIGN_CENTER);

[MassimilianoPegaso]

Thank you so much, it work very fine!