Image button (lv_imagebutton)


The Image button is very similar to the simple 'Button' object. The only difference is that it displays user-defined images in each state instead of drawing a rectangle.

You can set a left, right and center image, and the center image will be repeated to match the width of the object.

Parts and Styles

  • LV_PART_MAIN Refers to the image(s). If background style properties are used, a rectangle will be drawn behind the image button.


Image sources

To set the image in a state, use the lv_imagebutton_set_src(imagebutton, LV_IMAGEBUTTON_STATE_..., src_left, src_center, src_right).

The image sources work the same as described in the Image object except that "Symbols" are not supported by the Image button. Any of the sources can NULL.

If only src_center is specified, the width of the widget will be set automatically to the width of the image. However, if all three sources are set, the width needs to be set by the user (using e.g. lv_obj_set_width) and the center image will be tiled to fill the given size.

The possible states are:

If you set sources only in LV_IMAGEBUTTON_STATE_RELEASED, these sources will be used in other states too. If you set e.g. LV_IMAGEBUTTON_STATE_PRESSED they will be used in pressed state instead of the released images.


Instead of the regular lv_obj_add_state() and lv_obj_remove_state() functions, the lv_imagebutton_set_state(imagebutton, LV_IMAGEBUTTON_STATE_...) function should be used to manually set a state.


Learn more about Events.


Learn more about Keys.


Simple Image button

#include "../../lv_examples.h"

void lv_example_imagebutton_1(void)

    /*Create a transition animation on width transformation and recolor.*/
    static lv_style_prop_t tr_prop[] = {LV_STYLE_TRANSFORM_WIDTH, LV_STYLE_IMAGE_RECOLOR_OPA, 0};
    static lv_style_transition_dsc_t tr;
    lv_style_transition_dsc_init(&tr, tr_prop, lv_anim_path_linear, 200, 0, NULL);

    static lv_style_t style_def;
    lv_style_set_text_color(&style_def, lv_color_white());
    lv_style_set_transition(&style_def, &tr);

    /*Darken the button when pressed and make it wider*/
    static lv_style_t style_pr;
    lv_style_set_image_recolor_opa(&style_pr, LV_OPA_30);
    lv_style_set_image_recolor(&style_pr, lv_color_black());
    lv_style_set_transform_width(&style_pr, 20);

    /*Create an image button*/
    lv_obj_t * imagebutton1 = lv_imagebutton_create(lv_screen_active());
    lv_imagebutton_set_src(imagebutton1, LV_IMAGEBUTTON_STATE_RELEASED, &imagebutton_left, &imagebutton_mid,
    lv_obj_add_style(imagebutton1, &style_def, 0);
    lv_obj_add_style(imagebutton1, &style_pr, LV_STATE_PRESSED);

    lv_obj_set_width(imagebutton1, 100);
    lv_obj_align(imagebutton1, LV_ALIGN_CENTER, 0, 0);

    /*Create a label on the image button*/
    lv_obj_t * label = lv_label_create(imagebutton1);
    lv_label_set_text(label, "Button");
    lv_obj_align(label, LV_ALIGN_CENTER, 0, -4);