Please help for image button border with lv_group

Hi everyone. I need your help!
I have create a lv_group and put 6 image button into it. When I use keyboard to change focus prev/next. I can see orange mask but not the orange border. I have already set style.body.border, but it doesn’t work. May I ask what is the reason?

Waiting for helps. Thanks all.

Hi Vivian,
Can you share us your code?

my keycode:

group1 = lv_group_create();
lv_indev_set_group(my_indev, group1);
...
for(int i = 0; i < 3; i++) {
    listbtn[i] = lv_imgbtn_create(parent, NULL);
    lv_imgbtn_set_src(listbtn[i], LV_BTN_STATE_REL,     icon_test);
    lv_imgbtn_set_src(listbtn[i], LV_BTN_STATE_PR,      icon_test);
    lv_imgbtn_set_src(listbtn[i], LV_BTN_STATE_TGL_REL, icon_test);
    lv_imgbtn_set_src(listbtn[i], LV_BTN_STATE_TGL_PR,  icon_test);
    lv_group_add_obj(group1, listbtn[i]);
    lv_imgbtn_set_state(listbtn[i], LV_BTN_STATE_REL);
}

I found that button is ok, but both image and image button are fail. I mean image and image button doesn’t show border. Any one can tell me why? Thanks a lot.

Hi,

It’s because the border is not drawn on the images.

If you want you can draw a the border manually here.

Example:

if(imgbtn == lv_group_get_focused(lv_obj_get_group(imgbtn)) {
        //draw a border
        lv_style_t style;
        lv_style_copy(&style, lv_style_plain);
        style.body.border.width = 3;
        style.body.border.color = LV_COLOR_RED;
        style.body.opa = LV_OPA_TRANSP;
        lv_draw_rect(&imgbtn->coords, mask, &style, LV_OPA_COVER);
}
1 Like

where the code you place,I cant view it

In v8 it works in a more flexible way. See Styles — LVGL documentation