Dropdown menu adding

How-to
1

Introduce the problem

I use Lvgl v9 on NXP Imxrt1176 platform. Here I want to add a drop down menu. I did some poc design with tileview but I don’t know how to pass this problem. Problem is that I have added tileview to y=0 position and it’s height is 250 px. Also there should be some other rectangles as video below. Rectangles are in tileview’s area. Rectangles are also clickable but I can’t click them because of tileview, how to achieve to press rectangle and move tileview whenever I want without a problem.

Piece of code


`
    //Write codes rect1
    rect1 = lv_img_create(mainscreen);
    lv_img_set_src(rect1, "F:/rectangle.bin");
    lv_img_set_pivot(rect1, 50, 50);
    lv_img_set_angle(rect1, 0);
    lv_obj_set_pos(rect1, 140, 100);
    lv_obj_set_size(rect1, 180, 140);
    lv_obj_set_scrollbar_mode(rect1, LV_SCROLLBAR_MODE_OFF);

    //Write style for rect1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
    lv_obj_set_style_img_opa(rect1, 255U, LV_PART_MAIN | LV_STATE_DEFAULT);

    //Write codes rect1
    rect2 = lv_img_create(mainscreen);
    lv_img_set_src(rect2, "F:/rectangle.bin");
    lv_img_set_pivot(rect2, 50, 50);
    lv_img_set_angle(rect2, 0);
    lv_obj_set_pos(rect2, 340, 100);
    lv_obj_set_size(rect2, 180, 140);
    lv_obj_set_scrollbar_mode(rect2, LV_SCROLLBAR_MODE_OFF);

    //Write style for rect2, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
    lv_obj_set_style_img_opa(rect2, 255U, LV_PART_MAIN | LV_STATE_DEFAULT);

    //Write codes tv
    tv = lv_tileview_create(mainscreen);
    lv_obj_set_pos(tv, 100, 0);
    lv_obj_set_size(tv, 600, 250);
    lv_obj_set_scrollbar_mode(ps_tileview, LV_SCROLLBAR_MODE_OFF);

    //Write style for tv, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
    lv_obj_set_style_bg_opa(tv, 0U, LV_PART_MAIN | LV_STATE_DEFAULT);

    tv_down = lv_tileview_add_tile(tv, 0U, 1U, LV_DIR_TOP);

    //Write codes line
    line = lv_img_create(tv_down);
    lv_img_set_src(line, "F:/line.bin");
    lv_img_set_pivot(line, 50, 50);
    lv_img_set_angle(line, 0);
    lv_obj_set_pos(line, 270, 0);
    lv_obj_set_size(line, 60, 3);

    //Write style for line, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
    lv_obj_set_style_img_opa(line, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    tv_up = lv_tileview_add_tile(tv, 0U, 0U, LV_DIR_BOTTOM);

    big_rect = lv_obj_create(tv_up);
    lv_obj_clear_flag(big_rect, LV_OBJ_FLAG_SCROLLABLE);
    lv_obj_set_pos(big_rect, 0, 0);
    lv_obj_set_size(big_rect, 600, 250);
    lv_obj_set_scrollbar_mode(big_rect, LV_SCROLLBAR_MODE_OFF);

    //Write style for big_rect, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
    lv_obj_set_style_border_width(big_rect, 0U, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_radius(big_rect, 0U, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(big_rect, 255U, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(big_rect, lv_color_hex(0xffffff), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_grad_dir(big_rect, LV_GRAD_DIR_NONE, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(big_rect, 0U, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(big_rect, 0U, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_left(big_rect, 0U, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_right(big_rect, 0U, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_width(big_rect, 0U, LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_tileview_set_tile(tv, tv_down, LV_ANIM_OFF);
`
2

@fozen , Are you still having problems?

3

hi @halyssonJr , I have not done anything about the topic, I have been a bit further from lvgl for couple months, do you have any suggestion ?

4

@fozen
It’s likely that the tileview isn’t suitable for the mechanism you want to implement.
When creating the components sequentially (rect 1, rect 2, tileview, etc.), you create overlapping “layers,” and as you observed, it’s not possible to trigger an action by clicking on the rectangles because they are on a lower layer, even on the top layer with 0% opacity.

Well, I suggest moving the objects between layers or dynamically creating a container with all the desired objects.

lv_obj_move_background
lv_obj_move_foreground

Here is my suggestion if works for you:


lv_obj_t *tv_down = NULL;
lv_obj_t *tv_up = NULL;
lv_obj_t *tv_rect_container = NULL;
lv_obj_t *rect1 = NULL;
lv_obj_t * rect2 = NULL;

void rect_1_cb(lv_event_t *event)
{
    printf("Rect 1 clicked\n");
}
void rect_2_cb(lv_event_t *event)
{
    printf("Rect 2 clicked\n");
}

void tileview_event_cb(lv_event_t *event)
{
  lv_obj_t *obj = lv_event_get_target_obj(event);

  lv_obj_t *tview = lv_tileview_get_tile_active(obj);
  if (tview && tview == tv_up)
  {
    lv_obj_move_foreground(rect1);
    lv_obj_move_foreground(rect2);

  }
  else
  {
    lv_obj_move_background(rect1);
    lv_obj_move_background(rect2);
  }
  printf("Value changed\n");

}

void example(lv_obj_t *parent)
{
    //Write codes rect1
    // tv_rect_container = lv_obj_create(parent);
    // lv_obj_set_style_bg_opa(tv_rect_container, 0U, LV_PART_MAIN | LV_STATE_DEFAULT);
    // lv_obj_set_pos(tv_rect_container, 0, 0);
    // lv_obj_set_size(tv_rect_container, lv_pct(95), lv_pct(95));
    // lv_obj_set_style_border_width(tv_rect_container, 0, LV_PART_MAIN);
    // lv_obj_set_style_pad_all(tv_rect_container, 0, LV_PART_MAIN);
    // lv_obj_set_scrollbar_mode(tv_rect_container, LV_SCROLLBAR_MODE_OFF);

    rect1 = lv_obj_create(parent);//lv_img_create(mainscreen);
    // lv_img_set_src(rect1, "F:/rectangle.bin");
    // lv_img_set_pivot(rect1, 50, 50);
    // lv_img_set_angle(rect1, 0);
    lv_obj_set_pos(rect1, 140, 100);
    lv_obj_set_size(rect1, 180, 140);
    lv_obj_set_scrollbar_mode(rect1, LV_SCROLLBAR_MODE_OFF);
    lv_obj_set_style_bg_color(rect1, lv_color_hex(0xFF0004), LV_PART_MAIN);
    lv_obj_add_event_cb(rect1, rect_1_cb, LV_EVENT_CLICKED, NULL);
    lv_obj_add_flag(rect1, LV_OBJ_FLAG_CLICKABLE);
    //Write style for rect1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
    lv_obj_set_style_img_opa(rect1, 255U, LV_PART_MAIN | LV_STATE_DEFAULT);

    //Write codes rect1
    rect2 = lv_obj_create(parent);//lv_img_create(mainscreen);
    // lv_img_set_src(rect2, "F:/rectangle.bin");
    // lv_img_set_pivot(rect2, 50, 50);
    // lv_img_set_angle(rect2, 0);
    lv_obj_set_pos(rect2, 340, 100);
    lv_obj_set_size(rect2, 180, 140);
    lv_obj_set_scrollbar_mode(rect2, LV_SCROLLBAR_MODE_OFF);
    lv_obj_set_style_bg_color(rect2, lv_color_hex(0x6C13F9), LV_PART_MAIN);
    lv_obj_add_flag(rect2, LV_OBJ_FLAG_CLICKABLE);
    //Write style for rect2, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
    lv_obj_set_style_img_opa(rect2, 255U, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_add_event_cb(rect2, rect_2_cb, LV_EVENT_CLICKED, NULL);

    //Write codes tv
    lv_obj_t *tv = lv_tileview_create(parent);
    lv_obj_set_pos(tv, 100, 0);
    lv_obj_set_size(tv, 600, 250);
    lv_obj_set_scrollbar_mode(tv, LV_SCROLLBAR_MODE_OFF);
    lv_obj_add_event_cb(tv, tileview_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

    //Write style for tv, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
    // lv_obj_set_style_bg_opa(tv, 0U, LV_PART_MAIN | LV_STATE_DEFAULT);

    tv_down = lv_tileview_add_tile(tv, 0U, 1U, LV_DIR_TOP);
    //Write codes line
    lv_obj_t *line = lv_obj_create(tv_down);//lv_img_create(tv_down);
    // lv_img_set_src(line, "F:/line.bin");
    // lv_img_set_pivot(line, 50, 50);
    // lv_img_set_angle(line, 0);
    // lv_obj_set_pos(line, 270, 0);
    lv_obj_center(line);
    lv_obj_set_size(line, 60, 10);
    lv_obj_set_style_bg_color(line, lv_color_hex(0xFF13F9), LV_PART_MAIN);
    //Write style for line, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
    lv_obj_set_style_img_opa(line, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    tv_up = lv_tileview_add_tile(tv, 0U, 0U, LV_DIR_BOTTOM);

    lv_obj_t *big_rect = lv_obj_create(tv_up);
    lv_obj_clear_flag(big_rect, LV_OBJ_FLAG_SCROLLABLE);
    lv_obj_set_pos(big_rect, 0, 0);
    lv_obj_set_size(big_rect, 600, 250);
    lv_obj_set_scrollbar_mode(big_rect, LV_SCROLLBAR_MODE_OFF);
    // lv_label_t *label_rect = lv_label_create(big_rect);
    // lv_label_set_text(label_rect, "Big rect");
    // lv_obj_center(label_rect);

    //Write style for big_rect, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
    lv_obj_set_style_border_width(big_rect, 0U, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_radius(big_rect, 0U, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(big_rect, 255U, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(big_rect, lv_color_hex(0xffffff), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_grad_dir(big_rect, LV_GRAD_DIR_NONE, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_top(big_rect, 0U, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_bottom(big_rect, 0U, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_left(big_rect, 0U, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_pad_right(big_rect, 0U, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_shadow_width(big_rect, 0U, LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_tileview_set_tile(tv, tv_down, LV_ANIM_OFF);
}

Screencast from 23-03-2026 15:14:40.zip (723.3 KB)