Bottom Bar Navigation

[00:00:00]
>> So what's next? We need navigation, we are going to create the bottom bar navigation. So we saw when we were building the app, remember that you can browse using Ctrl+Click or Cmd+Click, so I can get into my app here, quickly. Going to minimize the emulator. By the way, should I minimize the emulator or close it?

[00:00:22]
So you have close and you have minimize. If you minimize the emulator is still running, which means two things. Next time you're running again, you're up. It will be faster, but also if you're on battery, it will kill your battery in 40 minutes or an hour. Because that's an actual Android VM running behind the scenes.

[00:00:44]
So if you don't have your power connector, you may be out of battery even if you don't see the emulator. Okay, it's actually hidden. If you close it, it actually stops the VM. But next time you run it, it will take more time. So have that in mind.

[00:01:01]
Okay, so here we have the bottom bar. So actually in the bottom bar, we can put anything like a text. I'm a bottom bar. And if I build and refresh, the bottom bar will appear of course at the bottom. This is the preview I'm not sure if you can see even see it.

[00:01:27]
I'm a bottom bar there really small. So, one of the, let's say restrictions that we have today in shipped by compose is that we don't have an automatic top bar system or navigation system. We have to design our own, or we have to use external libraries or something like that.

[00:01:47]
So I'm going to create one really quickly that it's basic, but it makes the trick, kay. So for that, by the way you might call this already a video on GitHub. So I'm going to create a new file, a new Kotlin file. I'm going to call this bottom navigation.

[00:02:08]
And here I'm gonna put several things. I'm going to start creating a data class. Remember data class is just a simple class that holds data. And I'm going to call this NavPage or navigation page that will contain the name of the page, the icon can be a title of the page as well.

[00:02:30]
For the icon I'm going to use an image vector type I will explain what that is in a minute and also the route. And they will face a string as well. So this is the title of the page. Let's call it title or name. It's the same and the route is like an internal name, okay, just that.

[00:02:52]
And then I'm going to create an object with all my bases are routes. Remember an object is an instance without the class like a JSON object in JavaScript. And I'm gonna create here different pages, I will have a MenuPage, I will have an OffersPage, the OrderPage and also the InfoPage, okay.

[00:03:18]
I am going to create the objects from NavPage with menu icons, where I will get the icons. Where can import icons check the compose includes all the material icon gallery. Material design includes I'm gonna material.io forward slash icons. There is a set of hundreds of icons, free to use, okay.

[00:03:52]
So, and we can actually use them. We don't need to borrow them. We just need to use them. To define those icons. We use the global icons object. Where we can use outline icons, fill icons, so there are several collections, I mean, if it's a circle, it can be outlined, or filled.

[00:04:14]
I can use here outline for example, we have a menu we can use menu or coffee or any icon. Okay, you can change the icon and then a route. So I'm going to we need to import this. I will just do this blah. I mean, why'd you change here all 4s.

[00:04:43]
My order info and then change the icons we have a star, we can use a star is just a star shopping card there is a shopping cart icon and an info icon, okay. This is just a data model for navigation pretty simple. And then I'm going to create another array of patients where I have a list of my patients menu page, first page, order page and info page.

[00:05:13]
And by the way, I'm using bar but maybe I can use bow as well. Because I'm not mutate in this options, right. So, with Alt, Shift, you can actually even make things like this, multi cursor and change that with bar middle weights is just the same. Okay, make sense?

[00:05:35]
That's my data model. Okay, just that. Now we need to design and we need to do this manually where each of the little icon, and the text, okay. So we need to design the nav items. So most of the thing that I'm going to do right now it's similar to the previous example is putting a cologne with an image and a text and setting font properties colors.

[00:06:02]
So I don't think it worth the time to do it manually because we are not learning anything new. So, something that we can do is based composable that renders the image and the text from here. I already done this, this is the bottom navigation. So we are designed in the NavBar.

[00:06:26]
So I have here a composable NavBar item. So let me base these. It's just this function. It's not a big deal but they wanna make better use of our time. First when I paste this, I have a lot of errors. What's going on? Imports okay import, so I need to import modifier.

[00:06:51]
I need to import alignment everything needs to be imported. Sometimes when you're importing, you have a couple of options, okay. Be careful if you have a couple of options like in this case to import the one that says Android x compose. Because maybe there is another class in the Android SDK with the same name, but it's not the one that we need, okay.

[00:07:15]
So I will explain what this is, in a minute. Alternative one, if not, I mean, let's use primary. We got the size, text I mean I'm just importing okay. And this what is this on primary they the sometimes when we're talking about colors it's a common situation to call a color on primary.

[00:07:54]
What is primary color that goes on top of a primary background? We can actually do that if you want like, in this case we can say that it's the same as this one because this is dark, so I want some something light on top of that. Okay, so that's on primary.

[00:08:16]
The right name on capital O, sorry. Now I can import that one and I can use the same one here. So let's see what we have here. It's not so difficult. So we have a column, an image and a text. We know the deal there, okay. So that's important.

[00:08:36]
So what's new? What's new is we have a color filter that's for the image. So the actual icon can be tinted with the color, make sense? And what I have, I receive a page so I can render a page. What is the page? The data class that I have just created an instance of that class.

[00:08:57]
Then we have, if it's a letter or not, and base on that, what I'm doing here, if it's selected, it's changing the color of the icon. If it's the current tab okay, it doesn't make sense. That's kind of the idea. And look at this. This is probably the part that needs some attention.

[00:09:16]
I'm receiving a modifier of type modifier that is equals to modifier that what's going on here? So, this is a composable okay and not bar item let's make a preview of that composable. So I'm going to create a preview of that composable it's going to read NavBar item preview, okay.

[00:09:41]
And I'm going to use a NavBar item and I'm going to pass a patient I'm going to I can take one of those patients actually It's routes.MenuPage, make sense? So I can actually preview. That's how we look like, okay? Fine, right? So what if I wanna apply Padding to my NavBar item.

[00:10:14]
If you remember padding are being defined by modifiers, right? But this is my own composable. Makes sense? So by default my own composer, we're gonna remove that for a minute. My own composable does not contain modifiers, does not contain modifiers. If I want modifiers, I need to accept that were in the function signature, is of type modifier.

[00:10:48]
And this is actually a default modifier there. So the same name, the same name of the type, it's a default one that is doing nothing, okay. So then is if I don't say equals, now I'm forced to pass a modifier to my function every time. If you don't want to force the user, then you use this.

[00:11:07]
I have an ID error. Okay, so that means that if a now that modifier can add for example, the padding and who is going to apply this padding? Well actually depends on us. I am applying this modifier to the column. Typically when we're receiving modifiers and arguments. We reapply that modifier to the root element that we have the root composable in this case the column.

[00:11:40]
So if I'm passing the padding from here I'm taking that padding and passing that padding to the column does it make sense in the composition. We're actually putting that padding in our case in the column. Does it make sense? So that's actually a NavBar item. Let me push this.

[00:12:02]
>> So is it overrun your eight? Is that what it is? It's your 12. So you have 12, I'm 46.
>> No in this case, it's going to apply both. Because my modifier has the ADP. But let me go meet first, and then. So you have the code here.

[00:12:24]
So my. I'm applying to the column this modifier? It will lowercase m. So it's actually this one. So it comes with a padding of ADP. And then I'm applying another pine padding of 12 db. So it's going to apply both. Yeah, maybe I don't want that. I don't know, okay.

[00:12:51]
But it's just an example on the preview. So this is how you can provide your own modifiers to your own composer when you receive a modifier. And you need to reapply that into some of your compostables some of your elements that you have inside. That's it makes sense.

[00:13:11]
Any questions at this point?
>> Why would you apply both?
>> Because when it's for the preview, for example, and I want the preview to have more padding, because I'm simulating how this is going to appear later somewhere else. This is just the preview.
>> Okay thank you.

[00:13:31]
>> When you say it's gonna play both of them it's gonna be 20 DP or is it gonna?
>> Well in this case, this is only for horizontal. So horizontal you will have yeah, it will have a 20 and then eight and eight. Remember that when you're using modifiers let me pull this like this.

[00:13:49]
You can actually. Apply more than one padding, you can modify. What it's doing it depends on the modifier. Okay, what's it gonna do? In this case, it's not like making a padding of 20. It first makes another with 12 and another with 8 more. That's how it works.

[00:14:13]
>> So this is the only way to pass pass or you passing one but then you applying another ones, right, I mean.
>> It's yeah, it's a way that you have to define modifiers outside and apply them inside your receive them as an argument in your function. Remember, we're just a function.

[00:14:31]
Just remember that okay.