How to change the Button outline color when it is focused

How-to
1

A blue outline appears when it is focused, I want to change the color. Some one know how to modify it?
Thanks very much!

lvgl_button_1
lvgl_button_1753×383 15.6 KB

2

Hi!

Every LVGL object has set_style_.... functions, and those require also a “selector” as last argument.
In your case you need set_style_outline_color() function.
Documentation:
https://docs.lvgl.io/master/overview/style.html?highlight=set_style_outline_color#_CPPv430lv_obj_set_style_outline_colorP9_lv_obj_t10lv_color_t19lv_style_selector_t

The “selector” can be a PART (lv.PART.…), and/or STATE (lv.STATE.…).
So you just need to pass the state “focused”:
lv.STATE.FOCUSED

Documentation:
https://docs.lvgl.io/master/widgets/obj.html#_CPPv4Ut1_1

You can quickly test it in LVGL MicroPython simulator:
https://sim.lvgl.io/v8.1/micropython/ports/javascript/index.html

Copy-paste this test code, hit “Restart”, then click on button:

# Initialize 
import display_driver
import lvgl as lv

# Create a button with a label 
scr = lv.obj()
lv.scr_load(scr)

btn = lv.btn(scr)
btn.align(lv.ALIGN.CENTER, 0, 0)
btn.set_style_outline_width(3, lv.STATE.DEFAULT)
btn.set_style_outline_color(lv.color_hex(0xFF0000), lv.STATE.DEFAULT)

# Set focused outline color
btn.set_style_outline_color(lv.color_black(), lv.STATE.FOCUSED)

label = lv.label(btn)
label.set_text('Hello World!')