Learn how to prototype web and mobile apps

How to create a slide menu in your iOS or Android app prototypes

In this tutorial, you will learn how to create a slide menu in your Android app prototypes. The slide menu can also be used in iOS app prototypes.

You can download the example below here.




Creating a slide menu in your Android app prototypes


1) Create a new Android prototype.

2) We will be creating the content and slide panels separately. Let’s start with the content panel. First, drag an image widget, re-size it to fit the whole screen and choose an image: this will be the content panel.

3) Add a menu button widget in the top left-hand corner. You will find this icon in the Android widgets library.

Interactiv wireframes Android Icons Menu widget

4) To create the slide panel, drag a Dynamic panel to the canvas. The dynamic panel will serve as our slide menu container. Resize it to match the height of the content panel and the width set to 305px. Place it on the left of the canvas, next to the content panel, so that it will slide from the left inward towards the content area upon simulation.


Interactive wireframes: Dynamic Panel

5) In the Android widget library, select ready-made content displays to replicate the content in the dynamic panel.

TipUse the alignment tools in the top toolbar to ensure that your widgets are evenly spaced.

Interactive wireframes Image and text widgets

6) Drag a Rectangle widget onto the right-hand side of the content panel, matching its width and height. Set its color to black and change its transparency to 75%. Mark it as hidden: in the Properties tab click “Hide component”. This will give a ‘deactivated’ look to the screen when the slide menu is on top of it. It is important to make sure that the Rectangle is positioned lower down than the Dynamic Panel in the Outline tab, as shown in our example.

Interactive wireframes Rectangle widget

7) Group the Dynamic Panel and the Rectangle Widget together by selecting both elements, right clicking and selecting ‘Group’ from the options. .

Interactive wireframes Group the Dynamic Panel and Rectangle Widgets


8) Now it’s time to add the interactions. Let’s start by adding an event to the menu button that will make the slide panel appear. Tip: remember to move the group to the side of the canvas, away from the center of the screen before attempting to click on the menu button. Click on the menu button add an “On tap” + “Show” event, selecting the Rectangle widget. Add a Fade effect with a duration of 100ms. Click OK.

Interactive wireframes slide panel show event

9) Now, let’s add an action that will make the slide panel move from the left to the center of the screen. To add this action, right click on the event you’ve just created and select the ‘Add action after selected’ option. The action will be an “On tap” + “Move”, selecting the dynamic panel. Below, change the Left position to 305px and leave the Top as it is (both should be “Fixed”). Add an EaseInOutQuad effect with a duration of 300ms. Click OK.

Interactive wireframes: Slide panel move event

10) To add the interaction to the slide menu, we will need to add an event to the Android ready-made content displays within the dynamic panel. Remember, we will need to add an event to each individual element in each display. We will first create one event and then copy and paste it to the other elements of the screen. Choose one of the elements, and create an “On Tap” + “Move” event, selecting the dynamic panel. The Left position should be set to -305px and the Top should be left unchanged. Add an EaseInQuad effect, with a duration of 300ms. Click OK.

11) To make the slide panel move back to the left-hand side, add the action after the event: “On tap” + “Hide”. The “Hide” interaction will be applied to the Rectangle widget, with a Fade effect with a duration of 100ms. Click OK.

12) Finally, copy and paste this event to the rest of the ready-made screen’s elements.

Tip: If you want to show different pages for each menu item, you can easily do it adding “Link to” events on the list items in the slide panel and create different screens in the content panel. Just remember to copy and paste the events applied on the top left menu button.


Interactive wireframes Slide panel hide event

Make sure you move the dynamic panel and rectangle group back into the screen and that’s it! You can now simulate and enjoy!

Next tutorial > Create forms with Dynamic Panels