1 00:00:01,140 --> 00:00:07,110 In the last lecture, you learn how to create a drawing menu, and the bottom navigation bar is another 2 00:00:07,110 --> 00:00:09,090 way of adding menus to your app. 3 00:00:09,420 --> 00:00:12,690 But it's recommended not to have more than five options on it. 4 00:00:13,260 --> 00:00:16,740 To draw menu is used for very many options instead. 5 00:00:17,070 --> 00:00:19,800 As you saw earlier, so they have plenty of options. 6 00:00:19,800 --> 00:00:24,630 But here we only have two, but we can go all the way up to five more is not recommended. 7 00:00:25,140 --> 00:00:28,680 So let's look at how we can create such a bottom navigation bar. 8 00:00:29,190 --> 00:00:36,030 Therefore, let's go back to our project and we're going to go ahead and go back to our scaffold because 9 00:00:36,030 --> 00:00:37,890 that's where we had set up our top bar. 10 00:00:37,920 --> 00:00:39,290 Our drawer, our content. 11 00:00:39,300 --> 00:00:45,960 And now if you look over it, you will find that it also has something called a bottom bar. 12 00:00:45,990 --> 00:00:46,720 So there we are. 13 00:00:46,740 --> 00:00:50,100 Bottom bar and composable that we can create here. 14 00:00:50,490 --> 00:00:56,580 So let's go ahead and create that bottom bar, which will for now just be an empty lumber. 15 00:00:56,910 --> 00:01:00,390 But we're going to create our own component for that. 16 00:01:00,720 --> 00:01:05,430 So instead of our components, let's go ahead and create a bottom bar component. 17 00:01:07,340 --> 00:01:11,990 And I'm going to just create a new Scotland file once again. 18 00:01:12,350 --> 00:01:21,380 I'm going to call this one home bottom menu like so now this home button button menu will be a composable 19 00:01:21,380 --> 00:01:21,940 once again. 20 00:01:21,950 --> 00:01:29,420 So let's use the composable annotation here and then create our home bottom menu. 21 00:01:30,740 --> 00:01:33,380 So what do we want to have inside of it? 22 00:01:33,740 --> 00:01:40,100 Well, we want to have a list of items that we want to display, so we have the mail and the meat item, 23 00:01:40,430 --> 00:01:43,940 and you see that we need an icon as well as a title or text here. 24 00:01:44,370 --> 00:01:45,080 Same goes here. 25 00:01:45,080 --> 00:01:46,340 I can add text. 26 00:01:46,850 --> 00:01:50,900 So this is very similar to what we had with our draw menu data. 27 00:01:51,120 --> 00:01:56,540 We need to create home button menu data, so to speak, in a similar format. 28 00:01:56,840 --> 00:01:58,730 So let's go ahead and just do exactly that. 29 00:01:59,270 --> 00:02:01,070 Therefore, let's go ahead here. 30 00:02:01,610 --> 00:02:06,500 And actually, at this point, I think it makes sense to create a model. 31 00:02:08,139 --> 00:02:13,180 Package, so let me call this one model, because now we have different models. 32 00:02:13,210 --> 00:02:14,230 Models are. 33 00:02:15,840 --> 00:02:22,650 Basically, just classes that define how a specific piece of data or how an object should look like. 34 00:02:22,920 --> 00:02:25,710 So in our case, it was to draw menu data before. 35 00:02:25,890 --> 00:02:33,600 So let's refactor it by drawing it into the model folder here and now it will be the same thing with 36 00:02:33,600 --> 00:02:36,750 our bottom menu data. 37 00:02:36,930 --> 00:02:38,490 I think we can call it like that. 38 00:02:39,210 --> 00:02:41,880 So let's go ahead and create a new class. 39 00:02:41,880 --> 00:02:50,190 This time it's going to be an actual class and it will be the bottom menu data class, and I'm going 40 00:02:50,190 --> 00:02:51,510 to do the same thing as I did here. 41 00:02:51,510 --> 00:02:52,800 I'm going to seal this class. 42 00:02:53,640 --> 00:02:56,610 So this will be a sealed class bottom menu data. 43 00:02:56,880 --> 00:03:02,850 And now I can define what kind of properties my menu data should have. 44 00:03:03,660 --> 00:03:07,590 So if I look at it actually doesn't need too much information. 45 00:03:09,980 --> 00:03:17,750 As I said, it would just need an icon, which we are going to use to image a vector once again for. 46 00:03:17,960 --> 00:03:22,670 And then we need the title, which will just be a string, that's pretty much it. 47 00:03:22,670 --> 00:03:27,320 So that's all the data that we need for bottom menu data. 48 00:03:27,590 --> 00:03:34,400 And let's do the same thing as we have done in our draw menu data where we just created those objects 49 00:03:34,400 --> 00:03:36,410 that we're going to have in the list later on. 50 00:03:36,770 --> 00:03:43,280 So let me just set up the object mail, for example, which will be this little object down here. 51 00:03:44,300 --> 00:03:51,620 And it will have what will be of type bottom menu data, which is this sealed closet we just created. 52 00:03:52,190 --> 00:03:58,160 And I'm going to set the icon to be from icons outlined dot mail. 53 00:03:58,820 --> 00:04:02,030 And now, in order for this to work, we need to import icons. 54 00:04:02,150 --> 00:04:06,110 So let me make sure that I'm importing icons and mail. 55 00:04:07,250 --> 00:04:07,690 All right. 56 00:04:07,700 --> 00:04:09,560 And now we need to person to title. 57 00:04:09,620 --> 00:04:13,080 And I'm just going to say it should be mail now. 58 00:04:13,100 --> 00:04:16,130 The second object, if we look at it, should be meat. 59 00:04:16,310 --> 00:04:19,220 OK, so our design is that this is how the app should look like. 60 00:04:19,250 --> 00:04:19,550 All right. 61 00:04:19,550 --> 00:04:20,690 So let's do exactly that. 62 00:04:21,320 --> 00:04:31,100 And this won't be the neat bottom menu of data which will have the icons or taken from icons that outlined 63 00:04:32,210 --> 00:04:33,230 with a capital O. 64 00:04:34,500 --> 00:04:36,270 That video call. 65 00:04:38,090 --> 00:04:38,600 Like so. 66 00:04:40,240 --> 00:04:44,080 And then we need to import a video call as well as give it a title as well. 67 00:04:44,350 --> 00:04:46,420 And I'm going to give it the title of meat. 68 00:04:47,530 --> 00:04:50,800 OK, so now we have the two objects, but they are not used as of now. 69 00:04:51,130 --> 00:04:52,900 And where would we want to use them? 70 00:04:53,260 --> 00:05:00,610 Well, I would say in our home bottom menu because that's where we have our composable now we can create 71 00:05:00,610 --> 00:05:05,110 a list of those items and we can display them inside of our bottom navigation. 72 00:05:05,650 --> 00:05:07,330 So let's do exactly that. 73 00:05:07,720 --> 00:05:17,440 Let's go ahead and create a new list of items, which will be a list of our bottom menu data. 74 00:05:18,360 --> 00:05:23,700 And on one hand, I'm going to add the mail, and by the way, we need to import it because it is in 75 00:05:23,700 --> 00:05:28,980 a different folder, it's in the model folder and we are currently in the components folder or package. 76 00:05:29,490 --> 00:05:39,660 And let's add the second item here as well, which will be our bottom menu data that might. 77 00:05:40,840 --> 00:05:41,150 OK. 78 00:05:41,230 --> 00:05:45,550 Let me put that into a second row like this, and it will be pretty readable, I'd say. 79 00:05:46,060 --> 00:05:53,440 OK, so now that we have our items, let's set up our bottom navigation and the bottom navigation is 80 00:05:53,440 --> 00:05:54,610 actually a composable. 81 00:05:54,880 --> 00:05:57,520 So there is this composable called bottom navigation. 82 00:05:58,330 --> 00:06:06,820 So this bottom navigation, as always, can have a bunch of properties or a bunch of settings that you 83 00:06:06,820 --> 00:06:07,360 can set up. 84 00:06:07,630 --> 00:06:11,650 So the modifier, the background, color content, color, elevation and so forth. 85 00:06:12,580 --> 00:06:15,380 So let's go ahead and set the background color. 86 00:06:16,480 --> 00:06:19,230 And this will be inside of those brackets here. 87 00:06:19,240 --> 00:06:19,930 Parentheses. 88 00:06:20,200 --> 00:06:21,250 So background color. 89 00:06:21,640 --> 00:06:24,850 I'm going to set it to be a color resource this time. 90 00:06:25,300 --> 00:06:28,000 So color or you can just use color dot white. 91 00:06:28,270 --> 00:06:29,110 This should work as well. 92 00:06:29,370 --> 00:06:30,850 No resource either way is fine. 93 00:06:31,300 --> 00:06:33,550 Then the content of that thing. 94 00:06:33,550 --> 00:06:34,540 So that was the background. 95 00:06:34,540 --> 00:06:37,090 But now the content itself should be black. 96 00:06:37,900 --> 00:06:41,410 So you see here, this is while it's close to black. 97 00:06:42,190 --> 00:06:46,240 So let's give it the content color of color dot black. 98 00:06:47,680 --> 00:06:53,710 OK, so that's our bottom navigation, and now for every single item that we have here, I would like 99 00:06:53,710 --> 00:06:55,780 to do something with my bottom navigation. 100 00:06:55,870 --> 00:07:00,370 I would like to create a bottom navigation item so items dot for each. 101 00:07:00,460 --> 00:07:06,190 So we go through every single item inside of items, which is, in this case, just those two items. 102 00:07:06,730 --> 00:07:16,100 And I'm going to create a new bottom navigation item like so. 103 00:07:16,120 --> 00:07:20,290 So it's another composable which can be inside of a bottom navigation. 104 00:07:20,890 --> 00:07:21,970 It can be selected. 105 00:07:22,600 --> 00:07:24,460 It can be on clicked. 106 00:07:24,760 --> 00:07:28,240 So you need to set whether it's selected by default or not. 107 00:07:28,600 --> 00:07:36,070 Then you have your own click event, which we for now can be empty, and then you need to say what icon 108 00:07:36,070 --> 00:07:36,790 it should have. 109 00:07:37,990 --> 00:07:48,280 So I'm going to define the icon to be an alumna, which is not going to be empty, but I'm going to 110 00:07:48,280 --> 00:07:49,120 create an icon. 111 00:07:49,150 --> 00:07:52,540 Therefore, I need to import the compose UI icons. 112 00:07:53,760 --> 00:08:02,430 And there I can get the I can from the image vector, which will be it that con icon, of course. 113 00:08:03,390 --> 00:08:06,900 And then the content description. 114 00:08:09,710 --> 00:08:11,960 Will be our it. 115 00:08:12,050 --> 00:08:12,710 That title. 116 00:08:13,010 --> 00:08:16,970 So this it is this bottom menu data here. 117 00:08:17,150 --> 00:08:18,300 This is where it comes from. 118 00:08:18,350 --> 00:08:19,550 So it's great out. 119 00:08:19,820 --> 00:08:23,310 I cannot highlighted what my mouse, but this is where it currently is. 120 00:08:23,330 --> 00:08:30,020 So for each and this, it is the bottom and data that is going to be first the male, which if you look 121 00:08:30,020 --> 00:08:35,150 at it, has the icon of this male and then the title of a male. 122 00:08:35,419 --> 00:08:38,570 And the second one has the I can a video call and meet. 123 00:08:38,870 --> 00:08:41,490 OK, so that's what this it will be. 124 00:08:42,110 --> 00:08:47,750 And we're going to set the icon to have this image vector, which comes from Iken, which is just an 125 00:08:48,080 --> 00:08:49,130 icon or an image. 126 00:08:50,350 --> 00:08:50,860 OK. 127 00:08:52,830 --> 00:08:54,540 Now that by itself is not all. 128 00:08:54,780 --> 00:08:57,540 So let's go ahead and create some more settings here. 129 00:08:57,930 --> 00:09:01,080 For example, I want to have a label setting as well. 130 00:09:01,710 --> 00:09:10,470 So this label should be a text composable, so it should be the text of its dot title. 131 00:09:11,740 --> 00:09:17,830 And we need to import text for this and then add the comma here, and that should do the trick. 132 00:09:18,970 --> 00:09:22,000 OK, so that's our bottom navigation item. 133 00:09:22,000 --> 00:09:25,870 We don't need to do any internal code after that. 134 00:09:25,870 --> 00:09:27,490 We're just creating this item. 135 00:09:27,880 --> 00:09:32,110 When I was running any specific code after it or for it. 136 00:09:32,560 --> 00:09:38,190 So we have the label now we have that it's selected and I would like to always show the label. 137 00:09:38,230 --> 00:09:45,430 So there's this setting, always show label that you can set to true and then the label will always 138 00:09:45,430 --> 00:09:47,640 be showing and turned on. 139 00:09:47,650 --> 00:09:51,880 So this text itself, which is this label that we're just created. 140 00:09:52,630 --> 00:10:03,340 So at this point, we can use our home bottom menu, and that obviously has to happen at the point where 141 00:10:04,000 --> 00:10:07,780 we want to display it and that will be inside of our main. 142 00:10:09,470 --> 00:10:11,390 Activity bottom bar. 143 00:10:11,720 --> 00:10:17,270 So let's just go ahead and import our home bottom menu that we just created. 144 00:10:18,170 --> 00:10:19,070 So let's run this. 145 00:10:21,160 --> 00:10:28,240 And see if it also works on our application and not just the example application, so we see there we 146 00:10:28,240 --> 00:10:28,480 are. 147 00:10:28,690 --> 00:10:30,400 So we have our draw. 148 00:10:31,610 --> 00:10:34,820 And we have our bottom menu bar. 149 00:10:37,580 --> 00:10:41,390 All right, and now you could go ahead and extend this however you like. 150 00:10:41,480 --> 00:10:41,870 All right. 151 00:10:41,870 --> 00:10:45,140 So you could, for example, just create another entry. 152 00:10:45,140 --> 00:10:47,540 So let's say you want to have three entries there. 153 00:10:47,870 --> 00:10:53,300 You would just create another item inside of your bottom, your data. 154 00:10:53,450 --> 00:10:55,460 So just create another object. 155 00:10:55,820 --> 00:10:57,770 Let's use that same icon that we have here. 156 00:10:57,830 --> 00:11:00,020 Let's look at other icons that we have. 157 00:11:00,530 --> 00:11:04,850 So dots and there are plenty. 158 00:11:05,150 --> 00:11:08,390 So let's use the add, and let's call this one add. 159 00:11:08,570 --> 00:11:17,870 And this one will be add like so and then instead of home bottom menu, we use the bottom menu. 160 00:11:19,720 --> 00:11:21,400 They thought that had. 161 00:11:22,620 --> 00:11:24,420 And obviously, we need to add a comma here. 162 00:11:24,960 --> 00:11:31,230 And if you rerun this now, we should see the add button here at the bottom as well so that we are male 163 00:11:31,230 --> 00:11:31,980 meat add. 164 00:11:32,250 --> 00:11:36,300 OK, so this was just a demonstration of how easy it is to extend this now. 165 00:11:37,050 --> 00:11:40,440 But I'm going to get rid of this because this was just for demonstration purposes. 166 00:11:40,920 --> 00:11:41,290 All right. 167 00:11:41,310 --> 00:11:44,840 So that's it for this video and the next one, we're going to look at the lazy column. 168 00:11:44,850 --> 00:11:45,750 So see you there.