Checkbox(lv_cb)

How-to
1

Description

How to set the label to the left side of the checkbox

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

Using simulator

What LVGL version are you using?

v7.3.1

What do you want to achieve?

I recently started working with LVGL.
I want to use Checkbox to enable or disable few settings as configuration for the other widgets.
Currently I see that by default label appears to the right side of the Checkbox. Is there any way that the label could be arranged to the left side of the checkbox?

What have you tried so far?

I haven’t tried much. I just learnt how to use checkbox.

2

LVGL does not provide an interface to change the LABEL orientation of the CHECKBOX, but you can modify the source code to achieve your functionality.Locate the lv_checkbox_create function in lv_check_box.c and modify it as follows

V7.10.1

lv_obj_t * lv_checkbox_create(lv_obj_t * par, const lv_obj_t * copy)
{
    LV_LOG_TRACE("check box create started");

    /*Create the ancestor basic object*/
    lv_obj_t * cb = lv_btn_create(par, copy);
    LV_ASSERT_MEM(cb);
    if(cb == NULL) return NULL;

    if(ancestor_signal == NULL) ancestor_signal = lv_obj_get_signal_cb(cb);

    lv_checkbox_ext_t * ext = lv_obj_allocate_ext_attr(cb, sizeof(lv_checkbox_ext_t));
    LV_ASSERT_MEM(ext);
    if(ext == NULL) {
        lv_obj_del(cb);
        return NULL;
    }

    ext->bullet = NULL;
    ext->label  = NULL;

    lv_obj_set_signal_cb(cb, lv_checkbox_signal);

    /*Init the new checkbox object*/
    if(copy == NULL) {
        ext->label = lv_label_create(cb, NULL);
        ext->bullet = lv_obj_create(cb, NULL);
        lv_obj_set_click(ext->bullet, false);

       

        lv_checkbox_set_text(cb, "Check box");
        lv_btn_set_layout(cb, LV_LAYOUT_ROW_MID);
        lv_btn_set_fit(cb, LV_FIT_TIGHT);
        lv_btn_set_checkable(cb, true);
        lv_obj_add_protect(cb, LV_PROTECT_PRESS_LOST);

        lv_theme_apply(cb, LV_THEME_CHECKBOX);

    }

In effect, the creation order of Bullet and Label is swapped.Based on the above code, you can also modify it to specify the location of the LABEL at creation time
image

1 Like
3

In v7, you can do this without a code modification with the following trick:

lv_obj_move_foreground(lv_obj_get_child_back(checkbox, NULL));

It will move the checkmark box to be after the label.

1 Like