Innovation Hub
An initiative by Al Bayat Mitwahid in UAE
Course 2
Making an “Memory Stream” app
Create a working app prototype where users can create posts about things that are important to them. You will create functions that let users sign in, write and save posts, and view their saved items.
Unit 1 – Idea generation and setup
Lesson 2 – Setting up screens
In this lesson you will learn to build more screens and create navigation between them.
We need to add a screen for each feature of your app. Click the + button on the top of the menu bar and click “Add Screen”. You will see that Adalo provides templates for screens that you can choose from. These will help you speed up your development by creating components for you. We will choose some templates to match the type of screen we are adding.
For the Activities screen, add the “Events” template. This gives you a list of events that we can use to list activities.
For the Books to Read screen, add the “List With Header” template.
For the other screens, add a Blank Desktop template.
Make sure you give each screen a name to go with function. For example the Activities screen should be called “Activities”.
​We will add components and collections to these screens in the next lessons.
We don't need the Home screen any more, so we will rename it as “Restaurants”. To do this, click on the title of the screen to activate it, then hover over the name until a pencil icon appears. Click the pencil icon to edit the text, and change it to “Restaurants”. Delete any buttons on the screen. Now you can copy the 2 components on your old Restaurants screen to this screen.
To copy, click the component, press CTRL+C (CMD+C on a Mac), then click the new Restaurants screen and press CTRL+V (CMD+V on a Mac) to copy.
Now you can delete the Items screen by selecting it, clicking the 3 dots next to the name on the left menu and clicking delete.
Now we will add some navigation features. Users should be able to move from one screen to another, so we will add a top menu bar on each screen for navigation. Click on the plus button to add a component. Find the Navigation section and click on “Top Navigation”. Position it at the top of the Home screen.
Go to the title drop down, change the Title Type to text, and add the name of the app.
Click on Menu Item 1. You will see that the default settings include a home icon, the title text is “Home” and there is an Action link to the Home page.
Now go through each menu item in turn and change each one so that it links to each one of the screens you have created. The icon and text on each menu item should tell the user where it leads. You also need to add an action on each menu item so that it links to the right screen.
​
We need the menu bar on each screen. You can copy and paste the menu bar you have just created. Click on the bar and press CTRL + C (CMD + C on a Mac). Now click on the name of the screen you want to paste it to and press CTRL+V (CMD+ V on a Mac). Do this for every screen.
Lastly, for each menu bar you need to set which screen is active, so that the user knows which screen they’re currently looking at. Click on the menu bar you want to change and find the Menu Style section on the left menu. Go down to Active Menu Item and select the correct screen. You can also change the style of the active indicator here.
​
Well done, you now have 5 functional screens and menu bars on each. In the next lessons we will add collections and then components to each screen.
​
