How to Remove Focused/Pressed Button Border in List

How-to
1

Description

I am attempting to remove the focused/pressed border style for the buttons in a list. I have tried the below code without luck, and I could use some advice.

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

Simulator

What LVGL version are you using?

7.8.1-dev

What do you want to achieve?

Customize the borders of the list buttons

What have you tried so far?

See below

Code to reproduce

lv_obj_t * list = lv_list_create(lv_scr_act(), NULL);
lv_obj_t * btn_calendars = lv_list_add_btn(list, NULL, "Calendars");
lv_obj_add_style(btn_calendars, LV_BTN_PART_MAIN, &style_default_border_none);
// I've also tried LV_BTN_STATE_FOCUSED, LV_BTN_STATE_CHECKED_PRESSED, and the non-BTN counterparts
lv_obj_set_style_local_border_width(btn_calendars, LV_BTN_PART_MAIN, LV_BTN_STATE_PRESSED, 0);

Screenshot and/or video

N/A

2

Digging through the lv_theme_material.c, around line 756, I found that I need to change the outline in the focused state to do what I need. In fact, I think I’m going to spend some time digging through the theme stuff (:sweat_smile:) to get more acquainted that way.

3

To be honest, I think that is the easiest way to figure out the new styles at the moment, until more documentation gets written.

1 Like