Rounding only some corners on buttons?

How-to
1

What do you want to achieve?

I’m looking to build something like this button bar:

image
image1626×303 16.1 KB

What have you tried so far?

I’ve managed to create the buttons and the outer container (using a combination of borders and outlines), but I’m having a hard time with the fact that LVGL only allows setting radius for all corners, and not on a per-corner basis.

I can set the radius on the outer container and set it to clip children, but then the borders on the inner buttons are also clipped instead of being rounded.

Anyone know how I can do this? I am considering using an image button, but I’d like to generate the UI programmatically if possible.

Thanks!

2

Different rounding on each corner is not yet supported on LVGL. The best you can do is to remove the button outline and padding while keeping the outer container rounded.
This feature has been requested a couple of times and might soon be added to LVGL

3

Are there any rough estimates about when this feature could be supported?