How to extend a button's clickable area outside of parent boundaries

How-to
1

What do you want to achieve?

I want to extend a button’s clickable area outside of its parent boundaries.
My interface has a relatively slim header bar on top with buttons, someone not using a stylus or with big fingers may have trouble clicking the buttons.
The solution then is to increase the clickable area to make these buttons clickable without making the entire header bigger.

What have you tried so far?

I have tried using
lv_obj_set_ext_click_area(), but this does not expand the clickable area beyond the size of the header bar (parent of my buttons).

Environment

  • MCU/MPU/Board: Not relevant
  • LVGL version: See lv_version.h LVGL 9.2

What can be done?

So far the only fix I have found is to place the buttons on lv_layer_top().
But this gets quite messy, especially with hiding/showing the header bar. If I could have my individual buttons be children of the entire bar, it would make things a lot easier.

Kind regards,
Tinus

2

Hi!

One solution I can think of is to create an “invisible” or transparent header bar that has a bigger height on top of the existing one and create buttons as child objects of this invisible header bar. And then use lv_obj_set_ext_click_area for the buttons.

You can visually position the buttons on top of the visible header bar, but they will belong to the taller invisible bar. And the extended click area should work.

Let us know if you tried that already and we can think of another solution.

3

Hello,

Thanks for the idea.

I had indeed thought of this after making this post and implemented already. It works fine and saves a lot of manual hiding/unhiding of buttons along with the header.

1 Like