LVGL Menu Bar with XML Animations

My projects
1

Another little project made in LVGL Pro! :rocket:

Few days ago I was using Google Drive iOS app and I noticed the details of the menu bar and how it looks design wise. I thought that little blue rectangle animation would be a good case to try out LVGL Pro XML animations and here is the result.

Notice how the blue rectangle animates its width when the menu is clicked.

gdrive_menubar

Here is the source code for the project: GitHub - giobauermeister/google_drive_menubar_lvgl_pro: A Google Drive menubar made with LVGL Pro

Check the video below to se it running on the Waveshare ESP32-C6 1.9" Display

If you want to learn more about LVGL animations in XML, check the animations tutorial here: lvgl_editor/tutorials/8_animations at master · lvgl/lvgl_editor · GitHub

2 Likes
2

Very nice! I’ll add better local style support so that you will be able to do something like

<lv_obj bg_image_src="$normal_image" bg_image_src-checked="$selected_image"/>

saving the extra code to hide/unhide images.

I’ve just noticed that using <view name="..."> messes up the inspector. Adding a name here shouldn’t be possible anyways, as an auto indexed name is created by default (e.g. “menu_0”, “menu_1”, etc). You can change the name on the instance, e.g. <menu name="my_menu"/>