Recolor image on button

Hello, everyone
I have a button with a text label. Styles are used for her states.

style_release.body.radius = 8;
style_release.body.border.width = 3;
style_release.body.border.opa = LV_OPA_100;
style_release.text.font = &roboto_24_regular;
style_release.image.intense = LV_OPA_100;

style_release.body.main_color = UI_COLOR_ACCENT;
style_release.body.grad_color = UI_COLOR_ACCENT;
style_release.body.border.color = UI_COLOR_ACCENT;
style_release.text.color = style_release.image.color = UI_COLOR_WHITE;

lv_style_copy(&style_pressed, &style_release);
style_pressed.body.main_color = UI_COLOR_ACCENT_PRESSED;
style_pressed.body.grad_color = UI_COLOR_ACCENT_PRESSED;
style_pressed.body.border.color = UI_COLOR_ACCENT_PRESSED;
style_pressed.text.color = style_pressed.image.color = UI_COLOR_WHITE;

lv_style_copy(&style_disabled, &style_release);
style_disabled.body.main_color = UI_COLOR_BASIC_GREY;
style_disabled.body.grad_color = UI_COLOR_BASIC_GREY;
style_disabled.body.border.color = UI_COLOR_BASIC_GREY;
style_disabled.text.color = style_disabled.image.color = UI_COLOR_DISABLED_GREY;

lv_obj_set_size(btn, SHORT_BUTTON_W, SHORT_BUTTON_H);
lv_btn_set_style(btn, LV_BTN_STATE_REL, &style_release);
lv_btn_set_style(btn, LV_BTN_STATE_PR, &style_pressed);
lv_btn_set_style(btn, LV_BTN_STATE_INA, &style_disabled);
lv_obj_set_size(label, SHORT_BUTTON_LABEL_W, SHORT_BUTTON_LABEL_H);

She looks like this
%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5
I need to add an icon so that it also looks like a label
It is necessary that the color of the image changes as well as the color of the text.
How to do it?

1 Like

If I understand your question you want to know how to put an icon onto a button?
try this

void lv_ex_btn_1(void)
{
    static lv_style_t style_new;                         /*Styles can't be local variables*/
    lv_style_copy(&style_new, &lv_style_pretty);         /*Copy a built-in style as a starting point*/
    style_new.text.color = LV_COLOR_RED;                 /*Red text color */

    lv_obj_t* btn1 = lv_btn_create(lv_scr_act(), NULL);
    lv_btn_set_style(btn1, LV_BTN_STATE_REL, &style_new);

    lv_obj_set_event_cb(btn1, event_handler);
    lv_obj_align(btn1, NULL, LV_ALIGN_CENTER, 0, 0);

    lv_obj_t*  label = lv_label_create(btn1, NULL);
    lv_label_set_text(label, LV_SYMBOL_HOME);
}

just set the label text in the button to the icon image
image

no
I already put the icon on the button

///add icon
void ui_add_button_img(lv_obj_t * btn, lv_img_dsc_t *icon)
{
    lv_obj_t * img;
    img = lv_img_create(btn, NULL);
    lv_img_set_src(img, icon);
    lv_obj_align(img, NULL, LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0);
}

/// recolor icon
lv_obj_t* img = lv_obj_get_child(btn, NULL);
lv_img_set_style(img, LV_IMG_STYLE_MAIN, &style_disabled_alt );

I need the icon color to change automatically from the state of the button

You need style.image.color and set style.image.intense = 255
See here https://docs.littlevgl.com/en/html/object-types/img.html#image-recoloring

1 Like

Thanks
I have already decided the problem.
The code resulted by me earned

Hi@van
can you share your code? I have same problem.

1 Like