Lesson video

Hi everyone, my name is Mrs. Welsh.

Today, we'll be learning about multiple screens and navigation.

Don't worry if it's new to you.

I'll be here to guide you through each step, so let's get started.

Welcome to today's lesson from the unit mobile app development.

This lesson is called "Multiple Screens and Navigation".

By the end of today's lesson, you'll be able to build a multi-screen app and use buttons to move between the different screens.

Before we begin, let's have a look at some keywords.

Screen, a separate layout or page within the app that can show different content or features.

Navigation, moving from one screen of the app to another.

Let's get started.

During today's lesson, we're going to look at creating multiple screens in an app, describe how users move between screens, and use block-based code to move between screens.

But first of all, we'll be starting with creating multiple screens in an app.

Apps may have more than one screen to show different content.

Multiple screens are used to keep the content of the app organised.

For example, a game app might have a home screen, a level screen, and a game over screen, and you can see the examples here of what the different screens may look like, and therefore it keeps all the content nice and tidy, and as you move through the game, you know exactly where you're up to.

Each screen will show different content or have a different job.

A shop app, for example, will have multiple screens.

It will have the home screen, it will have a product list, it will have the shopping cart, and it'll also have the payment page and each screen has its own job and specific tasks.

Let's have a look at a question.

Why should you use more than one screen in your app? Is it A, to separate different parts of the app, B, to stop the app from crashing, C, the app can look colourful, D, each screen can do a specific job? If you need to pause the video now to read back through the question and decide upon your answer, do so now.

So what do we think? Is it A, B, C, or D? If you said A and D, you'd be correct.

It is to separate different parts of the app and so each screen can do a specific job.

Did you click both of them? Make sure to read the question carefully so you know if you need to select more than one answer, but if you've got both of them, excellent job and let's move on.

In App Lab, a screen is a layout space for buttons, text and images.

Each screen can be designed to suit the content.

And remember, when we are designing the screen, we need to make sure that we are in the design mode.

So you can see here that we are clicked into design, which means we can drag and drop the different elements to our screen.

When we're creating a new screen, we can click on the dropdown menu, as you can see here on the screen preview, and we can select new screen and this will create another screen within our app, and in the properties panel, we are able to give each screen an ID.

So again, it makes really good sense to call the screen a descriptive name so we know what that screen is going to be doing.

So for example, it could be the start screen.

It could be the level screen.

It could be a scoring screen.

It could be a game over screen.

So if we're giving it names similar to those, we're gonna know exactly what that screen is doing by just looking at the name.

So as you can see here, we've used some simple and clear names for the screens, such as home_screen, quiz_screen and end_screen, and if you click in the dropdown box to view all the screens that have been made, you can see the screen names there, which means we know, if we click on the level screen, we are gonna be working on something to do with the game level, and if we click on the menu screen, for example, we know we're going to be looking at a screen that's got some buttons and some labels on it.

Let's have a look at another question.

Why is it important to give each screen an ID in App Lab? A, because it makes the app look nicer.

B, so the computer knows which screen to show.

C, so the users can rename the app, and D, because App Lab doesn't let you use numbers.

If you need to pause the video now to read back through the question and decide upon your answers, do so now.

So what did you get, A, B, C, or D? If you said B, so the computer knows which screen to show, you would be correct.

So that says we need to give each screen an ID so we know which screen we want displayed at any one time when we are running the app.

Let's have a look at task A.

For part one, we're going to create three screens in App Lab and the screens are going to be a home screen with a welcome message and a start button, a quiz screen with a text input box for the quiz question and a next button, and we're then going to create a score screen with a view score label and a restart button.

If you need to pause the video now to read back through the task and complete it, do so now.

Okay, let's take a look at what we've got.

So what we should have, if you click in the little dropdown for your screens, you should see three screens have been set up, so we've got home screen, quiz screen and the score screen.

So we've got the screens there all with unique names, making them easily identifiable.

When looking at how we've created the screens, we have got a home screen created with a label that contains a welcome message.

You can see there we've got "Welcome to the app" and we've got a button to start the quiz.

So you can see there we've got the button and the button has been labelled start, so we know what it is going to do.

On the quiz screen, we have got a text input box, which has got a placeholder.

So the placeholder is the text that sits inside that box to give us an idea about what kind of things we need to type in there.

So you can see there we've used "Type answer here".

So we know that we are going to type any answers to any questions in that box, and then we've got a button with the label next, so we know if we click that we are gonna move on to the next screen.

And the final screen we had to make was the score screen.

So we've got a label that says view score, and then underneath we have got a button that is going to restart the quiz.

So you may have laid it out slightly differently.

You may have picked some different colours or some different fonts, but as long as you've gone through and you've got the three screens created with the elements that were mentioned in the task, you've done a really good job and let's move on.

So moving on to how we move between the screens and this is looking at the theory behind it.

Moving between screens in an app is usually done by clicking buttons, selecting something from a menu or maybe tapping on an icon and each action will show a new screen.

For example, when you tap on a button, the app stops showing one screen and it will go and display a different screen.

When using an app, only one screen is active at any one time.

The other screens are basically waiting in the background to be made active.

So very similar to, if you were reading a book, when you turn a page, you're only reading one page at a time, but all the other pages are still there.

For example, a shopping app might have a home screen, a product list, a shopping cart and a payment screen, and as a user, you'll tap on icons or buttons to move between these different screens depending on where you want to be in the app.

Apps, as we said, will only have one screen active and this will be to keep the screen layout clear for the user.

It makes the apps easier to understand, and it also saves on memory and reduces bugs.

Having only one screen active keeps the app fast and simple.

So let's have a look at a question.

Why does an app only show one screen at a time? A, to keep the app clear and focused.

B, to save battery.

C, to confuse the user.

If you need to pause the video to read back through the question and decide on your answer, do so now.

Okay, what do you think? Was it A, B or C? If you said A, you would be correct, to keep the app clear and focused and this avoids showing too much at once and it helps the user know where they are in the app.

And also, if you think about it, most apps we are looking at on our phones, those screens are not the same size as a computer screen or even a tablet screen, so we need to make sure that the app screens are fairly simple and are not overly cluttered with information.

So that's why we end up having lots of different screens within our apps.

Next question.

How do users usually move between screens? Is it A, typing commands, B, waiting for the app to change randomly, or C, tapping buttons or menus? Again, if you need to pause the video to read back through the question and decide upon your answer, do so now.

So what do we think, A, B, or C? If you said C, you would be correct.

Generally, we move between screens by tapping on buttons or selecting something from a menu.

Looking at task B, you are creating a music app.

The app helps users explore, play and manage their favourite songs and it has the following screens, a home screen showing recommended songs and new releases and it has a search bar.

The search results screen lets users view the search results.

Play screen shows the current song playing with a pause, play and skip buttons and a playlist screen displays the user-created playlists.

So for the music app, you need to think about what buttons or icons the user would tap on each screen.

First part of this task, you need to fill in the table to show how the users move between the different screens, and for each screen, you need to identify which other screens a user might go to next.

You need to describe what the user taps to move there and explain how the app would respond.

So for example, if we have a look at the drawing of the music app here, if we were to click on the little magnifying glass, so the search and we were to type something into there, and then click the search bar, what we're telling the app is that we are moving from the home screen and we are going to move to the search results screen, and by doing that, we have typed in a search criteria and tapped on the search button and the screen we will go to is the search results screen, where we would expect to see a list of songs we might want to listen to.

The table that you're going to be looking at has the following.

We have got the current screen that you are sitting on.

So we've got the home screen, the search results and the play screen.

You've then got what the user taps on that screen, where you are going to move to, so what screen is gonna load next, and also what is happening in the app.

So as I said there, I gave you an idea of what would happen if we were using the search bar on the home screen.

So if you need to pause the video now to read back through the task and complete it, do so now.

Okay, let's take a look at some possible answers.

So on the home screen, as it says there, if we use the search icon and enter a search criteria, it is gonna take us to the search results screen and what happens is the app hides the home screen and shows the search results screen.

On the search results, we may tap on a song and this is gonna move us to the play screen and the app shows the play screen for the selected song and on the play screen, we may tap the play button.

It's gonna keep us on the play screen, but the app is going to play the song.

You may have got some other ones, okay? So you may have gone and looked at all the things you could've done on the home screen.

So you may have lots of different entries in the table for your home screen, same for the search screen and maybe even the play screen.

So you may have gone through every single tap or button you could do on each screen.

If you've done that, amazing, absolutely brilliant, so you've really looked at how this app would work and all the different interactivity that is on the screen.

If you've done it so you've got one for each, again, excellent job.

You've gone and looked at particular parts of the app and how they actually work and how the screens move, so brilliant and this is going to really help you when we're designing our apps later on.

So moving on, we are going to be looking at how to use block-based code to move between the screens.

Why is the screen not changing when I tap on a button? For an app to work, it needs code to make the buttons interactive.

Without code, the screen will not change, even if the button is there.

If we were using a light switch and for the light switch to work, the light switch needs to be connected to the light, and if it's not connected to the light, we could be flipping that switch on and off and it is not going to do anything to the actual light itself, so same with an app.

We need the button to be connected to the code, so actually when we do something, it will change.

So in App Lab, block-based code is used to make things happen.

The code provides step-by-step instructions to tell the element of the app what to do.

So for example, the code will tell the app to change screen when a button is tapped.

To do this, what we're going to do, we are going to make sure that, when we navigate between screens, our screens have got a unique ID for all the elements on the screen and we've got buttons for the navigation.

So we've got the example from the previous task.

We have got our home screen, we've got our quiz screen and we've got our score screen.

So we can see we've got unique IDs for each of our screens.

Each of the elements on each screen again also has a unique ID and we've got a button to click to move us through the app.

So to move through the apps, we use something called the onEvent block and this is used to create the button click.

So what we then get to do is select what element we want to have as the onEvent.

So for this example, we are gonna be looking at the buttons.

So we can see here that the start button has been selected.

The trigger that we are looking for is called the click.

So we are looking for the click of a button and what's gonna happen is we are going to set the screen.

So setScreen command means we are going to be changing what screen appears.

We are gonna be setting the screen to load a new screen, and again, we click from the dropdown box and we can see the screens listed that we have created.

So we are going to set it to the next screen, which in this app will be the quiz screen.

So what will happen is, when we now click our start button, it will send us to the quiz screen.

Okay, so as it shows here, we start up the app, so we click the run button to test our app out.

We click on start.

When we click on start, it sets the screen to the quiz screen, so it runs the code, and then we will see our quiz screen loading.

So let's have a look at a question.

What does setScreen command do? Does it, A, create a quiz, B, deletes the quiz screen, C, switches to the quiz screen, or D, changes the screen background? If you need to pause the video to read back through the question and decide upon your answer, do so now.

Okay, what do we think? Is it A, B, C, or D? If you said C, you would be correct.

The setScreen command changes to a different screen.

In this case, it switches to the quiz screen.

So moving on, to check user input, selection statements can be made.

For a quiz question, the app screen will have something similar.

So we have created a question screen here.

We have got a user input or a text input box and the placeholder is actually the question, so "What is the capital of France?" And then, we have also got a submit button.

So as it says there, a text input box for the user to type in the answer, a placeholder for the question text and a button to submit the answer and the code will look something like the following, so we are using a selection statement.

We have got the onEvent to detect the event of the button tap, and as you can see here, we've got the check_answer_button, and again, it is on a click.

The function is then using a selection block.

If the answer is correct, the app will load the correct_screen.

If the answer is wrong, the app will load the wrong_screen and the user has the opportunity to try again.

In the if statement, we have got the getText command and that is pulling the answer from the question one, so that's the text input box, and we are comparing it to the correct answer, which in this case, what is the capital of France? Paris.

So we are going to be comparing whatever the user has typed in to Paris.

So what happens? We have got Paris being entered into the box.

We've got the submit button being clicked and we can see that that is the correct answer, so we get the correct screen and the next button to take us on to the next part of the app.

If, for example, we typed in the wrong capital, so there we can see we've typed in London, and we press submit, we get the wrong, try again screen and we get a button that will take us back to the what is the capital of France screen so we can try again.

We can also use variables to keep score.

So if we're doing a quiz, it would be nice to know how many questions we got right.

Before we put any other code in our app, we are going to set up our variables and we can see here again it's just a drag and drop.

We will drag out our variable.

We will give it a name, and again, our names need to be clear and descriptive, so we are calling it score and that means we are going to know what that variable is holding.

And to use the score within the app, so we are using it to keep track of how many correct answers we've got, we are going to add it into coding.

So we've got, when we submit question one, we have got the if statement to check to see if the answer is correct, and then we have got underneath, we have got score and we've got equal to score plus one, so we are adding one to the score variable, and then we have got it to change screen.

So this app works slightly differently.

So this app code works slightly differently to the other example, where we have got it so the user moves through all the questions and they won't know what they've scored until they get to the end, so they won't know if they've got every single question right.

They won't know which ones they've got wrong in this one, as we just move screens when they have entered an answer.

So as it says there, it takes the user to the next question, and if the user gets the answer correct, it will add one to the score.

So at the end of the quiz, we can also use the variable to tell the user what they got right.

So if we have a look at this code here, this would be on our final question.

So we've got it so again we've got, once they press the submit button on the question screen, it will compare the answer to the user answer, it will add one to the score if the answer is correct, and then because this is the final question in the quiz, the next step is to set the screen to the score screen, so the user can see how many questions they've got correct, and then under that we have got the setText command, so we've got a label on our score screen where we can display how many questions the user got correct and we've got you scored, the name of the variable score, and out of two, because this quiz only has two questions.

So what we will get is it will take the user's score to the score screen and display the score in the score screen as well, so it will look something like the following.

The screen score will display and it will tell the user how many questions they got right.

So let's have a look at a question.

True or false? You must give your buttons and screens an ID before coding.

Pause the video now, if you need to read back through the question and decide upon your answer.

So what do we think? Is it true or false? If you said true, you would be correct.

IDs are how the code knows which item to control.

So even if you leave it as the default and you never change any of the IDs, every single button on the screen has an ID, but giving them a unique name or a name that is descriptive makes the coding of your app much more easy.

By leaving everything button one, button two, button three or screen one, screen two, screen three is not going to be as easy to code as having them called things such as home screen, quiz screen, score screen, where we know exactly what is being shown on those screens, because the name is descriptive.

So if you got true and you're understanding why we give IDs to all of the elements that we use in our apps, excellent and let's move on.

So looking at task C, one, open the starter quiz, two, add two more questions to the quiz.

To do this, you need to make sure that each question has a screen, each question has a text input box and a submit button.

The code needs to check the user answer is correct.

The code needs to then increase the score by one, if the answer is correct, and the code needs to navigate to the next question.

If you need to pause the video so you can read back through the task and complete it, do so now.

Okay, let's take a look.

So what we should have are two new questions and we can see here that they been given the screen IDs q5_screen and q6_screen, so for question five and for question six, we have got our two new questions added in and they have got the question in a nice big label, and then we've got a type your answer text box with the placeholder, so we know where we're going to be typing in the answer, and they've also got a submit button.

So there we have our two more questions added and we can see we have also played with the formatting so each question's screen does look slightly different.

The code, we have added in the additional code for question five and question six and we could use the code that was already in there from the previous questions.

So on question four, we have got it so it gets the text from the question four text input box and it's comparing it to the answer.

It has the variable in there, which is adding one to the score, if the user gets the answer correct, and then it is moving to the question five screen.

Underneath that, we have then got our onEvent for the question five submit button, so when we click the Q5 submit button, it pulls the text from the question five input box, compares it to the answer, adds a score, if we get the answer correct, and then sets the screen to the question six screen, and again, we then have the code for the question six submit button, which will be onEvent q6_submit, get the text from the question six text input box, compare it to the answer, and again, we will have the score being added to, if we get the answer correct.

There was nothing more to do after that, as we've only been asked to add two more questions, not where to send anything after question six, so we don't send the quiz anywhere after question six at this moment in time.

If you have managed to get both of those questions added in and you've managed to get the code working so when you click through, you can type in an answer, press the submit button and it moves you to the next screen, excellent job.

We are well on our way to building a fully working app, so let's move on.

Part three, you need to update the code to make the final question screen navigate to the score screen.

So remember when I said question six doesn't go anywhere? We're now gonna make question six go somewhere.

First of all, you need to make the score screen show the final score, you need to add a restart quiz button to the score screen, and then you need to format each screen to include a background colour, make sure the display text is set to 20 pixels, and each question needs to have a different coloured text.

So if you need to pause the video now to read back through the task, do so.

And let's take a look at the answers.

So we have got our score screen complete.

On there, you can see that we are telling the user how many they have scored, and we have also got the restart button so we can press and restart the quiz.

To complete this task, we had to update the question six, submit button code.

So we've now got, underneath our if statement, we have got our setScreen to score_screen.

When we click the submit button for question six, it is going to compare the user answer to the answer, add one to the score, if it needs to, and now it's gonna move on to the score screen, and then also set the text in the score label to show the score, so it says you scored, and then the value from the variable.

So we now have the score displaying on the score screen and the restart button, which we had to create, again, we are using onEvent, selecting the restart button, and we're gonna have it so it is gonna set the screen to the start screen again, but it's also got to reset the score variable back to zero so it means that we are counting from zero again when we start making our way through the quiz.

So it says there, the score displays on the screen, question six now navigates to the score screen, the restart button has been added, and the restart code has been added so we can restart the screen from the beginning.

If you've managed to get all that working so you have got the score, you've got the reset button, and you have gone through and formatted all of your screens, so maybe you've got some background colour, maybe you've changed text colour, you may have changed the font and so on so it looks eye-catching and engaging, brilliant job.

We have now created a whole app, so we have got a fully functioning app, which you could keep adding to.

You've just got to make sure that, if you're gonna add more questions to it, whatever the last question is, you have got the setScreen to score_screen as the last thing the final question does.

So as it says here, in terms of the formatting, we have got our question text now set to 20 pixels, we have got a different colour text for each question, and we've also got a different background colour for each of the screens.

So in summary of today's lesson, apps use multiple screens to organise different functions or content.

Users move between screens using navigation elements like buttons.

And in App Lab, commands like onEvent and setScreen are used to make apps interactive.

So thank you for joining me in today's lesson.

We have now created a fully working app, so we've got screens, we've got navigation between the screens, and we've got interactivity so the user can, in this case, complete a quiz and get feedback on how many questions they've got correct.

So I hope you'll join me in the next lesson and I will see you next time.