RAD Studio 10.4.1 is now available! Learn more. Looking for discounts? Visit our Special Offers page!
C++

Mobile User Interface Design: Navigation Drawer

Drawer menus are very popular since they allow you to take advantage of more screen real estate when building your app. The main application menu is hidden by default, and invoked by tapping on a menu item or swiping left/right. This type of UI can be seen in many popular mobile applications, including Facebook, Youtube and Gmail.

Drawer Navigation Key Features:

  • Main app menu is hidden by default

  • Invoked by tapping on a menu button or swiping left/right

  • Allows you to take advantage of more screen real estate when building your application

In this tutorial, I will cover the steps needed to create a navigation drawer for your Delphi and RAD Studio XE6 mobile apps.

Many thanks to Malcolm Groves who created the drawer sample that I am using and expanding for this blog post. You can download the project source from his Github repository.

This application consists of 2 layouts. One layout containing the drawer content, and one containing the main application content.

In this case, my left menu, the drawer menu, includes a top aligned toolbar with a parented label, and a client aligned Listbox with several menu items in it. The idea here is that the drawer menu contains all the main application navigation, including quick links to my account profile, app settings etc.

For demo purposes, I dropped a TListView component onto my form, parented it to lytMain and set its alignment property to alClient. I also placed a TPrototypeBindsource component onto my form to fill my TListview with some sample data. Right-clicking on the PrototypeBindSource component provides you with sample data that you can then easily bind into your Listview using the LiveBindings Designer. I also parented a TLine to lytMain to make the division between the main layout and navigation drawer more visible. You could also apply a style or use a separate background color.

deskrad1_12503-6939541

lbdesigner22-2292045

If you double-click on the Actionlist component on the form, you can see that we set up a custom action. We are leveraging that action for opening/closing the drawer when the user clicks on the drawer menu (three line) button or when they swipe across the main menu layout.

drawer1_5f00_12506-4821665

On the form, we also placed the Gesture Manager component since we want the user to be able to swipe across the screen to show/hide the navigation drawer. In the project source, you will see that the touch gestures are setup for the toolbar parented to lytMain. In my demo, I removed the gesture that was setup on the toolbar and instead assigned the touch gesture to lytMain.

gesture-3906872

action2-2804169


Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Learn More About Upgrading

About author

Director of Product Management, Developer Tools Idera, Inc.
Related posts
CodeDelphiRAD StudioTech Partner

Powerful Cross Platform TeeGrid Is Capable Of Handling A Large Number Of Cells In Delphi FireMonkey

CodeDelphiRAD Studio

Learn How To Use Connection Pooling With A Multi-threaded Environment In Delphi

C++Delphi

Get Free Responsive Cross-Platform Login Screen Templates For Android And iOS

CodeDatabaseDelphiRAD Studio

Quickly Share Data Between Datasets Using CloneCursor In This Native Windows Sample For Delphi

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES