How to align label within Image button

How-to
1

Hello,

i try to place a text label direct under the Image button, so I guess the best option to do it is to use LV_ALIGN_OUT_BOTTOM_MID. But it doesn’t work with my source code. Here it is:

  LV_IMG_DECLARE(pic1);
  imgbtn1 = lv_imgbtn_create(main_row, NULL);
  lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_RELEASED, &pic1);
  lv_obj_add_style(imgbtn1, LV_STATE_PRESSED, &style_pr);
  lv_obj_set_size(imgbtn1, 140, 140);
  lv_obj_t *label1 = lv_label_create(main_row4, NULL);
  lv_obj_add_style(label1, LV_OBJ_PART_MAIN, &style_btn);
  lv_label_set_text(label1, "NORMAL");
  lv_obj_align(label1, NULL, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);
  lv_label_set_align(label1, LV_LABEL_ALIGN_CENTER);

I also have tried it with: lv_obj_align_mid_y(label1, NULL, LV_ALIGN_IN_BOTTOM_MID, 50);
But was not successful either. The label stays in the middle of the button:

lvgl

The style of the label has not much action inside:

  static lv_style_t style_btn;
  lv_style_set_text_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_WHITE);
  lv_style_set_text_font(&style_btn, LV_STATE_DEFAULT, &lv_font_montserrat_30);

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

Windows simulator

What LVGL version are you using?

v7.11

What do you want to achieve?

Get a label to be placed under the Image button

2

I am not sure how your code is even compiling.

 lv_obj_align(label1, NULL, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);

That’s wrong. that function only takes 4 parameters.

 void lv_obj_align(struct _lv_obj_t *obj, lv_align_t align, lv_coord_t x_ofs, lv_coord_t y_ofs)

    Change the alignment of an object and set new coordinates. Equivalent to: lv_obj_set_align(obj, align); lv_obj_set_pos(obj, x_ofs, y_ofs);

    Parameters

            obj -- pointer to an object to align

            align -- type of alignment (see 'lv_align_t' enum) LV_ALIGN_OUT_... can't be used.

            x_ofs -- x coordinate offset after alignment

            y_ofs -- y coordinate offset after alignment

I am seeing 5 parameters in your call to that function. You need to remove the NULL parameter.

3

Sorry, but you are wrong. lv_obj_align has exactly 5 parameters in ver.7.11:

void lv_obj_align(lv_obj_t *obj, const lv_obj_t *base, lv_align_t align, lv_coord_t x_ofs, lv_coord_t y_ofs)

I wouldn’t post here a wrong code which can’t be compiled.

4

I didn’t realize that version 7 had 5 parameters.

Well I would think that the align works in the same manner for the most part. The label you are attempting to align is not a child of the button and as such it is probably not going to align to the button using the function in the manner that you are.

 LV_IMG_DECLARE(pic1);
  imgbtn1 = lv_imgbtn_create(main_row, NULL);
  lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_RELEASED, &pic1);
  lv_obj_add_style(imgbtn1, LV_STATE_PRESSED, &style_pr);
  lv_obj_set_size(imgbtn1, 140, 140);
  lv_obj_t *label1 = lv_label_create(imgbtn1, NULL);
  lv_obj_add_style(label1, LV_OBJ_PART_MAIN, &style_btn);
  lv_label_set_text(label1, "NORMAL");
  lv_obj_align(label1, NULL, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);

Try this code and see if it solves your issue.