Dropdown menu adding

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);
`