How to change checkbox style

imprego · March 9, 2021, 3:06pm

I try change checkbox default style to monochrome black and white style, but if press on other checkbox that checkbox be light-red, and if press on selected checkbox, it be dark-red.
I writed this styles:

    lv_style_set_bg_opa(&style_checkbox_bg, LV_STATE_DEFAULT, LV_OPA_COVER);
    lv_style_set_margin_all(&style_checkbox_bg, LV_STATE_DEFAULT, 0);
    lv_style_set_pad_all(&style_checkbox_bg, LV_STATE_DEFAULT, 4);
    lv_style_set_pad_inner(&style_checkbox_bg, LV_STATE_DEFAULT, 4);
    lv_style_set_radius(&style_checkbox_bg, LV_STATE_DEFAULT, 4);
    lv_style_set_border_width(&style_checkbox_bg, LV_STATE_DEFAULT, 1);
    lv_style_set_border_color(&style_checkbox_bg, LV_STATE_DEFAULT, LV_COLOR_WHITE);
    lv_style_set_outline_width(&style_checkbox_bg, LV_STATE_DEFAULT, 0);
    lv_style_set_bg_color(&style_checkbox_bg, LV_STATE_DEFAULT, LV_COLOR_BLACK);
    lv_style_set_text_color(&style_checkbox_bg, LV_STATE_DEFAULT, LV_COLOR_WHITE);
    lv_style_set_text_font(&style_checkbox_bg, LV_STATE_DEFAULT, &RobotoMonoMedium16);

    lv_style_set_bg_opa(&style_checkbox_bg, LV_STATE_PRESSED, LV_OPA_COVER);
    lv_style_set_margin_all(&style_checkbox_bg, LV_STATE_PRESSED, 0);
    lv_style_set_pad_all(&style_checkbox_bg, LV_STATE_PRESSED, 4);
    lv_style_set_pad_inner(&style_checkbox_bg, LV_STATE_PRESSED, 4);
    lv_style_set_radius(&style_checkbox_bg, LV_STATE_PRESSED, 4);
    lv_style_set_border_width(&style_checkbox_bg, LV_STATE_PRESSED, 4);
    lv_style_set_border_color(&style_checkbox_bg, LV_STATE_PRESSED, LV_COLOR_WHITE);
    lv_style_set_outline_width(&style_checkbox_bg, LV_STATE_PRESSED, 0);
    lv_style_set_bg_color(&style_checkbox_bg, LV_STATE_PRESSED, LV_COLOR_BLACK);
    lv_style_set_text_color(&style_checkbox_bg, LV_STATE_PRESSED, LV_COLOR_WHITE);
    lv_style_set_text_font(&style_checkbox_bg, LV_STATE_PRESSED, &RobotoMonoMedium16);

    lv_style_set_bg_opa(&style_checkbox_bg, LV_STATE_EDITED, LV_OPA_COVER);
    lv_style_set_margin_all(&style_checkbox_bg, LV_STATE_EDITED, 0);
    lv_style_set_pad_all(&style_checkbox_bg, LV_STATE_EDITED, 4);
    lv_style_set_pad_inner(&style_checkbox_bg, LV_STATE_EDITED, 4);
    lv_style_set_radius(&style_checkbox_bg, LV_STATE_EDITED, 4);
    lv_style_set_border_width(&style_checkbox_bg, LV_STATE_EDITED, 4);
    lv_style_set_border_color(&style_checkbox_bg, LV_STATE_EDITED, LV_COLOR_WHITE);
    lv_style_set_outline_width(&style_checkbox_bg, LV_STATE_EDITED, 0);
    lv_style_set_bg_color(&style_checkbox_bg, LV_STATE_EDITED, LV_COLOR_BLACK);
    lv_style_set_text_color(&style_checkbox_bg, LV_STATE_EDITED, LV_COLOR_WHITE);
    lv_style_set_text_font(&style_checkbox_bg, LV_STATE_EDITED, &RobotoMonoMedium16);

    lv_style_set_bg_opa(&style_checkbox_bg, LV_STATE_FOCUSED, LV_OPA_COVER);
    lv_style_set_margin_all(&style_checkbox_bg, LV_STATE_FOCUSED, 0);
    lv_style_set_pad_all(&style_checkbox_bg, LV_STATE_FOCUSED, 4);
    lv_style_set_pad_inner(&style_checkbox_bg, LV_STATE_FOCUSED, 4);
    lv_style_set_radius(&style_checkbox_bg, LV_STATE_FOCUSED, 4);
    lv_style_set_border_width(&style_checkbox_bg, LV_STATE_FOCUSED, 4);
    lv_style_set_border_color(&style_checkbox_bg, LV_STATE_FOCUSED, LV_COLOR_WHITE);
    lv_style_set_outline_width(&style_checkbox_bg, LV_STATE_FOCUSED, 0);
    lv_style_set_bg_color(&style_checkbox_bg, LV_STATE_FOCUSED, LV_COLOR_BLACK);
    lv_style_set_text_color(&style_checkbox_bg, LV_STATE_FOCUSED, LV_COLOR_WHITE);
    lv_style_set_text_font(&style_checkbox_bg, LV_STATE_FOCUSED, &RobotoMonoMedium16);



    lv_style_copy(&style_checkbox_bullet, &style_checkbox_bg);

    lv_style_set_bg_opa(&style_checkbox_bullet, LV_STATE_EDITED, LV_OPA_COVER);
    lv_style_set_margin_all(&style_checkbox_bullet, LV_STATE_EDITED, 0);
    lv_style_set_pad_all(&style_checkbox_bullet, LV_STATE_EDITED, 4);
    lv_style_set_pad_inner(&style_checkbox_bullet, LV_STATE_EDITED, 4);
    lv_style_set_radius(&style_checkbox_bullet, LV_STATE_EDITED, 4);
    lv_style_set_border_width(&style_checkbox_bullet, LV_STATE_EDITED, 4);
    lv_style_set_border_color(&style_checkbox_bullet, LV_STATE_EDITED, LV_COLOR_WHITE);
    lv_style_set_outline_width(&style_checkbox_bullet, LV_STATE_EDITED, 0);
    lv_style_set_bg_color(&style_checkbox_bullet, LV_STATE_EDITED, LV_COLOR_BLACK);
    lv_style_set_text_color(&style_checkbox_bullet, LV_STATE_EDITED, LV_COLOR_WHITE);
    lv_style_set_text_font(&style_checkbox_bullet, LV_STATE_EDITED, &RobotoMonoMedium16);

    lv_style_set_bg_opa(&style_checkbox_bullet, LV_STATE_DISABLED, LV_OPA_COVER);
    lv_style_set_margin_all(&style_checkbox_bullet, LV_STATE_DISABLED, 0);
    lv_style_set_pad_all(&style_checkbox_bullet, LV_STATE_DISABLED, 4);
    lv_style_set_pad_inner(&style_checkbox_bullet, LV_STATE_DISABLED, 4);
    lv_style_set_radius(&style_checkbox_bullet, LV_STATE_DISABLED, 4);
    lv_style_set_border_width(&style_checkbox_bullet, LV_STATE_DISABLED, 4);
    lv_style_set_border_color(&style_checkbox_bullet, LV_STATE_DISABLED, LV_COLOR_WHITE);
    lv_style_set_outline_width(&style_checkbox_bullet, LV_STATE_DISABLED, 0);
    lv_style_set_bg_color(&style_checkbox_bullet, LV_STATE_DISABLED, LV_COLOR_BLACK);
    lv_style_set_text_color(&style_checkbox_bullet, LV_STATE_DISABLED, LV_COLOR_WHITE);
    lv_style_set_text_font(&style_checkbox_bullet, LV_STATE_DISABLED, &RobotoMonoMedium16);

    lv_style_set_bg_opa(&style_checkbox_bullet, LV_STATE_HOVERED, LV_OPA_COVER);
    lv_style_set_margin_all(&style_checkbox_bullet, LV_STATE_HOVERED, 0);
    lv_style_set_pad_all(&style_checkbox_bullet, LV_STATE_HOVERED, 4);
    lv_style_set_pad_inner(&style_checkbox_bullet, LV_STATE_HOVERED, 4);
    lv_style_set_radius(&style_checkbox_bullet, LV_STATE_HOVERED, 4);
    lv_style_set_border_width(&style_checkbox_bullet, LV_STATE_HOVERED, 4);
    lv_style_set_border_color(&style_checkbox_bullet, LV_STATE_HOVERED, LV_COLOR_WHITE);
    lv_style_set_outline_width(&style_checkbox_bullet, LV_STATE_HOVERED, 0);
    lv_style_set_bg_color(&style_checkbox_bullet, LV_STATE_HOVERED, LV_COLOR_BLACK);
    lv_style_set_text_color(&style_checkbox_bullet, LV_STATE_HOVERED, LV_COLOR_WHITE);
    lv_style_set_text_font(&style_checkbox_bullet, LV_STATE_HOVERED, &RobotoMonoMedium16);

In the simulator it works as described above, in the stm32 project also has strange animation bullet’s mark and bulet’s color.

Pressed #1:

Selected #1 and pressed #2:

Rhaoma · March 9, 2021, 6:15pm

So. what exactly do you want to achieve? Do you want the checkbox to be black and white like the rest? Also would you mind sharing the code were you create and “describe” your objects and the checkboxes?

imprego · March 10, 2021, 7:29am

yes, i want to see black and white design of checkbox, but at the moment it is works for LV_BTN_STATE_CHECKED_RELEASED and LV_BTN_STATE_RELEASED states.

    lv_style_t style_background;
    lv_style_set_bg_opa(&style_background, LV_STATE_DEFAULT, LV_OPA_COVER);
    lv_style_set_margin_all(&style_background, LV_STATE_DEFAULT, 0);
    lv_style_set_pad_all(&style_background, LV_STATE_DEFAULT, 0);
    lv_style_set_pad_inner(&style_background, LV_STATE_DEFAULT, 0);
    lv_style_set_radius(&style_background, LV_STATE_DEFAULT, 0);
    lv_style_set_border_width(&style_background, LV_STATE_DEFAULT, 0);
    lv_style_set_outline_width(&style_background, LV_STATE_DEFAULT, 0);
    lv_style_set_bg_color(&style_background, LV_STATE_DEFAULT, LV_COLOR_BLACK);



lv_obj_t *channel_cb[4] = {NULL};

void channel_cb_setting_sb(lv_obj_t *obj, lv_event_t event)
{
    if(event == LV_EVENT_VALUE_CHANGED)
    {
        for(uint16_t i = 0; i < 4; ++i)
        {
            if(channel_cb[i] != obj)
            {
                lv_checkbox_set_state(channel_cb[i], LV_BTN_STATE_RELEASED);
            }
            else
            {
                lv_checkbox_set_state(channel_cb[i], LV_BTN_STATE_CHECKED_RELEASED);
            }
        }
    }
}

void ch_init(void)
{
    screen = lv_cont_create(NULL, NULL);
    lv_obj_add_style(screen, LV_CONT_PART_MAIN, &style_background);

    char tmp[8] = {0};
    for(uint16_t i = 0; i < 4; ++i)
    {
        lv_obj_t *cont = lv_cont_create(screen, NULL);
        lv_obj_add_style(cont, LV_CONT_PART_MAIN, &style_background);
        lv_cont_set_layout(cont, LV_LAYOUT_CENTER);
        lv_obj_set_pos(cont, 48 + 4 + 108 * i, 68);
        lv_obj_set_size(cont, 100, 56);

        channel_cb[i] = lv_checkbox_create(cont, NULL);
        lv_obj_add_style(channel_cb[i], LV_CHECKBOX_PART_BG, &style_checkbox_bg);
        lv_obj_add_style(channel_cb[i], LV_CHECKBOX_PART_BULLET, &style_checkbox_bullet);

        sprintf(tmp, "CH. %d", i + 1);
        lv_checkbox_set_text(channel_cb[i], tmp);
        //lv_checkbox_set_checked(channel_cb[i], false);
        lv_checkbox_set_state(channel_cb[i], LV_BTN_STATE_RELEASED);
        lv_obj_set_event_cb(channel_cb[i], channel_cb_setting_sb);
    }
}

Rhaoma · March 10, 2021, 3:22pm

Okay so I’m back now. The question proved to be a bit more challening than expected. I found that if you combine LV_STATE_CHECKED and LV_STATE_PRESSED like so:
lv_style_set_bg_color (&style_checkbox_bullet, LV_STATE_CHECKED | LV_STATE_PRESSED, LV_COLOR_BLACK); then it fixes it. I fixed half of the problem quick and I honestly dont remember what it was, but I have included the styles that worked for me. I might have modified it a bit, but i hope it helps still. I’ll try to remember what caused the “first” problem and get back if I do

lv_style_init               (&style_checkbox_bg);
lv_style_set_bg_opa         (&style_checkbox_bg, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_style_set_margin_all     (&style_checkbox_bg, LV_STATE_DEFAULT, 0);
lv_style_set_pad_all        (&style_checkbox_bg, LV_STATE_DEFAULT, 4);
lv_style_set_pad_inner      (&style_checkbox_bg, LV_STATE_DEFAULT, 4);
lv_style_set_radius         (&style_checkbox_bg, LV_STATE_DEFAULT, 4);
lv_style_set_border_width   (&style_checkbox_bg, LV_STATE_DEFAULT, 1);
lv_style_set_border_color   (&style_checkbox_bg, LV_STATE_DEFAULT, LV_COLOR_WHITE);
lv_style_set_outline_width  (&style_checkbox_bg, LV_STATE_DEFAULT, 0);
lv_style_set_bg_color       (&style_checkbox_bg, LV_STATE_DEFAULT, LV_COLOR_BLACK);
lv_style_set_text_color     (&style_checkbox_bg, LV_STATE_DEFAULT, LV_COLOR_WHITE);
lv_style_set_text_font      (&style_checkbox_bg, LV_STATE_DEFAULT, &RobotoMonoMedium16);

lv_style_set_bg_opa         (&style_checkbox_bg, LV_STATE_PRESSED, LV_OPA_COVER);
lv_style_set_margin_all     (&style_checkbox_bg, LV_STATE_PRESSED, 0);
lv_style_set_pad_all        (&style_checkbox_bg, LV_STATE_PRESSED, 4);
lv_style_set_pad_inner      (&style_checkbox_bg, LV_STATE_PRESSED, 4);
lv_style_set_radius         (&style_checkbox_bg, LV_STATE_PRESSED, 4);
lv_style_set_border_width   (&style_checkbox_bg, LV_STATE_PRESSED, 4);
lv_style_set_border_color   (&style_checkbox_bg, LV_STATE_PRESSED, LV_COLOR_WHITE);
lv_style_set_outline_width  (&style_checkbox_bg, LV_STATE_PRESSED, 0);
lv_style_set_bg_color       (&style_checkbox_bg, LV_STATE_PRESSED, LV_COLOR_BLACK);
lv_style_set_text_color     (&style_checkbox_bg, LV_STATE_PRESSED, LV_COLOR_WHITE);
lv_style_set_text_font      (&style_checkbox_bg, LV_STATE_PRESSED, &RobotoMonoMedium16);

lv_style_set_bg_opa         (&style_checkbox_bg, LV_STATE_CHECKED, LV_OPA_COVER);
lv_style_set_margin_all     (&style_checkbox_bg, LV_STATE_CHECKED, 0);
lv_style_set_pad_all        (&style_checkbox_bg, LV_STATE_CHECKED, 4);
lv_style_set_pad_inner      (&style_checkbox_bg, LV_STATE_CHECKED, 4);
lv_style_set_radius         (&style_checkbox_bg, LV_STATE_CHECKED, 4);
lv_style_set_border_width   (&style_checkbox_bg, LV_STATE_CHECKED, 1);
lv_style_set_border_color   (&style_checkbox_bg, LV_STATE_CHECKED, LV_COLOR_WHITE);
lv_style_set_outline_width  (&style_checkbox_bg, LV_STATE_CHECKED, 0);
lv_style_set_bg_color       (&style_checkbox_bg, LV_STATE_CHECKED, LV_COLOR_BLACK);
lv_style_set_text_color     (&style_checkbox_bg, LV_STATE_CHECKED, LV_COLOR_WHITE);
lv_style_set_text_font      (&style_checkbox_bg, LV_STATE_CHECKED, &RobotoMonoMedium16);

lv_style_set_bg_opa         (&style_checkbox_bg, LV_STATE_FOCUSED, LV_OPA_COVER);
lv_style_set_margin_all     (&style_checkbox_bg, LV_STATE_FOCUSED, 0);
lv_style_set_pad_all        (&style_checkbox_bg, LV_STATE_FOCUSED, 4);
lv_style_set_pad_inner      (&style_checkbox_bg, LV_STATE_FOCUSED, 4);
lv_style_set_radius         (&style_checkbox_bg, LV_STATE_FOCUSED, 4);
lv_style_set_border_width   (&style_checkbox_bg, LV_STATE_FOCUSED, 1);
lv_style_set_border_color   (&style_checkbox_bg, LV_STATE_FOCUSED, LV_COLOR_WHITE);
lv_style_set_outline_width  (&style_checkbox_bg, LV_STATE_FOCUSED, 0);
lv_style_set_bg_color       (&style_checkbox_bg, LV_STATE_FOCUSED, LV_COLOR_BLACK);
lv_style_set_text_color     (&style_checkbox_bg, LV_STATE_FOCUSED, LV_COLOR_WHITE);
lv_style_set_text_font      (&style_checkbox_bg, LV_STATE_FOCUSED, &RobotoMonoMedium16);


lv_style_init               (&style_checkbox_bullet);
lv_style_copy               (&style_checkbox_bullet, &style_checkbox_bg);
lv_style_set_bg_opa         (&style_checkbox_bullet, LV_STATE_CHECKED, LV_OPA_COVER);
lv_style_set_margin_all     (&style_checkbox_bullet, LV_STATE_CHECKED, 0);
lv_style_set_pad_all        (&style_checkbox_bullet, LV_STATE_CHECKED, 4);
lv_style_set_pad_inner      (&style_checkbox_bullet, LV_STATE_CHECKED, 4);
lv_style_set_radius         (&style_checkbox_bullet, LV_STATE_CHECKED, 4);
lv_style_set_border_width   (&style_checkbox_bullet, LV_STATE_CHECKED, 1);
lv_style_set_border_color   (&style_checkbox_bullet, LV_STATE_CHECKED, LV_COLOR_WHITE);
lv_style_set_outline_width  (&style_checkbox_bullet, LV_STATE_CHECKED, 0);
lv_style_set_bg_color       (&style_checkbox_bullet, LV_STATE_CHECKED, LV_COLOR_BLACK);
lv_style_set_text_color     (&style_checkbox_bullet, LV_STATE_CHECKED, LV_COLOR_WHITE);
lv_style_set_text_font      (&style_checkbox_bullet, LV_STATE_CHECKED, &RobotoMonoMedium16);

lv_style_set_bg_opa         (&style_checkbox_bullet, LV_STATE_FOCUSED, LV_OPA_COVER);
lv_style_set_margin_all     (&style_checkbox_bullet, LV_STATE_FOCUSED, 0);
lv_style_set_pad_all        (&style_checkbox_bullet, LV_STATE_FOCUSED, 4);
lv_style_set_pad_inner      (&style_checkbox_bullet, LV_STATE_FOCUSED, 4);
lv_style_set_radius         (&style_checkbox_bullet, LV_STATE_FOCUSED, 4);
lv_style_set_border_width   (&style_checkbox_bullet, LV_STATE_FOCUSED, 1);
lv_style_set_border_color   (&style_checkbox_bullet, LV_STATE_FOCUSED, LV_COLOR_WHITE);
lv_style_set_outline_width  (&style_checkbox_bullet, LV_STATE_FOCUSED, 0);
lv_style_set_bg_color       (&style_checkbox_bullet, LV_STATE_FOCUSED, LV_COLOR_BLACK);
lv_style_set_text_color     (&style_checkbox_bullet, LV_STATE_FOCUSED, LV_COLOR_WHITE);
lv_style_set_text_font      (&style_checkbox_bullet, LV_STATE_FOCUSED, &RobotoMonoMedium16);


lv_style_set_bg_opa         (&style_checkbox_bullet, LV_STATE_PRESSED, LV_OPA_COVER);
lv_style_set_margin_all     (&style_checkbox_bullet, LV_STATE_PRESSED, 0);
lv_style_set_pad_all        (&style_checkbox_bullet, LV_STATE_PRESSED, 4);
lv_style_set_pad_inner      (&style_checkbox_bullet, LV_STATE_PRESSED, 4);
lv_style_set_radius         (&style_checkbox_bullet, LV_STATE_PRESSED, 4);
lv_style_set_border_width   (&style_checkbox_bullet, LV_STATE_PRESSED, 1);
lv_style_set_border_color   (&style_checkbox_bullet, LV_STATE_PRESSED, LV_COLOR_WHITE);
lv_style_set_transition_time(&style_checkbox_bullet, LV_STATE_PRESSED, 0);
lv_style_set_outline_width  (&style_checkbox_bullet, LV_STATE_PRESSED, 0);
lv_style_set_bg_color       (&style_checkbox_bullet, LV_STATE_CHECKED | LV_STATE_PRESSED, LV_COLOR_BLACK);
lv_style_set_text_color     (&style_checkbox_bullet, LV_STATE_PRESSED, LV_COLOR_WHITE);
lv_style_set_text_font      (&style_checkbox_bullet, LV_STATE_PRESSED, &RobotoMonoMedium16);

lv_style_init               (&style_background);
lv_style_set_bg_opa         (&style_background, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_style_set_margin_all     (&style_background, LV_STATE_DEFAULT, 0);
lv_style_set_pad_all        (&style_background, LV_STATE_DEFAULT, 0);
lv_style_set_pad_inner      (&style_background, LV_STATE_DEFAULT, 0);
lv_style_set_radius         (&style_background, LV_STATE_DEFAULT, 0);
lv_style_set_border_width   (&style_background, LV_STATE_DEFAULT, 0);
lv_style_set_outline_width  (&style_background, LV_STATE_DEFAULT, 0);
lv_style_set_bg_color       (&style_background, LV_STATE_DEFAULT, LV_COLOR_BLACK);

Rhaoma · March 10, 2021, 3:28pm

I believe i changed one if the states from maybe LV_STATE_HOVERED to LV_STATE_CHECKED in the bullet style

lekani9 · August 21, 2021, 9:46am

I tried your method but its not working.
Is there any other way to make it work.