Include A Hamburger Menu In A NativeScript Android And iOS Application

Most, not all, Android and iOS applications follow a similar set of rules when it comes to user experience. For example, many applications make use of what can be referred to as a hamburger menu in the top left or right hand side of the screen. These hamburger menus look like three horizontal lines and are useful for bringing up some sort of menu, typically from either of the sides of the screen.

We’re going to see how to make use of the hamburger menu in a NativeScript with Angular mobile application.

For simplicity, we’re not going to worry about creating a side drawer or any fancy menu effects. We’re going to focus strictly on getting a hamburger menu icon working for both Android and iOS. It will look something like the image below.

If you’re interested in using a side drawer in NativeScript, check out a previous tutorial I wrote on the topic.

Creating a New NativeScript with Angular Project

Let’s start by creating a fresh NativeScript project and working our way into our goals. Assuming you’ve already installed and configured the NativeScript CLI, execute the following:

tns create hamburger-project --ng

Take note of the --ng flag in the above command. This indicates that we’re creating an Angular project rather than a Core project.

With the project created, we’ll need to come up with a menu icon.

Downloading Attractive Icons Built for Mobile

We can easily create our own menu icon, but sometimes it is best to stay on top of trends and develop an application consistent to what people are familiar with.

There is an awesome website based on Material Design that has free to download icon sets. These icons can be found here.

Download the menu icon in the color of your choosing. Make sure that you download this icon as a PNG file and not another format. After downloading this icon package, you’ll find several directories including one for Android and iOS. Transfer the icons to the appropriate directories like so:

Notice in the above XML that we have both the NavigationButton and ActionItem components. On iOS, the only way to get an icon on the left is to use the NavigationButton. However, there is no concept of a NavigationButton on Android.

So what do we do to obtain matching behavior?

We need to do some custom work to determine what platform we’re using and render components depending on what was found. This can easily be handled via Angular Attribute Directives.

Create an app/if-platform.directive.ts file within your project and include the following:

We’ve added *ifAndroid and *ifIos which will show or hide the component based on the platform used. The platform used is determined by the directives that we had created.

Conclusion

You just saw how to add a hamburger menu to your Android and iOS application built with NativeScript and Angular. In our example we had used freely available icons and a custom attribute directive for determining which platform is currently being used. By paying attention to the platform, either of the NavigationButton and ActionItem components can be used.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.