Description : You will learn Delphi FireMonkey UI design tips and tricks when designing and creating responsive navigation menu.
Objective: How to create Navigation Side Drawer for mobile applications using FireMonkey.
Source: Malcolm Groves, José León and Sarina Dupont’s blog.
Software Versions Supported: Delphi XE4, XE5, XE6, C++ Builder XE5, XE6, RAD Studio XE5, XE6, Appmethod.
Source Code: Source code can be downloaded from in Malcolm Groves’ Github repository.
A common challenge when designing a responsive mobile application is the navigation menu. There are several navigation menu options such as the Toolbar Only Navigation, the Tabbed Bar Navigation, the Side Drawer Menu, and the App Home Screen Navigation.
Two of the more commonly used navigation menus are the Tabbed Bar navigation (more commonly used in iOS apps) and the Side Drawer navigation which has become fashionable on Android. The Tabbed bar navigation is a row of tabs along the top or buttons along the bottom of the screen. This navigation design provides intuitive user experience allowing users to know what are their available options from one screen. However, the downside to the tabbed bar navigation is that the tabs or buttons takes up valuable real estate on small mobile displays.
The side drawer menu on the other hand, has the advantage of more screen real estate, but may take away user engagement, if the engaging menu options available to users has been tucked away in the side drawer.
There is an earlier article written by Malcolm Groves on how to design a Facebook-style layout for your mobile app using Delphi XE4 and Delphi XE5. Sarina Dupont has expanded on his blog post with another great article on Creating a Navigation Drawer for your Mobile Application using XE6 and Appmethod.
José León also has a video on how to create a sliding popup menu in Delphi XE5, that will show up when the user clicks a button on the toolbar. The process is very much similar to the drawer and shows you some UI design tricks to get a nice visual result.
Choosing the right Menu Navigation depends largely on users experience. If most of the user experience takes place in a single view, and the only things such as user setting and options are needed to be accessed in seperate screens, then you should focus on having your main UI nice and clean by tucking away these settings/options in the side drawer menu. However, if your mobile app has multiple views that users will be equally engaged in, then side navigation may not be the best option.