In mobile apps, every screen that the user sees we call a view.

And what we've been doing so far is we've just been configuring this home view.

This is the first view that a user sees when they load up your app.

But what we're going to do now is create two new views that we're going to navigate to from this home view.

So, home view is going to have a button on it which is going to essentially swap it out for a new view called trips.

And trips in turn is going to allow us to navigate to our account view and our account view back to our trip view and vice versa.

So, we're essentially going to have these three views in our application to start with, and trips and account are going to be tabs that the user can navigate to and from.

So this is going to be our end result here: the user is going to click get started, they're going to end up on this trips tab, and they're going to be able to toggle by using this bottom tab bar between trips and account.

So, first things first, we actually need to create these views.

To create a new view, we just head over to the app manager which you can access by clicking this little drop down in the top left.

We're going to hit new and we're going to choose mobile view.

We're just going to name this after the first one of our views here, and we can choose what type of view type we want to create.

For now, we're just going to leave this as a scrollable view just so that we can get familiar with how the navigation works.

So now we've got our trips view, and just so that we can test this out, I'm just going to add a text element on the page which just says trips.

And all I want us to do now is figure out how do we navigate from our home view to this new trips view.

So if we go back to our home view here, what we want is to set up some kind of logic that's going to allow us to navigate from one view to another view.

And it makes sense, of course, that that happens when this get started button is clicked.

So how do we add this kind of logic to our application?

Well, that requires that we enter a new tab called the workflow tab.

Now, the workflow tab is where you add behavior to your application.

When this thing happens, like a button click, then I want you to do this sequence of actions, right?

Navigate to a new tab, create a new user in the database, right?

There's all these different things that we're going to be able to do, and which we're going to get familiar with how to do as we progress through the course.

For now, we're just going to start with a really, really simple piece of logic.

So we're going to head up here to this new button and that's going to allow us to create a new workflow.

So a workflow is always made up of two components: an event and then a sequence of actions.

So the event is what we set up here and you can think of this like a trigger, right?

When a button is clicked, when a page is loaded, right?

These kind of things.

So for us, what we're looking for is underneath in this element section, we're going to look for an element is tapped.

So we're going to select that.

Then we get another little properties window, and then this time it's for this event.

And then we need to choose which element is going to trigger this workflow when it's tapped.

So we're going to choose here this button, get started.

So this is the event part of the workflow.

Now, we need to add some actions, specifically an action that's going to navigate us from one view to another view.

To add an action, we just hit this little plus icon here, and what we get here is a library of actions that we can trigger within this workflow.

Now, they're categorized by type here, and we're going to go through and learn how a lot of these work as we go through the course.

We've got things like signing the user up, we've got things like opening up the user's camera on their device, but what we're looking for now is just under navigation.

And we're going to click on this option here: go to tab.

Now we've got the properties window for this action.

Okay, so this properties window is letting us configure the details for how this go to tab action should behave, and it only gives us one property, one thing that we can change.

And that's the target view — in other words, which view in the application do you want us to send the user to with this action.

So what we discussed, of course, is that we want to send the user to the trips view.
And if we click this, we see that that trips view doesn't actually appear.

Now, the reason for this is because the view that we've created needs to be configured as a tab type of view in order for us to send the user to it.

So what we need to do is we need to go over back to that trips view, open up the design tab, and then when we have the view configured here, all we have to do is we have to tick this little box: include as tab item.

What that's going to do is it's actually going to create a little tab bar down the bottom for us.

And if we already hit preview here, right, you can see roughly how this is going to look — it's just a tab bar with one tab item in it right now.

We're going to come back to this shortly and figure out how do we configure this.
For now though, now that we have this include as tab item configured, if we go back into the workflow tab here on our home view, we'll see that we actually now have this trips view available to us.

And if you're thinking, "Well, that was a bit of a weird step, why did we have to make this view a tab just to be able to navigate to it?"

Well, it's because views don't necessarily have to be opened as tabs.

They can be opened, well, as other types of things.

We're going to get to that very shortly in the course, but just so we can take things simply one step at a time, we're just going to deal right now with opening views as tabs.

And now to test this out, we can either open up the preview version of our application here, and if we hit this get started button, we should see ourselves on the trips view — and we do.

Or we can, of course, view it on our mobile device.

So if I hit get started here, then we end up here on this trips page.

Okay, interesting.

So let's create our account view now.

I'm going to create a new mobile view for the account view and again, just so that we can test this out in kind of a rudimentary way, I'm going to add here some text on it.

And what we have to do, because this account view is also something that we want to be accessible as a tab via the tab bar, is hit this include as tab item.

And what you'll see now is if you refresh your preview window on web and navigate back to your trips tab, you'll see here that we now have an account tab in this tab bar as well, and we can click that in order to go to the account tab.

So this tab bar is something that Bubble is creating for us on our behalf based on the views that we have told it are tabs.

In other words, every view that we configure as a tab by clicking this checkbox include as tab item is going to be added automatically to a tab bar.

And you can see here in the elements tree we have here a new item called a tab bar, and if you undo it here, you'll see that it's got two items in it corresponding to those tab items.

Now, we can actually modify this a little bit so each of them have a label just like our buttons do.

So I could set this label to be Trips with a capital T and our Account likewise make it capitalized.

And those changes, as you would expect, would be reflected there in the run mode of our application.

Now, I'm going to go out on a limb and say that you probably do not want to have this star icon for all your tabs.

So how do you change the icon?

Well, again, that's another property that we can control from within the corresponding tab item.

We've got this icon property here.

So if I select this, what I can do is now choose from a library of icons.

And in fact, it's not just from one library of icons, it's from several.

So these are some very well-established icon libraries that Bubble is making available to us just here within the editor.

And you can think of each of these just like a font family or a typeface where you have multiple characters or icons in this case which all share the same style or the same aesthetic.

And we also have different variants of these icons.

So I can change here to example to see filled variants, and this is what I will see instead.

And so, let me see for, let's start with the account tab.

I think I probably want to do, again, phosphor because this is an icon library that I quite like, and I want to do something related to the account tab.

And you can see that this doesn't really pull up anything, and that's because this search box is just looking for the literal names of each of these icons.

So what you want to do is for the icon library in question open up the corresponding website.

So this is the website for phosphor, and they'll usually have a search experience within their website which will return a much better set of icons all related to your search query.

So here we've got a whole bunch of icons related to account.

I think this is the one that I like, user circle.

So all I'm going to do is within the editor here, I'm just going to search for user circle, and there it is.

And then again for trips, well, I might type in something here like travel and get a whole bunch of icons related to the idea of travel.

And I quite like this one, suitcase rolling, quite like that. That reflects the idea of a trip.

So again, I'm going to go down here into phosphor and search for suitcase.

Now, the other thing that you might have noticed is that as the tab changes, so does the styling of the tab text and icon.

It's changing to this highlighted orange color. This is our primary color.

So how is that working?

Well, if you cast your eyes over to this tab here within the properties window called Conditional, you'll see here that there is what looks like some kind of logic that we didn't write but just came packaged with this tab bar.

And it reads like a logical statement, right?

When this tab item is selected, well, presumably do these things:

Let's change the font color or set the font color to this primary color and the same with the icon color.

So that's exactly what's going on here.

This is what we call a conditional statement, and it says that under this condition, when this condition is true, then I want you to make these corresponding changes.

And so what I could do here is I could add a change, right?

Add a property that I want to be set to something new under this condition.

And what I could do is I could change my icon here to a filled version of my icon, and I could do the same thing for my account tab as well.

So I set this to be a filled version of my user circle icon, and that's then going to result in this appearance here.

Now these conditional statements we're going to dig into a lot more shortly in the course, including how to write these kind of conditional statements or these kind of logical expressions.

But for now, let's just leave this as it is and just make one last little change here because I find that my icon and my text are kind of small here.

So I might bump this icon size up, up my font size as well.

I think I'll bump it up to 12.

And then we see that out of the box, the color of our icon and our font isn't mapped to any color variables.

So that's something that I probably want to change because I want to keep my aesthetic coherent.

I don't want to be choosing or using random colors from the color picker.

I want to be choosing from colors that exist within the palette within my design system.

So I've got a gray here that I think is going to work nicely.

And then I obviously want to make all of those equivalent design changes to this trips tab.

So you know what I could do, I guess?

I could click on here and I could just go through and just make all these changes again.

But if in the future I want to have another view as a tab, then I'm going to have to do all those things again, and there's the chance that I maybe do something slightly wrong here, and then my tabs aren't in sync.

And so there's actually a better way of handling this.

Can you guess what it is?

I've already learned about it.

We can of course use a style, and most excitingly, we don't have a style configured for this tab item.

So what we can do is we can actually turn this tab item that we've already set how we like it into a style, so then we can use it for multiple tab items in the future.

So all I'm going to do is I'm going to click on this little style dropdown and hit create a new style.

And I'm just going to name this as Standard.

We're probably only ever going to have this one style for our tab item type of element, so just naming it as Standard will be absolutely fine.

And then what I can do is on my trips tab, I can just assign this to that style that we just created, and it will of course then inherit all of those styling properties.

Now the only thing that we do have to change back here is the icon, which has been reset whenever we assign a style.

So have to change this back to the suitcase roll loom.

The icon in our conditional tab is however preserved.

And so this is how things look right now.

I think that looks pretty good.

But you will notice one strange thing, which is the icon labels here seem to have that dreaded serif on all of the characters.

So this is one of the limitations with using the web preview here for your mobile app.

So good practice is to open up the Bubble Go app because this will give you the most accurate representation of what your app actually looks like.

And you can see here that our tab label fonts are in fact appearing as they should.

So that's tab items.

Let's continue on in the next lessons now fleshing out the content inside of these tabs.